Измените языковые настройки Топвизор для работы с сервисом на родном языке. Вы также сможете выбрать и установить язык интерфейса позже в настройках Аккаунта. Измените языковые настройки Топвизор для работы с сервисом на родном языке. 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>

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

Подписаться 

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

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

Как составить договор на продвижение сайта

Как составить договор на продвижение сайта

Зачем заключать договор с клиентом, на какие пункты обратить внимание, чего точно нельзя писать в договоре. В конце статьи — вариант договора на SEO, который можно использовать.
Может ли проведение А/В-теста с переадресацией негативно сказаться на посещаемости сайта

Может ли проведение А/В-теста с переадресацией негативно сказаться на посещаемости сайта

Что такое А/В тестирование в SEO и в контекстной рекламе, может ли из-за него упасть посещаемость сайта.
Как отличить надоевшую работу от выгорания

Как отличить надоевшую работу от выгорания

Что такое выгорание и как отличить его от надоевшей работы с клиентами «из ада».