Приоритетные подсказки Google улучшают CWV

Экспериментальный HTML-атрибут Chrome может ускорить получение оценок Core Web Vitals

0

Google опубликовал статью, призывающую разработчиков и издателей использовать новый (и экспериментальный) атрибут приоритетной подсказки «важность», который может помочь улучшить Core Web Vitals и пользовательский опыт.

Команда разработчиков браузера Chrome поделилась примером, когда фоновое изображение, загруженное с помощью HTML-атрибута Priority Hint, сэкономило 1,9 секунды времени загрузки только на одном изображении.

Проблема, которую решает Priority Hints
Издатели могут ускорить обнаружение ресурсов веб-страницы с помощью <link rel=preload>, а также управлять тем, как и когда загружаются и выполняются скрипты с помощью атрибутов «async» и «defer».

Но издатели не могут послать сигнал, чтобы сообщить браузеру, какие ресурсы важны, а какие нет.

Google приводит такие примеры проблем, которые решает Priority Hints:

«Изображения героев внутри области просмотра начинаются с низким приоритетом. После завершения верстки Chrome обнаруживает, что они находятся в области просмотра, и повышает их приоритет (к сожалению, dev tools показывает только конечный приоритет — WebPageTest покажет оба).

Обычно это добавляет значительную задержку при загрузке изображения. Предоставление подсказки о приоритете в разметке позволяет изображению стартовать с высоким приоритетом и начать загрузку намного раньше.

Браузер присваивает CSS и шрифтам высокий приоритет, но все эти ресурсы могут быть не одинаково важны или необходимы для LCP. Вы можете использовать подсказки приоритета, чтобы снизить приоритет некоторых из этих ресурсов».

Подсказка ресурса атрибута важности
В HTML части, из которых состоит веб-страница, называются элементами. Это div, заголовки, теги абзацев, теги изображений, элемент ссылки и т.д.

Я уверен, что все, что называется тегом HTML, на самом деле является элементом HTML, это простой способ запомнить, что такое элемент.
Каждый элемент может быть изменен с помощью так называемого атрибута. Помните атрибут nofollow? Атрибут nofollow изменяет элемент <a>.

Атрибут importance изменяет элементы веб-страницы, давая браузеру подсказку о том, является ли элемент веб-страницы важным, неважным или просто позволяет браузеру решать.

Атрибут важности называется приоритетной подсказкой. Атрибут дает браузеру подсказку, что указанный элемент важен (или не важен) и придать ему более высокий (или более низкий) приоритет.

Значения, которые может передавать атрибут «важность», следующие:

Высокий
Низкий
Авто

Подсказка ресурса атрибута importance применима к следующим элементам:

ссылка
img
скрипт
iframe
Как подсказки ресурсов улучшают основные веб-показатели
Браузеры автоматически вычисляют уровни приоритета для загрузки ресурсов.

Существующие инструменты, такие как атрибут «preload», помогают дать ресурсные подсказки для загрузки важных ресурсов, таких как, например, шрифты и изображения.

Другими подсказками для ресурсов являются async и defer.

Все они помогают ускорить загрузку всего документа и быстрее сделать его доступным для просмотра и интерактивным.

Но браузер все равно должен решить, что из них важнее.

Согласно Web.dev, предварительно загруженное изображение будет загружено, но браузер присвоит ему низкий приоритет и отложит загрузку.

Вот объяснение:

«Возьмем изображение Largest Contentful Paint, которое, будучи предварительно загруженным, все равно получит низкий приоритет.

Если оно оттеснено другими ранними низкоприоритетными ресурсами, использование подсказок приоритета все еще может помочь в том, как скоро изображение будет загружено.»

Разблокировка (не предоставляется) с помощью Keyword Hero
Просматривайте все свои органические ключевые слова в GA и их конкретные показатели эффективности. Бесплатная пробная версия. Отмена в любое время. Профессиональная поддержка. 4-минутная настройка.

Примером того, как атрибут важности может быть полезен, является случай, когда веб-страница имеет карусель изображений в верхней части области просмотра (часть браузера, которую в данный момент видит посетитель сайта).
Если карусель содержит пять изображений, все они могут быть предварительно загружены. Но если первому из них присвоить атрибут «высокая» важность, а остальным — «низкая», веб-страница будет отображаться быстрее, поскольку браузер будет знать, что первому изображению следует отдать высокий приоритет.

Другой пример, приведенный Google, — это изображение в верхней части веб-страницы. Браузер придает этому изображению низкий приоритет и отображает его только после завершения компоновки остальной части веб-страницы.

Google объясняет:

«Предоставление подсказки о приоритете в разметке позволяет изображению стартовать с высоким приоритетом и начать загрузку намного раньше».

Обратите внимание, что предварительная загрузка по-прежнему требуется для раннего обнаружения LCP-изображений, включенных в качестве CSS-фонов, и ее можно комбинировать с подсказкой приоритета, включив в предварительную загрузку значение importance=’high’, иначе она все равно начнется с приоритетом «Низкий» по умолчанию для изображений».

То же самое происходит со скриптами, которые загружаются как async или defer, им обоим присваивается низкий приоритет.

Добавив подсказку о приоритете к важным скриптам, браузер сможет быстрее отрисовать страницу и обеспечить лучший пользовательский опыт.

Вам также могут понравиться Еще от автора

Оставьте ответ

Ваш электронный адрес не будет опубликован.