X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Добавить ответ в эту тему
> Google разработал HTML-атрибут для Chrome, который помогает улучшить Core Web Vitals
VinogradOFF
VinogradOFF
Topic Starter сообщение 29.10.2021, 1:40; Ответить: VinogradOFF
Сообщение #1


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">


источник
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Osipec
Osipec
сообщение 30.10.2021, 0:31; Ответить: Osipec
Сообщение #2


Кто-то уже делает это на своих сайтах?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Akeeloq
Akeeloq
сообщение 4.11.2021, 6:00; Ответить: Akeeloq
Сообщение #3


Aплагин для вордпрес есть?


--------------------
★★ Магазин фриланс-услуг «Всё за 500» выполнит: Разработку | Дизайн | Тексты | Аудит
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Добавить ответ в эту тему
Быстрый ответ
2 чел. читают эту тему (гостей: 2, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Кто знает, Google видит тексты в Инстаграм
хочу разместить один текст и там , и там боюсь за уникальность
8 muratastana 1465 Сегодня, 2:06
автор: NormanSky
Открытая тема (нет новых ответов) Quick Sender - Комбайн для продвижения Вконтакте
24 DimaMyrzich 17152 Вчера, 22:23
автор: DimaMyrzich
Открытая тема (нет новых ответов) GuruLeads — финансовая партнерская сеть открывает свои двери для арбитражников!
5 GuruLeads 1361 26.11.2021, 19:16
автор: GuruLeads
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыWAP.SeriousPartner.biz - во всем виноват WAP-Click! До 10р ребилл, Exclusive LP для ТОПов!
55 RomaSerious 23139 26.11.2021, 17:04
автор: RomaSerious
Горячая тема (нет новых ответов) LITE.HOST - хостинг для тех, кто любит не переплачивать
39 akkyoh 13549 26.11.2021, 2:53
автор: akkyoh


 



RSS Текстовая версия Сейчас: 28.11.2021, 16:02
Дизайн