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

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

Можно ли использовать ссылки в СМИ для продвижения коммерческих сайтов

Можно ли использовать ссылки в СМИ для продвижения коммерческих сайтов

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

SEO: что учитывать при разработке сайта

Расскажем об этапах разработки сайта и об участии в них SEO-специалиста. Как сделать сайт, который сразу оптимизирован под SEO?
Что умеет сквозная аналитика Яндекса: преимущества и недостатки

Что умеет сквозная аналитика Яндекса: преимущества и недостатки

Разбираемся, как работает инструмент, что в нём хорошего и плохого, а также безопасно ли делиться данными из CRM с Яндекс.Метрикой.
;