Google разработал HTML-атрибут для Chrome, который помогает улучшить Core Web Vitals

Google разработал экспериментальный HTML-атрибут для Chrome под названием importance, который указывает относительную важность ресурса, помогает улучшить Core Web Vitals и пользовательский опыт. 

С помощью атрибута можно присвоить элементу высокий или низкий приоритет при загрузке. В Google это назвали «Подсказками о приоритетах».

Новый атрибут доступен для тестирования в Chrome 96-99. Эксперимент продлится до 22 марта 2022 года.

Как это работает

Разработчики могут ускорить нахождение элементов на странице, используя link rel="preload", а также контролировать загрузку и выполнение скриптов с помощью атрибутов async и defer. Но они не могут сообщить браузеру, какие элементы важны, а какие нет.

Атрибут importance дает браузеру подсказку о том, какой элемент страницы важно загрузить в первую очередь, а какой нет. Это обеспечивает оптимальную загрузку и улучшает метрики Core Web Vitals.

Новый атрибут может иметь следующие значения:

• High – высокий приоритет.
• Low – низкий приоритет.
• Auto – значение по умолчанию, браузер определяет важность сам.

Атрибут можно использовать для тегов:

• link;
• img;
• script;
• iframe.

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

< !-- We don't want a high priority for this above-the-fold image -- >
< img src="/images/in_viewport_but_not_important.svg" importance="low" alt="I'm an unimportant image!" >
 
< !-- We want to initiate an early fetch for a resource, but also deprioritize it -- >
< link rel="preload" href="/js/script.js" as="script" importance="low" >
 
< script >
 fetch ('https://example.com/', {importance: 'low'}).then(data =>  {
 // Trigger a low priority fetch
 });
< /script >
 
< !-- The third-party contents of this iframe can load with a low priority -- >
< iframe src="https://example.com" width="600" height="400" importance="low" > < /iframe >

Примеры использования

В Google привели несколько примеров, как атрибут importance может повлиять на значения метрик Core Web Vitals.

Увеличить приоритет загрузки LCP-изображений

Загрузка изображений с предварительной загрузкой получает низкий приоритет и откладывается. Если использовать атрибут importance, то это позволит присвоить изображению высокий приоритет и обеспечить более раннюю загрузку.

< img src="lcp-image.jpg" importance="high" >

Google провел тест, где фоновое изображение было загружено с указанием приоритета и без него. При высоком приоритете метрика LCP улучшилась с 2,6 до 1,9 с.

Изменить приоритет загрузки скриптов

То же самое происходит со скриптами, в которых используются атрибуты async или defer. Они также получают низкий приоритет. Добавление атрибута importance к важным скриптам позволяет браузеру быстрее отобразить страницу и обеспечить лучший пользовательский опыт.

< script src="async_but_important.js" async importance="high">

Источник: Журнал Топвизор