Lazy load: отложенная загрузка изображений без вреда для индексации

Lazy load — отложенная загрузка ресурсов. Картинки, видео и встроенные фреймы, которые находятся ниже первого экрана, загружаются не сразу, а когда посетитель прокручивает страницу до них. В результате первый экран открывается быстрее, а посетитель не скачивает картинки, до которых не долистает.

Встроенная отложенная загрузка

Современные браузеры поддерживают атрибут loading со значением lazy для тегов img и iframe. Это самый простой и надёжный способ: не нужны скрипты, браузер сам решает, когда начать загрузку, с запасом до момента, когда элемент появится на экране.

Раньше отложенную загрузку делали скриптами, которые подменяли адрес картинки. Такие решения ещё встречаются в старых темах и плагинах и часто становятся источником проблем.

Где lazy load вредит

Главное изображение первого экрана

Если отложить загрузку картинки, которая видна сразу, браузер начнёт её загружать позже, чем мог бы. LCP ухудшается. Правило простое: всё, что видно на первом экране, загружается обычно, без lazy, а главное изображение — ещё и с повышенным приоритетом.

Логотип и иконки в шапке

Мелкие элементы шапки тоже на первом экране. Отложенная загрузка для них бессмысленна.

Слайдеры

Первый слайд виден сразу и не должен откладываться. Остальные — можно.

Как поисковик видит отложенные картинки

Google рендерит страницы и умеет работать со встроенной отложенной загрузкой. Но он не прокручивает страницу так, как человек, и не нажимает кнопки. Поэтому рекомендации Google сводятся к нескольким правилам:

• используйте встроенный атрибут loading или реализацию, которая срабатывает при попадании элемента в область видимости
• не привязывайте загрузку к событиям прокрутки или действиям пользователя
• реальный адрес картинки должен быть в атрибуте src или srcset, а не только в нестандартном атрибуте скрипта
• для важного контента, который подгружается, предусмотрите ссылки или карту сайта

Скриптовые решения: что проверить

Если тема использует скрипт отложенной загрузки:

1. Откройте исходный код страницы и посмотрите на тег картинки: что стоит в src — реальный адрес или заглушка
2. Проверьте страницу инструментом проверки URL в Search Console и посмотрите отрисованный HTML
3. Убедитесь, что картинки видны на скриншоте, который сделал робот
4. Если вместо картинок заглушки, замените скрипт на встроенный механизм браузера

Отложенная загрузка не только картинок

• Видео с YouTube: вместо тяжёлого встроенного плеера показывайте обложку, а плеер загружайте по нажатию
• Карты: загружать при прокрутке до блока контактов
• Виджеты отзывов и чатов: после основной загрузки страницы
• Фоновые изображения в CSS: требуют отдельной реализации, встроенный атрибут на них не действует

Размеры обязательны

Отложенные картинки должны иметь ширину и высоту в разметке. Иначе при их появлении страница будет «прыгать», и вырастет CLS. Атрибуты размеров и пропорции — обязательная пара для lazy load.

Частые ошибки

• Отложена загрузка всех картинок подряд, включая первый экран
• Скрипт отложенной загрузки и встроенный атрибут работают одновременно
• Картинки товаров в каталоге видны поисковику только как заглушки
• У отложенных картинок нет alt — они не участвуют в поиске по изображениям
• Слишком длинная страница с сотнями картинок, которые грузятся при быстрой прокрутке рывками

Короткая схема

• Первый экран: без lazy, главная картинка с высоким приоритетом
• Ниже первого экрана: встроенный lazy с указанными размерами
• Тяжёлые встраиваемые элементы: загрузка по прокрутке или по нажатию
• Проверка: отрисованный HTML в Search Console и метрики LCP и CLS после изменений