Google разработал экспериментальный HTML-атрибут для Chrome под названием importance, который указывает относительную важность ресурса, помогает улучшить Core Web Vitals и пользовательский опыт.
С помощью атрибута можно присвоить элементу высокий или низкий приоритет при загрузке. В Google это назвали «Подсказками о приоритетах».
Новый атрибут доступен для тестирования в Chrome 96-99. Эксперимент продлится до 22 марта 2022 года.
Разработчики могут ускорить нахождение элементов на странице, используя link rel="preload", а также контролировать загрузку и выполнение скриптов с помощью атрибутов async и defer. Но они не могут сообщить браузеру, какие элементы важны, а какие нет.
Атрибут importance дает браузеру подсказку о том, какой элемент страницы важно загрузить в первую очередь, а какой нет. Это обеспечивает оптимальную загрузку и улучшает метрики Core Web Vitals.
Новый атрибут может иметь следующие значения:
Атрибут можно использовать для тегов:
Пример использования атрибута:
fetch ('https://example.com/', {importance: 'low'}).then(data => {// Trigger a low priority fetch});
В Google привели несколько примеров, как атрибут importance может повлиять на значения метрик Core Web Vitals.
Загрузка изображений с предварительной загрузкой получает низкий приоритет и откладывается. Если использовать атрибут importance, то это позволит присвоить изображению высокий приоритет и обеспечить более раннюю загрузку.
Google провел тест, где фоновое изображение было загружено с указанием приоритета и без него. При высоком приоритете метрика LCP улучшилась с 2,6 до 1,9 с.
То же самое происходит со скриптами, в которых используются атрибуты async или defer. Они также получают низкий приоритет. Добавление атрибута importance к важным скриптам позволяет браузеру быстрее отобразить страницу и обеспечить лучший пользовательский опыт.
Источник: Журнал Топвизор