Загрузка сайтов – сложный процесс, в котором браузеру нужно быстро проанализировать шрифты, изображения, скрипты и другие элементы на странице. Учитывая, что по умолчанию интернет работает медленно, пользователю приходится смотреть на белый экран и ждать, пока загрузится содержимое. Чтобы ускорить процесс, разработаны алгоритмы, которые заранее анализируют страницу и загружают размещенные элементы по приоритету. Причем разработчик может сам указывать, в какой последовательности сайт должен открываться пользователю. Эта функция будет реализована с помощью приоритетных подсказок Priority Hints и атрибута importance. Они будут указывать на относительную важность элементов окна для браузера, обеспечат оптимальную загрузку и улучшат Core Web Vitals (показатель, с помощью которого оценивают пользовательский опыт работы с сайтом).
Приоритетные подсказки (Priority Hints) – экспериментальная функция, пробная версия которой доступна в Chrome 96+. На стабильных версиях Chrome она будет доступна примерно в начале 2022 г. При желании можно зарегистрировать домен в пробной версии и включить токен в head страницу, чтобы протестировать функцию.
Приоритетные подсказки Priority Hints работают на основе атрибута importance, который используется с тегами <link>, <img>, <script> и <iframe>. С его помощью можно устанавливать приоритет для шрифтов, скриптов, изображений, CSS и других объектов. При этом атрибут будет принимать следующие значения:
До этого использовались async/defer, с помощью которых скрипты загружались после парсинга HTML или в беграунде, а также rel=preload/preconnect, с помощью которого увеличивали приоритет загрузки async скриптов.
Зная логику приоритетизации web-обозревателей, можно настраивать порядок открытия страниц. Владелец сайта может выбирать, какие элементы будут загружаться первыми, не блокируя остальных. Это важно для объектов, которые с трудом обнаруживаются браузером.
Приоритетные подсказки Priority Hints предназначены для оптимальной выгрузки всех объектов, ссылки и скрипты на которые расставляются в коде в соответствии с их приоритетностью. Например, preload указывает на ресурсы, которые предназначены для ранней загрузки, lazy loading – загружаются за первым экраном, async/defer – загружает скрипты, не блокируя основной контент.
Используя атрибут importance, можно будет:
С помощью Priority Hints можно будет контролировать вычисление приоритета Chrome или другим обозревателем, улучшать производительность и показатели, которые оценивают пользовательский опыт работы с сайтом (Core Web Vitals). К примеру, если фоновое изображение будет загружено предварительно, то изображения из карусели – по мере изучения пользователем контента. В итоге это улучшит показатель LCP – время, в течение которого браузер отображает крупнейший видимый объект в области просмотра.
Атрибут importance будет использоваться в качестве подсказки, а не прямой директивы. Он «намекнет» web-обозревателю на предпочтения разработчика, но при этом сохранит возможность в случае конфликта самостоятельно определять приоритетность элементов. При этом Priority Hints не заменяют предварительной загрузки – обязательной выборки, за которой легче наблюдать и которую легче измерить. Приоритетные подсказки лишь дополнят ее, тем самым увеличив степень детализации приоритетизации.
С одной стороны, Priority Hints могут стать удобным инструментом оптимизации. С другой, чтобы пользоваться ими, понадобится опыт работы в developer console, верстке, а также глубокие знания особенностей рендеринга HTML браузерами и работы HTTP-протокола. Поэтому судить о том, «приживется» ли новый атрибут, можно будет только после тестирования и анализа фидбека разработчиков.
Войти
