Источник – journal.topvisor.com
Google разработал экспериментальный HTML-атрибут для Chrome под названием importance. Он указывает относительную важность ресурса, помогает улучшить Core Web Vitals и пользовательский опыт.
С помощью атрибута можно присвоить элементу высокий или низкий приоритет при загрузке. В Google это назвали «Подсказками о приоритетах».
Что могут разработчики:
- ускорить нахождение элементов на странице, используя 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 >
