HTTP / 2 означает, что больше ресурсов можно загрузить одновременно, а не то, что они будут .
Браузеры имеют различную эвристику относительно того, что загружать икогда.
Например, если изображение требуется файлу CSS, то это изображение не может быть запрошено, например, до тех пор, пока файл CSS не будет загружен и обработан (без предварительной загрузки).Таким образом, в этом случае CSS и изображение не будут загружаться параллельно, несмотря на то, что HTTP / 2 разрешает это.
Другая проблема заключается в том, что теги <script> могут изменять содержимое страницы, если только это явно не помечено какasync (или defer) это «блокировка рендеринга».Это означает, что любой JavaScript, расположенный ниже по странице, не будет работать, пока не будет запущен тег <script>.Теперь браузер может сканировать заранее и загружать будущие сценарии и просто не запускать их до тех пор, пока ему не понадобится, если потребуется, с небольшим риском того, что загрузка будет потрачена впустую, если впоследствии сценарии на самом деле не нужны.Это зависит от браузера, и, возможно, Chrome решит, что делать это не стоит.
Если посмотреть на ваш конкретный сайт, ваша домашняя страница выглядит в основном только из тегов скрипта.Вы можете исследовать использование async или defer , чтобы параллельные загрузки происходили чаще, но если вы хотите реального улучшения производительности, вам, вероятно, следует вернуться к основам кодирования HTML с помощью CSS, а затемулучшая его с помощью JavaScript, а не кодируя все с помощью JavaScript.
Я также не уверен, в чем смысл вашей предварительной загрузки вашего CSS?
<link rel='preload' href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.css' as="style" onload="this.onload=null;this.rel='stylesheet'" />
<link rel='preload' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v3.0.2/mapbox-gl-directions.css' as="style" onload="this.onload=null;this.rel='stylesheet'" />
<link rel="preload" href="https://npmcdn.com/angular2-toaster@2.0.0/toaster.css" as="style" onload="this.onload=null;this.rel='stylesheet'" />
<link rel="preload" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" as="style" onload="this.onload=null;this.rel='stylesheet'"/>
<link rel="preload" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css" as="style" onload="this.onload=null;this.rel='stylesheet'"/>
Предзагрузка предназначена дляресурсы, которые не сразу видны браузеру (например, пример изображения выше), чтобы позволить ему начать загрузку раньше.Здесь вы используете его для предварительной загрузки CSS.Единственное преимущество - это не блокировка рендера, а затем вы используете функцию onload для ее отображения.Однако CSS, как правило, блокирует рендеринг по какой-то причине, иначе ваш контент выглядит нестандартным.А поскольку он предварительно загружен, он запрашивается как высокоприоритетный (что в любом случае было бы запрошено CSS), поэтому не уверен, какое преимущество это дает вам, чтобы быть честным.Очень смущен ...