Новый атрибут тега 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