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



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

Поделиться:

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: