Wiki · Техническая оптимизация
LCP (Largest Contentful Paint)
LCP (Largest Contentful Paint) – это показатель Core Web Vitals, который измеряет время от начала загрузки страницы до момента, когда на экране отрисовался самый крупный элемент: картинка, видео или блок текста. Хорошим считается результат до 2,5 секунды.
Откройте карточку товара на телефоне. Шапка и меню появились мгновенно, а большое фото товара догружается ещё три секунды. Формально страница уже что-то показывает, но человек ждёт именно фото. LCP ловит момент, когда главное содержимое первого экрана стало видно.
Какой элемент становится LCP
Браузер выбирает самый крупный по видимой площади элемент на первом экране среди таких:
- картинки, в том числе внутри SVG;
- постер или первый кадр видео;
- блоки с фоном, загруженным через url() в CSS;
- блочные элементы с текстом: заголовок, абзац.
Невидимые элементы, фон на весь экран и размытые заглушки браузер пропускает. Пока страница грузится, кандидат может меняться: сначала крупнейшим был заголовок, потом догрузился баннер. Как только человек нажал, прокрутил или ввёл текст, поиск нового кандидата останавливается.
На телефоне и компьютере LCP часто разный. На компьютере это баннер слайдера, на телефоне, где баннер скрыт, заголовок H1 или фото первого товара.
| Оценка | LCP |
|---|---|
| Хорошо | до 2,5 с |
| Требует улучшения | от 2,5 до 4 с |
| Плохо | больше 4 с |
Google оценивает 75-й перцентиль реальных посетителей, отдельно для мобильных и компьютеров.
Четыре части времени LCP
Если LCP-элемент картинка, время делится на четыре части:
- Время до первого байта (TTFB): сервер собирает и начинает отдавать HTML.
- Задержка загрузки: от первого байта до момента, когда браузер начал качать картинку.
- Загрузка картинки.
- Задержка отрисовки: картинка уже скачана, но ещё не показана, потому что браузер ждёт CSS или скрипты.
Ориентир от Google: основное время должно уходить на получение HTML и самой картинки, примерно по 40%, а две задержки должны занимать меньше 10% каждая.
Карточка товара с LCP 4,6 с: где теряется время
Возьмём условную карточку товара в интернет-магазине с мобильным LCP 4,6 с. PageSpeed Insights показал элемент LCP и разбивку:
| Часть | Время | Причина |
|---|---|---|
| TTFB | 1,1 с | Страница собирается без кэша |
| Задержка загрузки | 1,9 с | Фото подставляет скрипт галереи, да ещё с ленивой загрузкой |
| Загрузка | 1,2 с | Исходник 1,8 МБ вместо уменьшенной копии |
| Задержка отрисовки | 0,4 с | Блокирующие стили |
Главная потеря здесь не в весе картинки, а в задержке загрузки: браузер узнал о фото слишком поздно. Первое фото выводят обычным тегом img прямо в HTML, убирают у него ленивую загрузку и ставят высокий приоритет. Потом включают кэш и отдают уменьшенную копию в WebP. Каждую правку проверяют отдельным замером, чтобы понимать, какая из них дала эффект и не сломала ли что-то другое.
Где найти LCP-элемент
- PageSpeed Insights: в диагностике есть пункт с элементом LCP и разбивкой времени по частям.
- Chrome DevTools, вкладка Performance: на шкале отмечен момент LCP, при наведении подсвечивается сам элемент.
- Google Search Console: группы страниц с плохим LCP по данным реальных посетителей.
Как ускорить каждую часть LCP
- TTFB. Серверный кэш, быстрый хостинг, CDN для далёких регионов. В 1С-Битрикс для этого есть встроенное кэширование и технология «Композитный сайт».
- Задержка загрузки. Главная картинка в HTML, а не в CSS или скрипте, атрибут
fetchpriority="high". Если картинка задана только в CSS, её подгружают заранее через preload. - Загрузка. Размер под экран, современный формат, сжатие.
- Задержка отрисовки. Меньше блокирующих стилей и синхронных скриптов в head.
Сколько замеров делать и когда ждать полевых данных
Сразу после правок прогоните ту же страницу в PageSpeed Insights три-пять раз и смотрите медиану лабораторного LCP: один запуск может случайно оказаться быстрым или медленным. Сравнивайте и итоговое число, и разбивку по частям: ушла ли та задержка, которую вы исправляли. Полевые данные в верхнем блоке и в Search Console обновятся постепенно, Google считает их за последние 28 дней. Честную картину вы увидите примерно через месяц.
Проверяйте несколько типов страниц: главную, раздел каталога, карточку товара, статью. У каждого шаблона свой LCP-элемент и свои причины. Ускоренная главная ничего не говорит о карточках, куда обычно приходит основной поисковый трафик.
Почему правки не ускоряют LCP
- Ленивая загрузка для картинки первого экрана. Браузер откладывает её до последнего, и LCP растёт.
- Слайдер из пяти тяжёлых баннеров на первом экране. Часто он и есть главная причина плохого LCP на готовых шаблонах.
- Сжимать картинку, когда проблема в позднем обнаружении. Сначала смотрите разбивку по частям.
- Путать LCP с First Contentful Paint. FCP фиксирует первый любой контент, LCP главный.
Общие нормы трёх показателей и их связь с поиском разобраны в статье Core Web Vitals.
LCP и другие показатели скорости мы проверяем в техническом аудите, а ускорение страниц делаем при доработке сайта.
Текст, видео, слайдер и фон из CSS в роли элемента LCP
Чем плох фон из CSS в роли элемента LCP?
Браузер узнаёт о такой картинке, только когда скачает и разберёт файл стилей, и задержка загрузки растёт. Лучше вывести главное изображение тегом img, а если дизайн требует фон, подсказать его браузеру через preload в head.
Что считается элементом LCP, если на первом экране видео?
Постер, если он задан, а без него первый кадр ролика. Чтобы показать кадр, браузеру нужно сначала скачать начало видео, поэтому без постера LCP почти всегда хуже. Сделайте постер лёгкой картинкой в современном формате и размером под экран.
Как оставить слайдер на первом экране и не испортить LCP?
Первый слайд отдают в HTML обычной картинкой с высоким приоритетом, остальные подгружают позже, когда страница уже показана. Следите, чтобы скрипт карусели не прятал первый кадр до своего запуска. На телефоне иногда проще заменить карусель одним статичным баннером, который весит в разы меньше.
Как ускорить LCP на 1С-Битрикс?
Начните со времени ответа сервера: включите встроенное кэширование и, если шаблон позволяет, «Композитный сайт». Затем загляните в карточку товара: первое фото там нередко подставляет скрипт галереи, а его нужно отдавать в HTML без ленивой загрузки. Отдельно проверьте слайдер на главной, если он есть в шаблоне, и размер баннеров в нём.
Что ускорять, если элементом LCP оказался текст?
Сервер, стили и шрифт. Ждать картинку тут не нужно, поэтому время уходит на получение HTML и на всё, что мешает отрисовке: блокирующий CSS в head и веб-шрифт, без которого браузер не рисует заголовок. Помогают серверный кэш, короткий набор стилей для первого экрана и показ текста системным шрифтом, пока грузится фирменный.
Почему у разных посетителей элементом LCP оказываются разные блоки?
Кандидат зависит от экрана и от поведения человека. На узком экране баннер может быть скрыт, и крупнейшим становится заголовок. А если посетитель прокрутил страницу или нажал на кнопку раньше, чем догрузилось фото, браузер фиксирует то, что было крупнейшим к этому моменту. Поэтому в полевых данных элемент LCP иногда не совпадает с тем, что показал лабораторный тест.
Что читать о LCP на web.dev и в Search Central
Остались вопросы по теме «LCP (Largest Contentful Paint)»?
Напишите нам в Telegram или MAX. Ответит специалист, который отвечает за эту тему, или руководитель проектов в рабочее время.
Отвечает по темеСергей ПимкинВедущий SEO-специалистНад статьёй работали
Услуги
Услуги по теме
Кейсы
Кейсы по теме
Маркетинг · Медицина, центр репродуктивной медицины
SEO-продвижение клиники «Три Сердца»
Посетителей в 5,5 раза большеНа январь 2025 года: 5 500 посетителей в неделю вместо 1 000, обращение стоит 60–70 ₽
Маркетинг · Медицина
SEO-продвижение медцентра «Медюнион»
10 000 обращений в месяц из интернета3 года работы, ноябрь 2018 – октябрь 2021: больше 1 000 фраз в ТОП-10 при цели 800
Тарифы
Тарифы по теме
Стартовый тариф для небольшого бизнеса: наводим порядок на сайте и получаем первые заявки из Яндекса и Google.
- Техническая оптимизация сайта
- Контентная оптимизация
- Семантическое ядро под город или регион
- Настройка Яндекс Вебмастера и Google Search Console
- Цели в Яндекс Метрике
- Ежемесячный отчёт по позициям, трафику и заявкам
- Оптимизация поведенческих факторов
- Оптимизация коммерческих факторов и E-A-T
Тариф для растущего бизнеса. Работаем на количество заявок: считаем звонки через коллтрекинг и дорабатываем сайт под конверсию.
- Техническая оптимизация сайта
- Контентная оптимизация
- Семантическое ядро под город или регион
- Настройка Яндекс Вебмастера и Google Search Console
- Цели в Яндекс Метрике
- Ежемесячный отчёт по позициям, трафику и заявкам
- Оптимизация поведенческих факторов
- Оптимизация коммерческих факторов и E-A-T
Для масштабирования бизнеса: SEO, A/B-тесты, карточки в Яндекс.Бизнесе и 2ГИС, техподдержка сайта. Нейросети берут на себя рутину, итог проверяют специалисты.
- Техническая оптимизация сайта
- Контентная оптимизация
- Семантическое ядро под город или регион
- Настройка Яндекс Вебмастера и Google Search Console
- Цели в Яндекс Метрике
- Ежемесячный отчёт по позициям, трафику и заявкам
- Оптимизация поведенческих факторов
- Оптимизация коммерческих факторов и E-A-T
Проверим ваш сайт бесплатно
Экспресс-аудит за 24 часа: скорость, индексация, мета-теги, коммерческие факторы и цели Метрики.