Сегодня хочу разобрать одну важную тему для SEO – как ленивые загрузки изображений могут повлиять на Largest Contentful Paint (LCP) и почему стоит быть осторожным с этой техникой.

Почему ленивые загрузки могут замедлить LCP

В подкасте Google Search Off the Record Мартин Сплитт рассказал, что автоматическое применение ленивой загрузки ко всем изображениям может серьёзно замедлить сайт. Особенно если это касается ключевых элементов над сгибом страницы – так называемых hero-изображений.

По его словам, если браузер видит атрибут loading="lazy" у главного изображения, он перестаёт загружать его с высоким приоритетом. В итоге сначала подгружаются скрипты и стили, а картинка, которую пользователь видит первой, отрисовывается с задержкой. Это не только ухудшает LCP, но и может вызвать сдвиги верстки, если не заданы размеры.

Как именно работает задержка

• LCP фиксирует момент, когда в зоне первого экрана появляется самый крупный текстовый или графический элемент.
• Без ленивой загрузки браузер находит hero-изображение сразу и загружает его с высоким приоритетом.
• С ленивой загрузкой браузер откладывает запрос и даёт приоритет другим ресурсам.
• На медленных сетях или слабых устройствах это особенно заметно и создаёт неприятное впечатление для посетителей.

Риски SEO при использовании библиотек

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

Однако старые или кастомные библиотеки могут прятать ссылки на изображения в нестандартные атрибуты вроде data-src. Если в итоговом HTML атрибут src остаётся пустым, Google просто не индексирует картинку.

Как проверить свои страницы

Чтобы убедиться, что изображения индексируются правильно:

1. Используйте инструмент URL Inspection в Google Search Console.
2. Проверьте итоговый HTML, который видит поисковик, а не только скриншот.
3. Убедитесь, что все изображения в зоне первого экрана прописаны в атрибуте src или srcset.

Влияние на позиции

По словам Сплитта, влияние LCP на ранжирование минимальное, но оно есть. Core Web Vitals – это лишь один из множества факторов, однако игнорировать его не стоит.

Что делать дальше

• Hero-изображения и все элементы над сгибом страницы оставляйте без ленивой загрузки и обязательно указывайте размеры.
• Для изображений и iframe ниже первого экрана используйте нативный loading="lazy".
• Если используете сторонние библиотеки, убедитесь, что итоговый HTML содержит стандартные атрибуты src и srcset.
• Регулярно проверяйте в Search Console рендеринг HTML и следите за метрикой LCP.

Вывод

Ленивая загрузка – полезный инструмент, но применять её нужно избирательно. Если слепо включить её для всех изображений, можно только ухудшить показатели. Оставляйте главные элементы без ленивой загрузки, используйте нативные возможности браузера и всегда проверяйте итоговый HTML.