Почему падает LCP и как его поднять: пошаговое руководство

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

Google считает «хорошим» LCP значение до 2,5 секунд, всё, что выше, снижает рейтинг сайта и влияет на позиции в поиске. Но многие владельцы сайтов сталкиваются с ситуацией: вроде оптимизация сделана, а LCP продолжает падать.

Разберёмся, почему ухудшается LCP и что делать, чтобы вернуть зелёные показатели.

Почему падает LCP: главные причины

1. Тяжёлые изображения

• Hero-картинка загружается в формате JPG/PNG без сжатия.
• Нет адаптивных размеров (srcset).
• Используется слишком большой файл (например, 3000px на мобильном).

👉 В итоге браузеру нужно время, чтобы скачать и отрисовать элемент.

2. Отсутствие preload для LCP-изображения

Браузер начинает грузить важную картинку только после CSS/JS, хотя именно она определяет метрику.

3. Медленный сервер или TTFB

Даже оптимизированная картинка не спасёт, если сайт отвечает дольше 500–800 мс. LCP напрямую зависит от скорости первого байта (TTFB).

4. Блокирующие CSS и JS

• Подключение десятков скриптов в.
• Большие CSS-бандлы, которые загружаются до рендера.

👉 Страница визуально «зависает», и LCP задерживается.

5. Внешние шрифты без оптимизации

Google Fonts или другие CDN-шрифты без font-display: swap и preload могут тормозить отрисовку заголовка, если именно он — LCP-элемент.

6. Динамические блоки и реклама

Если LCP-элемент «подгружается» позже через JS (баннер, видео, реклама), это сильно бьёт по показателю.

7. CLS и сдвиги верстки

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

Как поднять LCP: пошаговое решение

Шаг 1. Определите LCP-элемент

Используйте:

• PageSpeed Insights → вкладка «Диагностика»,
• Lighthouse в Chrome DevTools → раздел Performance.

Посмотрите, какой элемент выбран LCP (чаще всего это <img> или <h1>).

Шаг 2. Оптимизируйте изображения

• Переведите их в WebP или AVIF.
• Сделайте адаптивную загрузку:

<img src="hero.webp"
srcset="hero-768.webp 768w, hero-1280.webp 1280w"
sizes="100vw"
alt="Главный баннер">

• Используйте сжатие без потери качества (TinyPNG, Squoosh, ShortPixel).

Шаг 3. Добавьте Preload для LCP-элемента

<link rel="preload" as="image" fetchpriority="high" href="/images/hero.webp">

Это подскажет браузеру загрузить картинку в первую очередь.

Шаг 4. Ускорьте серверный отклик (TTFB)

• Перейдите на быстрый хостинг с LiteSpeed/Nginx.
• Включите кэширование страниц (WP Rocket, LiteSpeed Cache).
• Используйте CDN (Cloudflare, BunnyCDN).

Шаг 5. Уберите блокирующий CSS и JS

• Вынесите critical CSS inline.
• Остальной CSS грузите асинхронно.
• JS, не влияющий на первый экран, — через defer или delay.

Шаг 6. Оптимизируйте шрифты

• Самохостинг .woff2.
• font-display: swap;.
• Preload основных гарнитур:

<link rel="preload" as="font" href="/fonts/inter-regular.woff2" type="font/woff2" crossorigin>

Шаг 7. Зафиксируйте размеры блоков

Чтобы избежать CLS:

<img src="/hero.webp" width="1280" height="720" alt="Hero баннер">

Это резервирует место и исключает «прыжки».

Шаг 8. Минимизируйте динамические вставки

• Рекламные блоки, виджеты и видео загружайте после LCP или по клику.
• Используйте заглушки с фиксированным размером.

Быстрый чек-лист для LCP < 2,5 сек

• Hero-изображение в WebP/AVIF, ≤ 150 КБ.
• preload для LCP-элемента.
• Сервер/хостинг → TTFB ≤ 800 мс.
• Inline critical CSS, остальное deferred.
• Шрифты локально, preload + swap.
• Фиксированные размеры для медиа.
• Lazy-load для всего ниже первого экрана.

Итог

LCP падает, если главный элемент страницы грузится слишком долго из-за тяжёлых картинок, блокирующих ресурсов или медленного сервера. Чтобы поднять метрику:

• оптимизируйте изображения,
• используйте preload,
• разгрузите CSS/JS,
• ускорьте сервер,
• контролируйте шрифты и CLS.

Это не магия: при последовательной оптимизации 90+ в PageSpeed Insights становится достижимым даже на WordPress и e-commerce проектах.