Lazy loading изображений: настройка и проверка для SEO

Откройте страницу в инструментах разработчика и посмотрите запросы, размеры ресурсов и элемент LCP. Им может быть не только изображение, но и текстовый блок. Проверьте мобильный и широкий экран: расположение элементов меняется.

Не добавляйте отложенную загрузку ко всем картинкам по названию класса или папки. Сначала определите, какие нужны сразу, а какие можно запросить позже. Lazy loading не заменяет сжатие и адаптивные размеры.

Учебный пример для изображения ниже видимой области:

<img src="/images/process.webp"
     width="800" height="450"
     alt="Этап настройки формы"
     loading="lazy">

Адрес остаётся в src, а браузер решает, когда запрашивать файл. Изображение может начать загружаться ещё до появления на экране: это нормально. width и height помогают зарезервировать место при соответствующей адаптивной вёрстке. Поддержку и поведение проверяйте в целевых браузерах.

Для важного изображения первого экрана не ставьте loading="lazy" автоматически. Если измерения показывают, что оно является критичным LCP-ресурсом, можно рассмотреть fetchpriority="high":

<img src="/images/hero.webp"
     width="1200" height="600"
     alt="Панель управления заявками"
     fetchpriority="high">

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

Если библиотека хранит реальный адрес только в data-src, проверьте, появляется ли обычный img с правильным src после рендера. По рекомендациям Google загрузка не должна требовать действий, которые робот не выполняет, например клика или прокрутки.

noscript полезен как резерв для посетителя без JavaScript, но не является универсальным обязательным условием индексирования. Image sitemap может помочь обнаружить изображения, однако не исправляет пустую или неработающую страницу. Важные изображения лучше представлять стандартными элементами, а не только CSS-фоном.

Проверка рендера не гарантирует включение каждой картинки в поиск. Обнаружение, обход и индексирование — разные этапы.

В условной категории есть несколько рядов товаров. Изображения первого видимого ряда загружаются обычно, следующие получают нативный lazy loading. Для всех подготовлены подходящие размеры и зарезервировано место.

После этого сравнивают первоначальные запросы и видимую загрузку, прокручивают каталог на разных устройствах и проверяют доступность карточек. Только измерение покажет эффект; нельзя заранее объявить улучшение LCP или сохранение поискового трафика.

Сначала исправьте слишком большие исходники и неверный sizes, затем оцените отложенную загрузку. Подробнее — оптимизация изображений и скорость сайта. Сохраните контрольный пример до изменения, чтобы сравнение было воспроизводимым.