Lazy loading вредит LCP: как исправить

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

Что такое lazy loading и LCP

Lazy loading — это отложенная загрузка ресурсов. Изображения загружаются только тогда, когда они появляются в области просмотра. Это экономит трафик и ускоряет начальную загрузку.

LCP (Largest Contentful Paint) — это метрика Core Web Vitals, которая измеряет время загрузки самого крупного элемента на странице. Обычно это изображение, видео или крупный блок текста.

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

Почему lazy loading вредит LCP

Если главное изображение загружается с lazy loading, браузер не начинает загрузку, пока изображение не появится в области просмотра. Это задерживает LCP.

Что происходит:

— браузер не загружает изображение сразу;

— LCP ждёт, пока изображение загрузится;

— пользователь видит пустое место или placeholder;

— LCP растёт.

Особенно это заметно на мобильных, где сеть медленнее, а экран меньше.

Причина 1: lazy loading на главном изображении

Самая частая причина. Главное изображение первого экрана имеет loading="lazy", что задерживает его загрузку.

Что проверить:

— есть ли loading="lazy" на главном изображении;

— какое изображение является LCP;

— загружается ли оно сразу.

Для проверки используйте проверка ленивой загрузки изображений — инструмент покажет, какие изображения используют lazy loading.

Причина 2: lazy loading на всех изображениях

Если lazy loading включён для всех изображений, включая те, что на первом экране, LCP страдает.

Что проверить:

— какие изображения на первом экране;

— какие из них используют lazy loading;

— можно ли исключить главное изображение.

Причина 3: отсутствие preload для главного изображения

Даже если lazy loading не используется, главное изображение может загружаться поздно, если браузер не знает, что оно важно.

Что проверить:

— есть ли preload для главного изображения;

— указан ли fetchpriority="high";

— загружается ли изображение в приоритете.

Причина 4: главное изображение задано через CSS

Если главное изображение задано через CSS background-image, браузер может загружать его позже, чем img.

Что проверить:

— как задано главное изображение;

— можно ли заменить на img;

— можно ли добавить preload.

Причина 5: изображение слишком большое

Даже если lazy loading не используется, большое изображение загружается долго и увеличивает LCP.

Что проверить:

— размер изображения;

— формат;

— используется ли srcset;

— можно ли сжать изображение.

Как найти проблему

Пошаговая диагностика:

— откройте PageSpeed Insights;

— посмотрите, какой элемент является LCP;

— проверьте, используется ли lazy loading на этом элементе;

— проверьте, есть ли preload;

— проверьте размер изображения;

— проверьте, как задано изображение.

Как исправить

План действий:

— убрать lazy loading с главного изображения;

— добавить preload для главного изображения;

— использовать fetchpriority="high";

— сжать изображение;

— использовать srcset;

— проверить результат.

Как проверить результат

Чек-лист:

— главное изображение загружается сразу;

— lazy loading не используется на LCP-элементе;

— preload указан;

— изображение сжато;

— LCP улучшился;

— нет регрессии на других метриках.

Если нужно проверить сразу несколько параметров — LCP, изображения, запросы — логично перейти к SEO-аудиту.

Частые ошибки

— lazy loading на главном изображении;

— lazy loading на всех изображениях;

— отсутствие preload;

— изображение через CSS;

— слишком большое изображение;

— отсутствие проверки после изменений.

FAQ

Почему lazy loading вредит LCP?

Он задерживает загрузку главного изображения. LCP ждёт, пока изображение загрузится, и метрика растёт.

Можно ли использовать lazy loading для всех изображений?

Нет. Главное изображение первого экрана не должно использовать lazy loading. Остальные можно.

Что такое fetchpriority="high"?

Это атрибут, который сообщает браузеру, что изображение важно и должно загружаться в приоритете.

Нужен ли preload для главного изображения?

Да. Preload сообщает браузеру, что изображение нужно загрузить как можно раньше.

Влияет ли lazy loading на SEO?

Косвенно. Он влияет на LCP, а LCP — часть Core Web Vitals, которые являются фактором ранжирования.

Что делать, если изображение задано через CSS?

Заменить на img или добавить preload. CSS background-image загружается позже, чем img.

Как найти LCP-элемент?

Используйте PageSpeed Insights или Lighthouse. Они покажут, какой элемент является LCP.

Может ли lazy loading быть полезен?

Да, для изображений ниже первого экрана. Он экономит трафик и ускоряет начальную загрузку.

Что делать, если LCP не улучшается после исправлений?

Проверьте TTFB, размер изображения, формат, сервер. LCP зависит от многих факторов.

Как проверить, что lazy loading не используется на LCP?

Используйте инструмент проверки ленивой загрузки. Он покажет, какие изображения используют lazy loading.