Lazy-loading — это техника, при которой браузер откладывает загрузку картинок, видео и iframe до того момента, когда они становятся нужны. На длинных страницах это экономит мегабайты трафика и ускоряет первую отрисовку. Но если применить её к главному изображению экрана, метрика LCP не улучшится, а наоборот ухудшится.
01Что такое lazy-loading и какую задачу он решает
Любой сайт грузит в браузер десятки ресурсов: HTML, CSS, JS, шрифты, картинки, скрипты аналитики. Чем больше ресурсов в первом запросе, тем дольше пользователь видит белый экран. Lazy-loading позволяет отложить загрузку всего, что не нужно прямо сейчас — например, картинок в подвале или в карусели на пятом экране.
В современных браузерах для этого достаточно атрибута loading=”lazy” у тегов <img> и <iframe>. Никаких внешних скриптов и хитрых обсёрверов не нужно — браузер сам решит, когда загружать. Это нативный механизм, поддерживаемый всеми актуальными браузерами.
Главное правило: lazy-loading нужен везде, где элемент находится ниже первого экрана. И только там.
02Почему ленивая загрузка может ухудшить LCP
LCP (Largest Contentful Paint) — метрика, показывающая, как быстро на экране появляется самый крупный видимый элемент. Чаще всего это баннер на главной, фото товара в карточке или иллюстрация в шапке статьи. Если поставить такому изображению loading="lazy", браузер отложит его загрузку и начнёт качать только после того, как обработает остальной HTML и CSS. В итоге картинка появится с задержкой, а LCP вырастет.
В материале про LCP на практике мы разбираем, какие правки дают самый быстрый эффект. Lazy-loading главного изображения — одна из частых ошибок, особенно после установки плагинов оптимизации, которые включают «ленивую» загрузку оптом для всех картинок без исключений.
Lazy-loading главного экрана почти всегда вредит. Этот блок должен грузиться приоритетно, а не откладываться.
03Что откладывать, а что грузить сразу
Простое правило: разделите страницу мысленно на «над линией сгиба» (то, что видно без скролла) и «под линией сгиба» (всё остальное). Логика по умолчанию выглядит так:
- Главный визуал и логотип в шапке — без lazy, грузим как можно раньше.
- Изображения в карусели и слайдере на первом экране — первый слайд без lazy, остальные можно с lazy.
- Картинки в статьях, карточках товаров, портфолио ниже первого экрана —
loading="lazy"обязательно. - iframe с картами, видео YouTube, виджетами соцсетей — почти всегда lazy, они тяжёлые.
- Декоративные фоны (background-image) — атрибут не поддерживается, нужно лениво грузить через CSS-классы или Intersection Observer.
Для приоритетных картинок используйте обратный механизм — атрибут fetchpriority=”high”. Он подсказывает браузеру, что этот ресурс важнее остальных и его нужно качать раньше CSS-картинок и шрифтов.
04Технические нюансы: атрибуты, размеры, fallback
Всегда указывайте width и height
У каждого тега <img> должны быть заданы реальные размеры — либо атрибутами, либо через CSS aspect-ratio. Иначе при отложенной загрузке макет «прыгает», и страдает метрика CLS. Этот момент мы подробно разбирали в статье об ускорении сайта.
Сочетайте с современными форматами
Lazy-loading даёт прибавку в скорости, но не отменяет необходимости конвертировать изображения в WebP или AVIF. Связка «лёгкий формат + lazy ниже сгиба + приоритет для главного» даёт лучший результат.
Помните про SEO
Поисковые роботы Яндекса и Google умеют исполнять JavaScript, но картинки, подгруженные сложными скриптами и плейсхолдерами, могут не попасть в индекс изображений. Нативный loading="lazy" в этом смысле безопаснее самописных решений.
05Lazy-loading на WordPress и других CMS
На WordPress, начиная с версии 5.5, атрибут loading="lazy" добавляется к картинкам автоматически. Это решение по умолчанию неплохое, но есть тонкость: ядро WP пропускает атрибут у первой картинки в контенте — именно для защиты LCP. Если вы поставили плагин оптимизации, который перебивает это поведение и навешивает lazy на всё подряд, метрики рухнут.
Что проверить:
- В исходном коде первой картинки на странице не должно быть
loading="lazy". - В плагине кэширования отключите «lazy для всех изображений без исключений» или добавьте селектор главного баннера в исключения.
- Для главного изображения вручную проставьте
fetchpriority="high"— это работает и в шаблонах, и в Elementor через дополнительные классы.
06Как проверить, что lazy-loading настроен правильно
После любых правок прогоните страницу через PageSpeed Insights и Lighthouse. В разделе «Возможности» отдельно отображается подсказка «Изображение, отвечающее за LCP, было загружено с задержкой» — это прямой сигнал, что lazy стоит там, где не должен. Дополнительно посмотрите вкладку Network в DevTools: главные ресурсы экрана должны появляться в первых строках.
В Яндекс.Метрике отслеживайте показатель «Время до отображения контента» в отчётах по скорости — после правильной настройки он, как правило, заметно снижается на мобильных устройствах.
Скорость как часть подписки
В подписке мы настраиваем lazy-loading вместе с приоритетами LCP, размерами и форматами картинок — без отдельного счёта. Каждый месяц проверяем Core Web Vitals и точечно правим то, что роняет метрики.
Официальная документация по теме — Справка Яндекс.Вебмастера.