LCP (Largest Contentful Paint, время отрисовки наибольшего контентного элемента) — метрика из набора Core Web Vitals, измеряющая время от начала загрузки страницы до момента, когда в viewport пользователя полностью отрисовался наибольший видимый элемент. LCP — основная метрика воспринимаемой скорости загрузки страницы.
Что считается LCP-элементом
Браузер отслеживает последовательно появляющиеся в viewport элементы и выбирает наибольший на момент завершения загрузки страницы:
- Элементы
<img>— изображения (hero-баннер, product image). - Блоки
<video>с атрибутомposter— постер видео. - Элементы с фоновым изображением через
url()в CSS. - Блочные элементы с текстом (
<h1>,<p>,<div>) — если они являются наибольшими.
LCP не учитывает: <svg>, элементы внутри <video>, <iframe>.
Пороговые значения
| Значение LCP | Оценка | Действие |
|---|---|---|
| ≤ 2,5 с | Хорошо | Зелёный индикатор Google |
| 2,5–4,0 с | Требует улучшения | Жёлтый индикатор |
| > 4,0 с | Плохо | Красный индикатор |
Как улучшить LCP
Основные причины медленного LCP и их решения:
- Медленный TTFB — решение: кэширование, CDN, оптимизация сервера. LCP никогда не будет хорошим при высоком TTFB.
- Блокирующий рендеринг — CSS и JS в
<head>блокируют отрисовку. Решение: preload LCP-ресурса (<link rel="preload">), defer/async для JS. - Тяжёлые изображения — Hero-изображение 2 МБ вместо 100 КБ в WebP/AVIF. Решение: сжатие, современные форматы (WebP, AVIF), атрибут
loading="eager"для LCP-изображения. - Отложенная загрузка LCP-элемента — ошибка:
loading="lazy"на hero-изображение. LCP-элемент загружать нужно немедленно.
История
Google анонсировал Core Web Vitals в 2020 году — набор из трёх метрик: LCP, FID (заменён на INP в 2024) и CLS. LCP пришёл на смену метрике First Meaningful Paint, которая плохо коррелировала с воспринимаемой скоростью. В мае 2021 года Core Web Vitals стали официальным фактором ранжирования в Google Search. По данным Google, 53% мобильных пользователей покидают страницу, если загрузка превышает 3 секунды.
LCP и хостинг
Выбор хостинга напрямую влияет на LCP через TTFB. SSD-хостинг и NVMe-хостинг обеспечивают более быстрый I/O для PHP и баз данных. Геолокация сервера влияет на latency до пользователей. При использовании CDN статические ресурсы (изображения, CSS, JS) отдаются с ближайшей edge-точки — это снижает LCP на 40–70% для пользователей вне основного датацентра.
LCP и хостинг
LCP измеряется в Chrome UX Report и влияет на ранжирование Google (Core Web Vitals). Цель: LCP < 2.5 сек. Хостинг влияет на LCP через TTFB: медленный TTFB > 600 мс гарантирует плохой LCP. Оптимизация: изображения в WebP/AVIF (на 30-50% меньше PNG/JPEG), <link rel="preload"> для hero-изображения, CDN для раздачи статики. SSD-хостинг vs HDD: чтение файлов страницы в 10-50 раз быстрее. NVMe-хостинг — лучший вариант для LCP. Геолокация сервера близко к аудитории снижает задержку сети на 50-150 мс.