LCP (Largest Contentful Paint) — это метрика Core Web Vitals, которая фиксирует момент отрисовки самого крупного видимого элемента в области просмотра. Простыми словами, LCP показывает, за сколько секунд пользователь видит главный блок страницы — баннер, заголовок или фото товара. Google ввёл метрику в 2020 году и с июня 2021 включил её в факторы ранжирования Page Experience.
В марте 2024 года INP заменил FID, а LCP остался ключевым показателем скорости. Хороший порог по данным CrUX — до 2.5 секунд у 75% визитов; что значит превышение 4 секунд — потеря позиций и рост отказов на мобильных.
§ 01Как считается
Браузер фиксирует время отрисовки крупнейшего элемента: изображения, видео-постера, фонового изображения через CSS или текстового блока. Largest Contentful Paint измеряется через PerformanceObserver API и обновляется до момента первого взаимодействия пользователя. Отсчёт идёт от навигации. Google делит результаты на три зоны: до 2.5 с — хорошо, 2.5–4 с — требует улучшения, выше 4 с — плохо. В отчёт CrUX попадает 75-й перцентиль за 28 дней.
§ 02Зачем нужно
LCP отвечает за ощущение скорости — что значит для бизнеса прямой рост конверсии. По исследованию Deloitte 2023 года улучшение скорости на 0.1 с поднимает мобильную конверсию ритейла на 8.4%. Largest Contentful Paint входит в Core Web Vitals наряду с INP и CLS, влияет на органический трафик и качество рекламы в Google Ads через Quality Score. Простыми словами — медленный главный экран съедает бюджет и позиции.
LCP 4.2 → 2.1 c — Интернет-магазин мебели на Magento 2 сжал hero-баннер с 820kb до 145kb через WebP и preload, добавил fetchpriority='high'. LCP упал с 4.2 до 2.1 с за 6 недель. Замер через PSI и CrUX-75th, конверсия +14%.
LCP 3.8 → 2.3 c — B2B SaaS с MRR $180k вынес шрифты в self-host и убрал блокирующий JS на лендинге через defer. LCP снизился с 3.8 до 2.3 с за 4 недели. Динамика отслеживалась в Search Console Core Web Vitals и web-vitals.js.
§ 03Как измерить
Лабораторные данные собирает Lighthouse в Chrome DevTools и PageSpeed Insights. Полевые показатели — отчёт Core Web Vitals в Search Console и публичный CrUX Dashboard в Looker Studio. Для постоянного мониторинга подключают web-vitals.js от Google и отправляют события в GA4 или Яндекс Метрику. Отдельно WebPageTest показывает водопад загрузки и помогает увидеть, какой именно элемент стал LCP-кандидатом.
§ 04Что делать дальше
Оптимизация LCP начинается с анализа TTFB: цель — менее 600 мс. Дальше сжимают главное изображение в AVIF или WebP, добавляют атрибут fetchpriority="high" и preload для hero-картинки. Шрифты подключают через font-display: swap, критический CSS встраивают inline. Илья Гусаров рекомендует выносить сторонние скриптами Tag Manager и чаты ниже первого экрана — это стабильно снимает 0.5–1.2 секунды на мобильных.