Ускорьте загрузку ресурсов с помощью Priority Hints и fetchpriority

Как быстро загружаются ваши самые важные ресурсы?

Именно этот вопрос ставит владельцев веб-сайтов (и опытных веб-экспертов) в тупик. И так уж случилось, что это то, что делает или ломает ваш сайт в первые миллисекунды.

Когда дело доходит до оптимизации загрузки ресурсов, у вас есть два варианта:

1. Полностью полагайтесь на механизмы браузеров для загрузки и извлечения ресурсов в оптимальном порядке.
2. Попробуйте помочь им, внедрив подсказки ресурсов.

К сожалению, какими бы хорошими ни были современные браузеры, каждый сайт/приложение отличается по настройке и контексту. И хотя они довольно хорошо расставляют приоритеты ресурсов, в некоторых случаях этого недостаточно.

Увы, подсказки ресурсов оказывают ограниченное влияние на расстановку приоритетов ресурсов.

К счастью, есть новая подсказка, которую вы можете добавить в свой набор инструментов для веб-производительности — подсказки по приоритетам.

И в этой статье вы узнаете больше о:

• Что такое подсказки приоритета;
• Когда их использовать;
• Как их реализовать через fetchpriority;
• Как вы можете протестировать их на своем сайте.

Давайте начнем!

Что такое приоритетные подсказки?

Подсказки приоритета — это сигнал, который позволяет владельцам веб-сайтов и разработчикам указывать приоритет ресурсов (например, изображений, шрифтов, CSS, скриптов и фреймов) при их загрузке браузерами.

Браузер должен загружать все виды ресурсов в процессе создания веб-страницы. В качестве приоритетного ресурса он сначала запрашивает и загружает HTML-документ.

Но как браузер определяет, что загружать дальше?

Что ж, браузеры имеют набор предопределенных приоритетов для каждого типа ресурсов:

Эти приоритеты по умолчанию обычно работают довольно хорошо, что приводит к хорошей производительности в Интернете.

Однако, как упомянул Эдди Османи в своей статье о подсказках приоритета, браузеры могут делать довольно обоснованные предположения о том, что выбрать дальше.

Но они не знают ваш проект так хорошо, как вы.

Поэтому может потребоваться небольшая доработка:

«В таких браузерах, как Chrome, есть эвристика для попытки извлечения ресурсов с соответствующим приоритетом на основе сигналов, например, о том, находятся ли они в области просмотра. Тем не менее, без подсказок приоритета Chrome может повысить приоритет только для изображений в области просмотра после компоновки. была завершена. Очень часто это бывает слишком поздно, и на этом этапе она может конкурировать со всем остальным. Еще одна причина рассмотреть возможность использования подсказок заключается в том, что как автор страницы вы, вероятно, знаете, что вашим пользователям важнее всего увидеть в первую очередь и может сообщить браузеру, чтобы он мог оптимизировать его для вашего варианта использования».

Раньше единственное, что вы могли сделать, это использовать либо предварительную загрузку, либо предварительное подключение.

И хотя предварительная загрузка является обязательной директивой, которую должны соблюдать браузеры, в некоторых случаях предварительно загруженный ресурс все же может получить низкий приоритет.

Например, предварительно загруженное изображение Largest Contentful Paint (LCP) может получить низкий приоритет и быть вытеснено другими ресурсами с высоким приоритетом. В таких случаях подсказки по приоритетам могут прекрасно дополнить предварительную загрузку и помочь ускорить загрузку ресурсов.

Вот вебинар о подсказках приоритета, на котором Пэт ​​Минан рассказывает о подсказках приоритета в Chrome и даже называет их «чит-кодом» для LCP:

Это яркий пример силы подсказок приоритета.

Теперь давайте посмотрим, когда вам следует внедрить подсказки приоритета в вашу стратегию веб-производительности.

Когда использовать подсказки о приоритетах

По словам Google, есть 5 основных сценариев, в которых могут помочь подсказки о приоритетах:

1. У вас есть несколько изображений в верхней части сгиба, но все они не обязательно должны иметь одинаковый приоритет. Например, в карусели изображений только первое видимое изображение требует более высокого приоритета по сравнению с остальными.
   
2. Основные изображения внутри области просмотра начинаются с низкого приоритета. После завершения макета Chrome обнаруживает, что они находятся в области просмотра, и повышает их приоритет (к сожалению, инструменты разработчика показывают только окончательный приоритет — WebPageTest покажет оба). Обычно это добавляет значительную задержку к загрузке изображения. Предоставление подсказки приоритета в разметке позволяет изображению запускаться с высоким приоритетом и начинать загрузку намного раньше.

Примечание. Объявление скриптов как асинхронных или отложенных указывает браузеру загружать их асинхронно. Однако, как видно на рисунке выше, этим сценариям также назначается «низкий» приоритет. Вы можете повысить их приоритет, обеспечив при этом асинхронную загрузку, особенно для любых сценариев, которые имеют решающее значение для взаимодействия с пользователем.

Вы можете использовать JavaScript fetch() API для асинхронной выборки ресурсов или данных. Браузер присваивает Fetch высокий приоритет. Могут быть ситуации, когда вы не хотите, чтобы все ваши выборки выполнялись с высоким приоритетом, и вместо этого предпочитаете использовать разные подсказки приоритета. Это может быть полезно при выполнении фоновых вызовов API и их смешивании с вызовами API, которые реагируют на пользовательский ввод, например, с автозаполнением. Фоновые вызовы API могут быть помечены как низкоприоритетные, а интерактивные вызовы API — как высокоприоритетные.

Браузер назначает CSS и шрифтам высокий приоритет, но не все такие ресурсы могут быть одинаково важны или необходимы для LCP. Вы можете использовать подсказки приоритета, чтобы понизить приоритет некоторых из этих ресурсов.

Практически любой веб-сайт подпадает под первые два сценария. Чтобы определить, следует ли вам работать над остальными, либо углубитесь в свой (HTML/JS) код, либо обратитесь за помощью к веб-разработчику.

Как реализовать подсказки приоритета: атрибут fetchpriority

Вы можете реализовать подсказки приоритета, используя HTML-атрибут fetchpriority.

Вы можете использовать атрибут с:

• ссылка на сайт
• изображение
• сценарий
• теги iframe

Атрибут fetchpriority принимает одно из трех значений:

• высокий: указывает, что вы считаете ресурс критически важным и хотите, чтобы браузер отдал ему приоритет.
• низкий: сигнализирует о том, что вы считаете ресурс менее важным и хотите, чтобы браузер лишил его приоритета.
• auto: значение по умолчанию, когда у вас нет предпочтений и вы позволяете браузеру решать соответствующий приоритет.

Кроме того, вы можете использовать JavaScript Fetch API:

Несколько вещей, о которых следует помнить при использовании атрибута fetchpriority :

• fetchpriority не гарантирует, что ресурс с более высоким приоритетом будет загружен раньше других (с более низким приоритетом) ресурсов того же типа.
• fetchpriority не следует использовать для управления порядком загрузки.
• fetchpriority не является обязательной директивой, и она не может заставить браузер получить ресурс или предотвратить его получение. От браузера зависит, будет ли он извлекать ресурс или нет.

Важно: Как и в случае с подсказками по ресурсам, подсказки по приоритетам следует использовать с осторожностью, поскольку чрезмерное их использование может привести к замедлению работы, а не к повышению производительности.

Как протестировать свой сайт с помощью подсказок о приоритетах

Прежде чем запускать тесты, вы должны знать, что подсказки приоритета доступны только в Chrome 101 (или новее) и Edge 101 (или новее):

Теперь к заданному вопросу:

Самый простой способ — использовать инструмент, чтобы вам не приходилось вручную менять код.

К счастью, функция экспериментов WebPageTest позволяет тестировать функции производительности, такие как подсказки приоритета, без изменения кода.

Однако функция эксперимента WebPageTest является частью их платной подписки, поэтому вам нужно запланировать некоторые дополнительные расходы.

Напротив, если у вас есть технические навыки, вы можете самостоятельно настроить код своего сайта и проверить влияние подсказок приоритета.

Обязательно запускайте тесты после каждого внесенного вами изменения.

Резюме

Мы рассмотрели много вопросов, поэтому вот краткий обзор наиболее важных моментов:

• Подсказки по приоритету позволяют указать приоритет ресурсов вашего сайта.
• Приоритетные подсказки могут помочь вам ускорить загрузку изображений в верхней части страницы, основных изображений (элемент LCP), асинхронных и отложенных скриптов, CSS и файлов шрифтов.
• Подсказки приоритета могут быть реализованы через атрибут fetchpriority.
• Вы можете использовать атрибут fetchpriority с тегами link, img, script и iframe.
• Атрибут fetchpriority принимает одно из трех значений: высокое, низкое и автоматическое.
• Предупреждение. Подсказки по приоритетам следует применять с осторожностью, поскольку их чрезмерное использование может привести к снижению производительности, а не к повышению скорости.
• fetchpriority не является обязательной директивой, и она не может заставить браузер получить ресурс или предотвратить его получение. От браузера зависит, будет ли он извлекать ресурс или нет.
• Подсказки приоритета доступны в Chrome 101 или более поздней версии.

Чтобы измерить влияние подсказок Priority Hints на ваш сайт, запускайте тесты после каждого изменения.

Популярные инструменты тестирования:

• Статистика PageSpeed
• GTMetrix
• Веб-страницаТест
• Маяк
• Пингдом