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 >

Поділитися

Повідомити про помилку

Текст, який буде надіслано нашим редакторам: