Поэтому, при проведении аудита PageSpeed Insights, может появиться данная рекомендация. Её необходимо устранить произведя корректные настройки.
Что такое предзагрузка и зачем она нужна
Почему так происходит? Получив запрос. Браузер сам решает какой контент на странице ему загружать первым. При этом он опирается на подсказки разработчика, который указывает о важности той или иной информации. К примеру, ресурсы CSS он загрузит в первую очередь, раньше чем изображения, сценарии и прочее.
Но, как человек знающий свою страницу лучше браузера, вы можете сообщить ему, что ряд ключевых запросов обязательно понадобятся позже. И неплохо было бы начать их предварительную загрузку как можно раньше. Сделать это можно используя тег <link rel = “preload”>.
Указав его, вы можете сообщить браузеру, что данный ресурс является необходимой частью кода и начать извлекать его требуется при малейшей же возможности. На практике, указание выглядит таким образом:
<link rel = “preload” as = “script” href = “super-Important.js”>
или
<link rel = “preload” as = “style” href = “crit.css”>
В обоих случаях приоритет ресурса остался неизменным. Разница лишь в том, что получив от вас информацию, браузер сможет начать загрузку заранее, так как уже оповещён о необходимости данной информации для адекватной работы.
Как это выглядит на практике
Рассмотрим мифический сайт со своей цепочкой критических запросов. К примеру, выглядит она таким образом:
index.html
|—app.js
|—styles.css
|—ui.js
В файле index.html заявлен <script src=»app.js»>. В процессе запуска app.js связывается с fetch, чтобы скачать styles.cssи ui.js. При этом, пока 2 последних ресурса не будут загружены, проанализированы и выполнены — страница не заполнится.
Проблема состоит в том, что браузер узнает о последних двух ресурсах только после того, как загрузит, проанализирует и выполнит app.js. Но, вы знаете наверняка, что они важны и должны быть загружены как можно скорее.
Чтобы повысить производительность сайта, объявите теги предварительной загрузки непосредственно в HTML. Получив соответствующее указание, браузер загрузит требующиеся ресурсы как только у него появится эта возможность.
Информация для него будет выглядеть так:
<head>
…
<link rel=»preload» href=»styles.css» as=»style»>
<link rel=»preload» href=»ui.js» as=»script»>
…
</head>
Обнаружив теги предварительной загрузки, браузер запросит их одновременно с app.js и отображение страницы произойдёт быстрее.
Чем тег <link rel = ”preload”> отличается от <link rel = ”prefetch”>
<link rel = ”preload”> — это предварительная загрузка. По большому счёту, она является инструкцией для браузера, что ему потребуется загрузить инструменты, которые необходимы для работы именно этой страницы — ключевые сценарии, веб-шрифты, фото, анимацию и прочее.
<link rel = ”prefetch”> — это предварительная выборка и устроена она иначе. Она указывает на будущую навигацию пользователя, к примеру — перемещение между страницами. Соответственно, первый тег является приоритетным, так как служит для получения критических данных в конкретный момент. И если запустить их параллельно, то второй будет отложен.
Как предварительная загрузка может улучшить работу браузера
Предварительная загрузка предназначена как для текущей навигации, так как и для подресурса. Её существенным отличием перед предварительной выборкой является атрибут as. Он существенно расширяет возможности браузера в процессе обработки информации.
- Браузер может правильно установить приоритетный ресурс, который будет загружен в первую очередь. Это не приведет к задержке критических ресурсов или промедлению в работе некритических
- Браузер может убедиться, что на запрос распространяются правильные директивы Content-Security-Policy. Если таковых нет, он не производит выход на сервер
- Браузер может отправлять соответствующие Accept заголовки в зависимости от типа ресурса. К примеру, «image / webp» при загрузке изображений
- Браузер знает тип ресурса, поэтому позже он может определить, целесообразность его использования для будущих запросов, которым нужен тот же ресурс.
Кроме того, предварительная загрузка не блокирует событие окна, если иное не предусмотрено самим ресурсом. А все эти возможности вместе, позволяют настроить эффективную работу страницы.
Предварительная загрузка ресурсов, обнаруженных позже
Одним из основных моментов, когда нужна предварительная загрузка критических ресурсов — загрузка данных, которые браузер обнаруживает на поздних этапах. Большинство ресурсов, основанных на разметке, обнаруживаются прелоадером браузера довольно рано. Тем не менее, не все они есть в разметке. К примеру, нужные ресурсы могут скрываться в CSS и в JavaScript. И пока браузер их не найдёт, он не будет знать, что они ему потребуются. В ряде случаев, именно это задерживает первый рендеринг, рендеринг текста или загрузку критических частей страницы.
При помощи линка <link rel = ”preload”>, вы указываете браузеру, что вот этот ресурс ему обязательно понадобится в самое ближайшее время. Поэтому, будет просто отлично, если он начнёт загружать его немедленно.
Ранняя загрузка шрифтов
Ещё одним важным элементом ранней загрузки, который относится к шаблону «недавно обнаруженные критические ресурсы», являются вэб-шрифты. Они чрезвычайно важны для визуализации текста на странице, но зачастую, глубоко скрыты в CSS. Предварительный загрузчик может проанализировать CSS, но из-за того, что браузер наверняка не уверен, что они ему срочно потребуются, может отложить их загрузку «на потом». И даже если он это понимает, выполняет загрузку такого критического ресурса сразу не всегда, чтобы не приводить к ложным загрузкам. Поэтому, он предпочитает осуществлять работу только после получения всех правил CSS. В данном случае, работа браузера довольно сложная и алгоритм не всегда понятен.
Поскольку вы точно знаете, что без этих шрифтов не обойтись, используйте правило, которое будет выглядеть примерно таким образом:
<link rel=»preload» href=»font.woff2″ as=»font» type=»font/woff2″ crossorigin>
Обязательно используйте атрибут crossorigin, даже если ваши шрифты и страница имеют одно происхождение. Это важно для их корректного отображения.
Предварительная загрузка с использованием тега <link rel = ”preload”>, имеет ещё целый ряд применений. Потенциальная экономия времени основана на том, что чем раньше браузер сможет обрабатывать запросы — тем быстрее он выдаст нужную пользователю информацию. К примеру, если app.js загрузка, анализ и выполнение занимает 200 мс,то именно столько времени и составит потенциальная экономия для каждого ресурса.
Отлично сгуглили описание статьи с гугл помошника. 🙂
Спасибо за оценку нашей работы! 😊
Как воплотить это в реальности? Куда прописывать данные скрипты?
С добрым
1. Нужно брать конкретный проект
2. Смотреть способы применительно именно к нему
Для каждого проекта рациональными будут разные подходы.
Для большинства систем построения сайта есть общие готовые решения кеширования, которые, желательно, подобрать и использовать за основу.
А уже что-то дополнительное — нужно смотреть, думать и при понимании рациональности — внедрять.