×
Россия +7 (495) 139-20-33

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

Россия +7 (495) 139-20-33
Шрифт:
0 5073
Подпишитесь на нас в Telegram

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

С помощью атрибута можно присвоить элементу высокий или низкий приоритет при загрузке. В 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">


Источник: Журнал Топвизор

Случилось что-то важное? Поделитесь новостью с редакцией.


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
Накрутка поведенческих факторов: дорого, сложно, но можно. Если очень хочется
Oleg_bobr2012
1
комментарий
0
читателей
Полный профиль
Oleg_bobr2012 - Мда...Может Анне сразу в Яндекс написать кейсы по накрутке ПФ. Я бы такого сотрудника гнал вон.
28 способов повысить конверсию интернет-магазина
Татьяна
1
комментарий
0
читателей
Полный профиль
Татьяна - Очень действенные рекомендации представлены в статье! Всё четко расписано и легко внедряемо в работу интернет-магазинов.Удобство и наглядность+различные бонусы и скидки-именно то, что и цепляет покупателя.
5 способов увидеть сайт глазами поисковика: анализируем скрытый контент и cloaking
Гость
1
комментарий
0
читателей
Полный профиль
Гость - Сейчас клоаку прячут, так что под нее можно глянуть только с гуггловских ip. Сейчас только гуггл сервисами можно глянуть
7 актуальных сервисов для анализа сайта: сравнительная характеристика
Jenimeon
1
комментарий
0
читателей
Полный профиль
Jenimeon - SimilarWeb один из моих фаворитов, частенько им пользуюсь. Ценник не малый, но функционал хороший. Be1 тоже годный.
Создали ресурс для металлургов, который позволяет следить за аналитикой рынка и осуществлять продажи
Наталья Сталь
3
комментария
0
читателей
Полный профиль
Наталья Сталь -
Какие сайты лидировали в поиске Яндекса и Google в 2023 году
Гость
1
комментарий
0
читателей
Полный профиль
Гость - Если что по рейтингу вы не правы, есть ядро по которому производиться оценка и вы можете по нему самостоятельно все посмотреть. Единственный объективный рейтинг по SEO. Других не знаю Ну я вам скажу что это не так и в предыдущие года сайт моего клиента попадал в рейтинг, при чем несколько раз. И я прекрасно знал еще до объявления результатов кто лидер - рейтинг прозрачный, есть фразы по которым набираются баллы. В этом году наш сайт не попал в рейтинг например и это было понятно, что не попадет (по статистике позиций)
5 ошибок отдела продаж, из-за которых вы теряете клиентов
Андрей
1
комментарий
0
читателей
Полный профиль
Андрей - Крутая статья! Можно еще указать: Работу без CRM-системы - я считаю, что это основа отдела продаж. Потому что не все компании решаются на внедрение отдельно системы для отдела продаж. Но зато можно что то многофункциональное внедрить аспро.клауд или что то подобное
Простые SEO-работы, которые могут увеличить прибыль компании. Часть 1
roma.lisov
1
комментарий
0
читателей
Полный профиль
roma.lisov - Воспользовался советом по проверке и настройке картинок на сайте – реально дельный совет. Вот вроде и просто, казалось бы, а мне в голову раньше не пришло. А такие нюансы, конечно, нужно знать)
Яндекс встроил нейросети в свой Браузер
RasDva
12
комментариев
0
читателей
Полный профиль
RasDva - О дааааа)
Как мы увеличили поисковый трафик на 30% с помощью ChatGPT
Светлана Светлана
23
комментария
0
читателей
Полный профиль
Светлана Светлана - Я сама работаю в маркетинге и недавно решила еще дополнительно пройти курсы по интернет маркетингу astobr.com/services/povyshenie-kvalifikatsii/menedzhment-upravlenie/internet-marketing/ , как по мне эти знания которые я получила, очень помогают мне в работе
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
386
Комментариев
373
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
141
Комментариев
121
Комментариев
120
Комментариев
100
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
80
Комментариев
77
Комментариев
74
Комментариев
67
Комментариев
64
Комментариев
60
Комментариев
59

Отправьте отзыв!
Отправьте отзыв!