Новый атрибут тега img для ускорения загрузки сайта

Скорость загрузки сайта влияет на показатель конверсии и результаты ранжирования в поисковой выдаче.

Вскоре обновленный движок Google будет поддерживать атрибут для тегов img и iframe, позволяющий повысить скорость загрузки.

Что это за атрибут? И как внедрить новую возможность на своем сайте уже сейчас?

Разберемся с вопросами далее.

Какой новый атрибут стал поддерживать Google?

Google обновил систему сканирования страниц сайтов.

Теперь движок сканирования сайтов будет обновляться примерно синхронно с обновлением движка браузера Google Chrome.

Рекомендованный материал в блоге MegaIndex по теме обновления краулера Google по ссылке далее — Google обновил поисковый краулер. Что изменилось? Как это повлияет на ранжирование?

Движок рендеринга входит в систему сканирования сайтов.

Процесс рендеринга выполняется до этапа ранжирования.

Теперь в системе рендеринга поддерживается атрибут loading.

Точнее будет поддерживаться, но в будущей версии движка. Google заявляет, что поддержка будет реализована в одном из следующих обновлений.

Теперь поисковые оптимизаторы имеют возможность использовать на сайтах новый атрибут loading для ускорения загрузки страниц. Главное в следующем — изображение, к которым применяется атрибут loading, подлежат индексации поисковой системой.

Ранее для реализации ленивой загрузки на практике требовалось использовать сторонние решения.

Минусы таких решений в следующем:

Увеличивается размер сайта из-за использования дополнительных скриптов;

Возрастает сложность поддержки;

Не поддерживается индексация поисковой системой.

Атрибут loading решает все приведенные выше проблемы. Применяя атрибут loading можно загружать данные по требованию, используя возможности движка браузера. В результате сайт будет открываться быстрее, а Googlebot проиндексирует такие изображения.

Ленивая загрузка для тегов img и iframe

Как использовать атрибут loading на сайте?

Атрибут loading можно применять к двум тегам:

img — тег для встраивания изображений на страницы сайта;

iframe — тег для встраивания медиа элементов.

Пример реализации тега для img:

<img align="center" src="/celebration.jpg" loading="lazy" alt="image" />

Пример реализации тега для iframe:

<iframe src="/video-player.html" loading="lazy"></iframe>

Атрибут loading может принимать одно из трех значений. Значения следующие:

lazy;

eager;

auto.

Значение lazy указывает на то, что элемент должен быть загружен по требованию.

Значение eager указывает на то, что элемент должен быть загружен немедленно.

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

Если атрибут loading не задан, по умолчанию будет выполняться сценарий со значением auto.

Итак, примеры имплементация на практике. Выполнять ленивую загрузку:

<img align="center" src="/megaindex.jpg" loading="lazy" alt="megaindex"/>

Для ряда изображений наоборот, загрузку требуется выполнить сразу. Не выполнять ленивую загрузку, загрузить изображение при загрузке страницы:

<img align="center" src="/megaindex.jpg" loading="eager" alt="megaindex"/>

Передать решение о порядке загрузки на сторону браузера

<img align="center" src="/image.jpg" loading="auto" alt="image"/>

Аналогичные значения применимы к тегу iframe. Например, тег iframe можно использовать для ленивой загрузки видео с YouTube.

<iframe src="/video-player.html" loading="lazy"></iframe>

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

Как выполнить проверку поддержки? Проверка поддержки loading выглядит так:

<script>

if ('loading' in HTMLImageElement.prototype) {

    // Поддерживается

} else {

   // Применить полифилл или JavaScript

}

</script>

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

Применяя к картинкам и iframe атрибут loading=lazy можно ускорить сократить передаваемый объем трафика и, как результат, ускорить загрузку страниц сайта.

Lazy Load с применением атрибута Lazy=Loading