Источник – 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 >
