Ленивая загрузка (lazy loading) изображений — техника, при которой картинки подгружаются не сразу при открытии страницы, а когда пользователь доскролливает до них. Грамотно внедрённый lazy loading ускоряет отрисовку и помогает Core Web Vitals; внедрённый небрежно — прячет от поисковика контент и роняет LCP. Разбираем, где граница между пользой и вредом для SEO под Яндекс и Google и как настроить отложенную загрузку без потери индексации.
Что такое lazy loading и зачем он нужен
При обычной загрузке браузер запрашивает все изображения сразу — даже те, что далеко внизу и пользователь их, возможно, никогда не увидит. На странице с 40–60 картинками это десятки лишних HTTP-запросов и мегабайты трафика в первые секунды. Lazy loading откладывает загрузку изображений за пределами вьюпорта (below the fold) до приближения к видимой области.
Цель — снизить объём данных при первой отрисовке и ускорить интерактивность. Для поиска это косвенный, но реальный сигнал: и Яндекс (через скорость и поведенческие факторы), и Google (через Core Web Vitals) учитывают, как быстро страница становится пригодной к работе.
Плюсы и минусы для SEO
| Аспект | Плюс при верной настройке | Риск при ошибке |
|---|---|---|
| Скорость первой отрисовки | Меньше запросов и байтов в начале → быстрее First Contentful Paint | — |
| LCP (Core Web Vitals) | Ускоряется, если LCP-картинка НЕ ленивая | Падает, если ленивым сделали главное изображение экрана |
| CLS | Стабилен при заданных width/height | Скачки макета, если размеры не указаны |
| Индексация картинок | Сохраняется при нативном loading=lazy |
Картинки выпадают из индекса при JS без <noscript> |
| Трафик и хостинг | Экономия на трафике и нагрузке сервера | — |
Ключевая мысль: lazy loading полезен для SEO ровно до тех пор, пока применяется к картинкам ниже первого экрана и не мешает роботу видеть контент.
Способы внедрения
Нативный атрибут loading="lazy". Самый надёжный вариант: поддерживается всеми актуальными браузерами и корректно читается роботами. Картинка остаётся в исходном src, поэтому Яндекс и Google её индексируют.
<img src="/img/banner.webp" width="800" height="450" alt="Гранитный памятник" loading="lazy">
JS-библиотеки (LazySizes, lozad на IntersectionObserver). Дают тонкий контроль: прелоад по расстоянию, фоновые изображения, адаптивные srcset. Минус — реальный src подменяется на data-src, и без подстраховки робот видит пустоту.
CSS-фоны (background-image). Нативный атрибут их не покрывает; нужен JS или отказ от ленивости для важных картинок.
Рекомендация: начинать с нативного loading="lazy", к библиотекам переходить только при нехватке его функционала.
Главная ошибка: ленивый LCP-элемент
Largest Contentful Paint почти всегда — крупное изображение первого экрана (баннер, главное фото товара, обложка статьи). Повесьте на него loading="lazy" — браузер отложит загрузку, и LCP вырастет, иногда за пределы норматива 2,5 с. Прямой удар по Core Web Vitals.
Правило: всё, что видно без скролла, грузится обычно. LCP-картинке полезно задать fetchpriority="high", чтобы браузер забрал её в первую очередь:
<img src="/img/hero.webp" width="1200" height="600" alt="..." fetchpriority="high">
⚠️ РИСК. Массовые CMS-плагины и темы нередко вешают loading="lazy" на ВСЕ изображения подряд, включая первый экран. После установки такого плагина проверьте, что hero и логотип не стали ленивыми — иначе ухудшите ровно ту метрику, ради которой всё затевалось.
Как сохранить индексацию изображений
Нативный loading="lazy" проблем не создаёт: робот Яндекса и Googlebot видят src в исходном HTML. Проблемы начинаются с JS-реализаций, где настоящий путь спрятан в data-src, а в src — заглушка. Что делает картинки индексируемыми при JS-lazy:
- Дубль в
<noscript>— внутри тега обычный<img>с реальнымsrc; робот без выполнения JS получит ссылку на файл. - Картиночный sitemap — sitemap.xml с тегами
<image:image>помогает Google и Яндексу найти все картинки независимо от способа подгрузки. - Корректный
altу каждого значимого изображения — фактор ранжирования в поиске по картинкам.
Проверять результат нужно фактически: через инструмент проверки URL в Яндекс.Вебмастере и Google Search Console смотрите, как робот рендерит страницу и видны ли в ней изображения. О причинах, по которым роботы не видят JS-контент, — в материале про JavaScript и SEO.
Lazy loading и мобильная выдача
Поскольку и Яндекс, и Google работают по принципу mobile-first индексации, оценка скорости и Core Web Vitals идёт по мобильной версии. На смартфонах канал медленнее, а вьюпорт меньше — ниже сгиба больше картинок, и отложенная загрузка даёт здесь наибольший выигрыш. Но и риск выше: легко отложить изображение, которое на десктопе было ниже сгиба, а на мобильном попадает в первый экран. Тестируйте LCP отдельно для мобильной эмуляции.
Чек-лист корректного внедрения
| Шаг | Что проверить |
|---|---|
| 1 | Первый экран (hero, логотип) — БЕЗ loading="lazy" |
| 2 | LCP-изображению задан fetchpriority="high" |
| 3 | У всех <img> указаны width и height (защита от CLS) |
| 4 | Изображения ниже сгиба — loading="lazy" |
| 5 | При JS-lazy — дубль в <noscript> и/или image-sitemap |
| 6 | Картинки в формате WebP/AVIF, заполнен alt |
| 7 | Проверка рендера в Вебмастере и Search Console |
| 8 | Замер LCP/CLS отдельно для мобильной версии |
Мини-пример
На сайте granit-memory.ru каталог памятников содержит десятки карточек с фото гранитных изделий, и до оптимизации все они грузились при открытии категории. Решение: главное фото первого ряда оставили с обычной загрузкой и fetchpriority="high", карточки ниже сгиба получили нативный loading="lazy", всем <img> проставили width/height и осмысленные alt. В итоге браузер запрашивает при старте меньше файлов, а проверка URL в Яндекс.Вебмастере подтвердила, что все фото видны роботу — типовой паттерн для каталога: быстрый старт без потери индексации.
Лучше всего lazy loading работает в связке с оптимизацией изображений и скоростью загрузки сайта: сам по себе он не заменит сжатие и WebP/AVIF.
FAQ
Влияет ли lazy loading на ранжирование напрямую?
Нет, отдельного фактора «использует lazy loading» не существует. Влияние косвенное: через скорость, Core Web Vitals у Google и поведенческие факторы у Яндекса. Важна не технология, а итоговые метрики.
Можно ли ставить loading="lazy" на все изображения?
Нет. Всё, что видно без прокрутки (особенно LCP-элемент), грузится сразу. Ленивыми делают только картинки ниже первого экрана.
Индексирует ли Яндекс изображения с отложенной загрузкой?
При нативном loading="lazy" — да, реальный src присутствует в HTML. При JS-реализации с data-src нужны подстраховки: дубль в <noscript> или картиночный sitemap, иначе фото могут выпасть из индекса.
Как проверить, что lazy loading не сломал страницу?
Замерьте LCP и CLS в PageSpeed Insights или Lighthouse для мобильной версии, а индексацию изображений — через проверку URL в Яндекс.Вебмастере и Google Search Console.
Материал подготовлен экспертами Chrome Media: внедряем lazy loading без потери индексации и ускоряем Core Web Vitals коммерческих сайтов.
Добавить комментарий