Коротко. LCP показывает, когда на экране отрисовался самый крупный элемент первого экрана: картинка, заголовок или видео. Хорошо — до 2,5 секунды. Дальше разбирайте, какая фаза съедает время: сервер, загрузка ресурса или отрисовка.
Как читать материал. Сначала замер, потом фаза, потом правка. Нейросеть помогает разобрать отчёт и код, но замеры делаются в браузере и на реальных пользователях.
Что такое LCP
Largest Contentful Paint — момент, когда самый крупный элемент в видимой области полностью отрисован. Это не «время загрузки страницы», а ощущение: увидел ли человек главное.
Пороги:
- до 2,5 с — хорошо;
- 2,5–4 с — нужно улучшить;
- больше 4 с — плохо.
Из чего складывается LCP
- TTFB. Сервер отдал первый байт.
- Задержка ресурса. Браузер узнал о картинке, но ещё не начал её загружать.
- Загрузка. Файл качается.
- Отрисовка. Элемент появился на экране.
Если TTFB большой, проблема на сервере или в сети. Если задержка — ресурс найден поздно. Если загрузка — файл тяжёлый. Если отрисовка — мешают шрифты, CSS или JS.
Как найти
В PageSpeed Insights откройте отчёт и посмотрите элемент LCP. В Chrome DevTools → Performance запишите загрузку и найдите маркер LCP на таймлайне.
Сравните полевые и лабораторные данные: PageSpeed показывает оба. Полевые — реальные пользователи, лабораторные — синтетический тест.
npx lighthouse https://site.ru --only-categories=performance --viewКоманда собирает отчёт локально, без отправки страницы в PageSpeed. Флаг –view открывает его в браузере.
Классический путь. Найдите элемент LCP и определите фазу по таймлайну.
С нейросетью. Отдайте вывод Lighthouse и список ресурсов, попросите найти узкое место.
Вот JSON Lighthouse и список самых тяжёлых ресурсов. Назови элемент LCP,
фазу, которая занимает больше времени, и три правки по приоритету.
Не предлагай удалять контент первого экрана.Проверка. Повторите замер после каждой правки. Один прогон не показателен.
Что исправлять
| Фаза | Действие |
|---|---|
| TTFB | кэш, CDN, оптимизация запросов, быстрый хостинг |
| Задержка | preload героя, не lazy-load первого экрана |
| Загрузка | сжатие, WebP/AVIF, правильные размеры, srcset |
| Отрисовка | font-display, критический CSS, меньше блокирующего JS |
Отдельно проверьте, не грузится ли герой через JavaScript. Если картинка появляется только после исполнения скрипта, LCP ухудшается.
Влияет ли это на SEO
Core Web Vitals — фактор ранжирования, но не главный. Плохой LCP редко топит хорошую страницу в одиночку. Он сильнее влияет на поведение: люди уходят, не дождавшись.
Для SEO важнее убрать худшую метрику, чем гнаться за всеми сразу.
Где помогает нейросеть
| Задача | Что делает модель | Что проверять руками |
|---|---|---|
| Разбор отчёта | объясняет метрики | цифры и элемент |
| Поиск ресурсов | находит тяжёлые файлы | реальный вес |
| Правки вёрстки | предлагает разметку | результат в браузере |
| План работ | расставляет приоритет | влияние на дизайн |
Частые ошибки
- Ставить lazy-load на первый экран.
- Сжимать всё, кроме героя.
- Ориентироваться только на лабораторный тест.
- Менять десять вещей сразу.
- Игнорировать мобильные устройства.
- Гнаться за 100 баллами вместо реального LCP.
Вопросы
Какой LCP считается хорошим?
До 2,5 секунды на мобильных и десктопе.
LCP и время загрузки — одно и то же?
Нет. Страница может загрузиться быстро, но главный элемент появиться поздно.
Почему в PageSpeed и DevTools разные цифры?
Разные условия и устройства. Полевые данные показывают реальных пользователей, лабораторные — тест.
Может ли нейросеть ускорить сайт?
Она предлагает правки, но эффект подтверждается замером.
Связанные материалы
Источники
Официальные документы 4
- web.dev: LCPweb.dev
- Google: page experiencedevelopers.google.com
- web.dev: оптимизация LCPweb.dev
- MDN: lazy loadingdeveloper.mozilla.org