Измените языковые настройки Топвизор для работы с сервисом на родном языке. Вы также сможете выбрать и установить язык интерфейса позже в настройках Аккаунта. Измените языковые настройки Топвизор для работы с сервисом на родном языке. ru Русский Выбрать

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

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

Google разработал новый экспериментальный HTML-атрибут для Chrome, который позволяет улучшить Core Web Vitals и пользовательский опыт. Он получил название importance.

С помощью атрибута можно присвоить элементу высокий или низкий приоритет при загрузке. В Google это назвали «Подсказками о приоритетах».

Новый атрибут доступен для тестирования в Chrome 96-99. Эксперимент продлится до 22 марта 2022 года.

Как это работает

Разработчики могут ускорить нахождение элементов на странице, используя 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>

Примеры использования

В Google привели несколько примеров, как атрибут importance может повлиять на значения метрик Core Web Vitals. 

Увеличить приоритет загрузки LCP-изображений

Загрузка изображений с предварительной загрузкой получает низкий приоритет и откладывается. Если использовать атрибут importance, то это позволит присвоить изображению высокий приоритет и обеспечить более раннюю загрузку.

<img src="lcp-image.jpg" importance="high">

Google провёл тест, где фоновое изображение было загружено с указанием приоритета и без него. При высоком приоритете метрика LCP улучшилась с 2,6 до 1,9 с. 

Изменить приоритет загрузки скриптов

То же самое происходит со скриптами, в которых используются атрибуты async или defer. Они также получают низкий приоритет. Добавление атрибута importance к важным скриптам позволяет браузеру быстрее отобразить страницу и обеспечить лучший пользовательский опыт.

<script src="async_but_important.js" async importance="high"></script>

В наших новостях всегда есть немного больше, чем у других. Подпишитесь на канал в Телеграм и читайте интересные новости первыми.

Подписаться 

0 0
Оставьте свой комментарий
Чтобы оставить комментарий, авторизуйтесь

Советуем почитать

Кейс агентства Art Promo

Кейс агентства Art Promo

Как мы поднимали сайт шпунтовой компании с 37 позиции в ТОП Яндекса.
Как бороться с накруткой поведенческих факторов

Как бороться с накруткой поведенческих факторов

SEO-специалист Станислав Жуковский расскажет, как обнаружить накрутку, какие могут быть последствия и что делать, если конкуренты накручивают вам ПФ.
Техническое SEO: базовые требования к сайту

Техническое SEO: базовые требования к сайту

Виктор Каргин рассказывает, что такое индексация и ранжирование, как код, хостинг и движок сайта влияют на SEO и про сервисы для технического анализа сайта.