Сегодня хочу разобрать одну важную тему для 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 просто не индексирует картинку.
Как проверить свои страницы
Чтобы убедиться, что изображения индексируются правильно:
- Используйте инструмент URL Inspection в Google Search Console.
- Проверьте итоговый HTML, который видит поисковик, а не только скриншот.
- Убедитесь, что все изображения в зоне первого экрана прописаны в атрибуте
srcилиsrcset.
Влияние на позиции
По словам Сплитта, влияние LCP на ранжирование минимальное, но оно есть. Core Web Vitals — это лишь один из множества факторов, однако игнорировать его не стоит.
Что делать дальше
- Hero-изображения и все элементы над сгибом страницы оставляйте без ленивой загрузки и обязательно указывайте размеры.
- Для изображений и iframe ниже первого экрана используйте нативный
loading="lazy". - Если используете сторонние библиотеки, убедитесь, что итоговый HTML содержит стандартные атрибуты
srcиsrcset. - Регулярно проверяйте в Search Console рендеринг HTML и следите за метрикой LCP.
Вывод
Ленивая загрузка — полезный инструмент, но применять её нужно избирательно. Если слепо включить её для всех изображений, можно только ухудшить показатели. Оставляйте главные элементы без ленивой загрузки, используйте нативные возможности браузера и всегда проверяйте итоговый HTML.
Комментарии