Google тестирует для Chrome директиву, указывающую на...

Google тестирует для Chrome директиву, указывающую на приоритет/важность ресурсов для браузера. Расставляя приоритеты для ресурсов (изображений, стилей, скриптов, фреймов, шрифтов, сторонних загрузок), разработчик может оптимизировать последовательность загрузки этих ресурсов, и тем самым улучшить некоторые параметры Core Web Vitals.

Подробности: https://web.dev/priority-hints/

О чем речь?

— Новый атрибут importance (low|high|auto). Указывает относительную важность ресурса.

Ранее были доступны только

— async/defer для загрузки скриптов в бекграунде или после парсинга HTML.

— rel=preload/preconnect для увеличения приоритета загрузки async скриптов.

Для оптимальной загрузки всех ресурсов:

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

- preload добавляется для ранней загрузки некоторых важных ресурсов.

- async/defer для загрузки скриптов без блокирования другого контента.

- lazy loading за первым экраном, чтобы браузер использовал канал для загрузки важных ресурсов первого экрана.

Почему понадобился атрибут importance? Так как вышеперечисленных техник иногда недостаточно. Например:

- Несколько изображений на первом экране, которые имеют разный приоритет загрузки (карусель изображений).

- Стили и шрифты имеют по умолчанию высокий приоритет, но не всегда они одинаково важны для LCP.

- JS функция fetch дает высокий приоритет загрузки. Но в некоторых ситуациях этот приоритет не нужен.

- Async/defer скрипты имеют низкий приоритет. Иногда необходимо его увеличить.

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

Атрибут importance будет использоваться как подсказка, но не как прямая директива. Так как могут быть конфликты правил. Также есть нюансы при использовании CDN.

Будут ли использоваться атрибут приоритета или нет, зависит от результатов тестирования и фидбека разработчиков. Возможно, у сеошников появится еще один инструмент для оптимизации технички. С другой стороны, использование этого инструмента требует глубоких знаний в работе HTTP-протокола, особенностей рендеринга HTML браузерами, опыт работы в developer console для отслеживания тянущих на себя одеяло ресурсов, плюс необходимо разбираться в верстке и особенностях проекта, что сильно сужает наличие необходимых кадров на рынке.

А с другой стороны, может лучше навалить ссылок? 😃

Источник новости https://t.me/devakatalk/3228...