LCP

Largest Contentful Paint (LCP) — это метрика, которая фиксирует время загрузки самого крупного элемента контента на странице. Показатель фокусируется именно на том, что видит пользователь: герой-баннер, заголовок статьи, главное изображение или большой текстовый блок.

LCP относится к Core Web Vitals от Google и напрямую влияет на восприятие скорости сайта.

Почему LCP важен

Как измеряется LCP

Как именно фиксируется LCP

Типы данных

Значения LCP

Инструменты для измерения LCP

Причины плохого LCP

Как оптимизировать LCP

Оптимизация изображений

Ускорение ответа сервера

Удаление блокирующих ресурсов

Оптимизация шрифтов

Приоритизация загрузки

Упрощение DOM

Как проверять результаты оптимизации LCP

Повторное тестирование

Анализ в Search Console

Использование RUM-систем

Постоянный мониторинг

A/B-тестирование

Связь с бизнес-метриками

Почему LCP важен

Отметим основные причины, по которым необходимо оптимизировать LCP.

• Напрямую связан с пользовательским опытом. Исследования Google показывают, что страницы с быстрым LCP удерживают внимание: пользователи реже уходят, дольше взаимодействуют и чаще совершают целевые действия. Медленный Largest Contentful Paint увеличивает показатель отказов и снижает глубину просмотра. Это особенно критично для лендингов, интернет-магазинов и сервисов, где каждая секунда влияет на конверсию..
• Входит Core Web Vitals. Эти показатели влияют на ранжирование в поисковой выдаче. По данным CrUX (Chrome User Experience Report) на 2026 год, только около 62–66% мобильных страниц достигают хорошего LCP. Это значит, что большинство сайтов теряют позиции из-за производительности.
• Влияет на бизнес. Снижение LCP на 1 секунду может увеличить конверсию на 10–20%. На мобильных устройствах, где трафик доминирует, показатель особенно критичен — медленный интернет усиливает проблемы.

Как измеряется LCP

Разберем ключевые моменты, связанные с измерением LCP.

Как именно фиксируется LCP

Когда пользователь открывает страницу, браузер начинает отслеживать процесс отрисовки элементов. Он анализирует:

• размер элементов;
• момент их появления;
• видимость в области экрана (viewport).

Учитываются:

• изображения (<img>, включая GIF и SVG);
• видео (первая рамка или poster);
• фоновые изображения через CSS url();
• блочные текстовые элементы.

Как только самый крупный элемент становится полностью видимым, фиксируется значение LCP.

Если позже появляется более крупный элемент (например, загружается изображение), значение показателя обновляется.

Важно: LCP измеряется только для видимых элементов; lazy-loading на главном изображении сильно ухудшает показатель.

Типы данных

Данные для LCP делятся на два типа: 

• лабораторные. Результаты тестов в контролируемых условиях. Они позволяют быстро проверить страницу, но не отражают реальный пользовательский опыт;
• полевые. Реальные показатели, собранные с пользователей. Они учитывают устройства, скорость интернета и географию.

Для оценки LCP лучше использовать оба типа данных: лабораторные — для диагностики, полевые — для принятия решений.

Значения LCP

Вот пороговые значения (2026 год):  

• хорошо. ≤ 2,5 секунды;
• требует улучшения. 2,5–4,0 секунды;
• плохо. > 4,0 секунды.  

Google оценивает 75-й перцентиль: 75% визитов должны укладываться в «хорошо».

Инструменты для измерения LCP

Ниже — ключевые инструменты для измерения LCP.

1. Google PageSpeed Insights (PSI). Самый простой способ. Нужно ввести URL и получить значения из CrUX (реальные пользователи) и Lighthouse (лабораторные). Показывает элемент LCP и рекомендации.

2. Chrome DevTools:

• вкладка Performance. Запишите профиль (Record + Reload). В разделе Timings увидите LCP, элемент и разбивку по sub-parts (TTFB, Resource Load Delay и другим);
• вкладка Lighthouse. Аудит Core Web Vitals.

3. Lighthouse (в DevTools или CLI). Идеально для CI/CD.

4. Web Vitals JavaScript API. Для мониторинга в продакшене. Библиотека web-vitals:

5. Chrome User Experience Report (CrUX) и Google Search Console. Данные по реальным пользователям за 28 дней.

6. WebPageTest, GTmetrix, DebugBear. Детальные waterfall-графики и сравнение.

Причины плохого LCP

На практике плохой LCP чаще всего связан с:

• медленным сервером;
• тяжелыми изображениями;
• блокирующими ресурсами (CSS и JavaScript);
• отсутствием оптимизации шрифтов;
• большим количеством сторонних скриптов.

Понимание этих факторов — первый шаг к оптимизации.

Как оптимизировать LCP

Оптимизация LCP — это комплексная задача, которая затрагивает серверную часть, фронтенд и контент.

Оптимизация изображений

Изображения чаще всего являются самым крупным элементом страницы, поэтому их оптимизация — ключевой фактор.

Что можно сделать:

• использовать современные форматы (WebP, AVIF);
• сжимать изображения без потери качества;
• задавать правильные размеры;
• использовать lazy loading для второстепенных изображений;
• предварительно загружать главный баннер.

Особенно важно оптимизировать изображения первого экрана — именно они чаще всего влияют на LCP.

Ускорение ответа сервера

Время ответа сервера (TTFB — Time to First Byte) напрямую влияет на LCP.

Для улучшения:

• используйте быстрый хостинг;
• внедряйте CDN;
• оптимизируйте базу данных;
• применяйте кеширование;
• минимизируйте серверные вычисления.

Чем быстрее сервер начинает отдавать контент, тем раньше начинается отрисовка страницы.

Удаление блокирующих ресурсов

CSS и JavaScript могут блокировать отображение контента.

Рекомендуется:

• минимизировать CSS и JS;
• использовать асинхронную загрузку скриптов;
• выносить критический CSS в head;
• откладывать загрузку неважных скриптов.

Это позволяет быстрее отрисовать основной контент.

Оптимизация шрифтов

Шрифты также могут замедлять отображение текста.

Решения:

• использовать font-display: swap;
• сокращать количество начертаний;
• подключать только нужные символы;
• использовать системные шрифты, где это возможно.

Это помогает избежать задержек при отображении текста.

Приоритизация загрузки

Важно явно указывать браузеру, какие ресурсы важны.

Для этого используются:

• preload для ключевых ресурсов;
• preconnect к внешним доменам;
• правильный порядок подключения файлов.

Это позволяет ускорить загрузку главного контента.

Упрощение DOM

Сложная структура страницы замедляет рендеринг.

Рекомендуется:

• уменьшить вложенность элементов;
• удалить лишние блоки;
• оптимизировать HTML-разметку.

Чем проще структура, тем быстрее браузер ее отрисует.

Как проверять результаты оптимизации LCP

После внедрения изменений важно регулярно проверять, как они влияют на LCP.

Повторное тестирование

Первый шаг — повторный запуск тестов в инструментах:

• PageSpeed Insights;
• Lighthouse;
• Chrome DevTools.

Сравнивайте результаты до и после оптимизации. Обращайте внимание не только на итоговый показатель, но и на рекомендации.

Анализ в Search Console

Отчет Core Web Vitals показывает реальные данные пользователей.

Там можно:

• увидеть страницы с плохим LCP;
• отследить динамику;
• понять, какие устройства или регионы влияют на показатель.

Это особенно важно для масштабных проектов.

Использование RUM-систем

RUM (Real User Monitoring) позволяет отслеживать реальные показатели в реальном времени.

Такие системы помогают:

• анализировать поведение пользователей;
• выявлять проблемы на конкретных устройствах;
• отслеживать влияние изменений.

Постоянный мониторинг

LCP — это не разовая задача. Он может ухудшаться из-за:

• добавления новых скриптов;
• изменения дизайна;
• роста контента;
• обновлений CMS.

Поэтому важно настроить регулярный мониторинг и алерты.

A/B-тестирование

Если вы вносите значительные изменения, полезно проводить A/B-тесты.

Это позволяет:

• сравнить версии страницы;
• оценить влияние на конверсию;
• выбрать оптимальное решение.

Связь с бизнес-метриками

Не стоит рассматривать LCP изолированно. Важно анализировать его вместе с:

• конверсией;
• временем на сайте;
• показателем отказов.

Иногда небольшое ухудшение LCP может быть оправдано, если оно увеличивает конверсию.