• Новый атрибут importance

Дизайн-Студия Свой Сайт

Importance экспериментальный атрибут Google


Разработчики сайтов и те, кто профессионально занимается продвижением сайтов, знают, насколько важна скорость загрузки страниц веб-ресурса для СЕО. В погоне за быстродействием сайта мастерам приходиться, что называется, расставлять приоритеты, загружая одни компоненты, например, для отрисовки «шапки» сайта сразу, другие же отложить на потом.

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

Новый атрибут importance

Речь об атрибуте «importance», указывающем относительную важность ресурса. Новое свойство позволит верстальщикам по новому расставлять приоритеты, в частности присваивая элементам низкий или высокий приоритет при загрузке.

Отладка и тестирование, по заявлению Google продолжится до 22.03.2022. Желающие могут попробовать поработать с экспериментальным атрибутом, протестировать его в браузерах Chrome в версиях 96-99.

Принципы действия свойства в том, что верстальщики могут влиять на скорость нахождения компонентов загружаемой страницы, не только задействовав link rel="preload", контролировать загрузку и выполнение стилей страницы и скриптов при помощи привычных уже атрибутов defer и async, по и дать понять браузеру о важности того или иного элемента. Новый атрибут importance укажет браузеру, что важнее загрузить в первую очередь, а что не требует моментального исполнения.

Свойство будет доступно для применения к таким тегам, как: img, script, link и iframe.

Атрибут принимает следующие значения:

Пример приведен ниже

Новый атрибут importance

Суть работы нового свойства в следующем: загрузка изображений с предварительной загрузкой имеет низкий приоритет и будет отложена браузером.

<code>
<img src="lcp-image.jpg" importance="high">
</code>

Задействовав атрибут «importance», мы тем самым обеспечиваем более раннюю загрузку, присваивая картинке высокий приоритет.
Таким же образом происходит загрузка скриптов. Добавляя атрибуты defer или async, вебмастер присваивает им низкий приоритет и если таких элементов на странице несколько, браузер сам «решает», что отобразить в первую очередь, что отложить.

<code>
< script src="async_but_important.js" async importance="high">
</code>

В случае же применения атрибута «importance», мы даем понять браузеру, какой из этих скриптов важнее и что его следует загрузить быстрее остальных. Это позволит загрузить более качественную картинку для пользователя, при этом ускорив загрузку страницы в целом.

На нашем сайте Вы не только можете получить полезную информацию о новинках в области интернете и сайтостороения, но и заказать разработку сайта для себя или своей компании. Создание сайтов в Воронеже – основное направление деятельности с 2006 года.

Отправить сообщение