Importance экспериментальный атрибут Google
Разработчики сайтов и те, кто профессионально занимается продвижением сайтов, знают, насколько важна скорость загрузки страниц веб-ресурса для СЕО. В погоне за быстродействием сайта мастерам приходиться, что называется, расставлять приоритеты, загружая одни компоненты, например, для отрисовки «шапки» сайта сразу, другие же отложить на потом.
В помощь разработчикам специалисты Google тестируют новый HTML-атрибут или свойство пока только для браузера Chrome, позволяющее повысить показатели Core Web Vitals (индекс скорости загрузки сайта, в основу которого заложен пользовательский опыт).
Речь об атрибуте «importance», указывающем относительную важность ресурса. Новое свойство позволит верстальщикам по новому расставлять приоритеты, в частности присваивая элементам низкий или высокий приоритет при загрузке.
Отладка и тестирование, по заявлению Google продолжится до 22.03.2022. Желающие могут попробовать поработать с экспериментальным атрибутом, протестировать его в браузерах Chrome в версиях 96-99.
Принципы действия свойства в том, что верстальщики могут влиять на скорость нахождения компонентов загружаемой страницы, не только задействовав link rel="preload", контролировать загрузку и выполнение стилей страницы и скриптов при помощи привычных уже атрибутов defer и async, по и дать понять браузеру о важности того или иного элемента. Новый атрибут importance укажет браузеру, что важнее загрузить в первую очередь, а что не требует моментального исполнения.
Свойство будет доступно для применения к таким тегам, как: img, script, link и iframe.
Атрибут принимает следующие значения:
- Auto – то есть, значение по умолчанию, где браузер сам определит важность элемента.
- Low – низкий приоритет.
- High – высокий приоритет.
Пример приведен ниже
Суть работы нового свойства в следующем: загрузка изображений с предварительной загрузкой имеет низкий приоритет и будет отложена браузером.
<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 года.