Largest Contentful Paint (LCP) — ключевая метрика Core Web Vitals, измеряющая время отрисовки самого крупного видимого элемента на странице. Google использует LCP как фактор ранжирования с 2021 года, и в 2026 требования остаются строгими: хороший показатель — не более 2.5 секунды. В этом руководстве разберём практические методы оптимизации LCP от диагностики до внедрения.
Что такое LCP и почему он важен
LCP фиксирует момент, когда основной контент страницы становится видимым пользователю. Обычно это hero-изображение, крупный заголовок или блок текста. Метрика отражает воспринимаемую скорость загрузки — пользователь оценивает сайт как быстрый, если главный контент появляется быстро.
Пороговые значения LCP
| Оценка | Время LCP | Влияние на SEO |
|---|---|---|
| Хорошо | ≤ 2.5 с | Положительный сигнал |
| Требует улучшения | 2.5 – 4 с | Нейтральный |
| Плохо | > 4 с | Негативный фактор ранжирования |
Элементы, которые могут быть LCP
- Изображения (img, picture, background-image в SVG)
- Видео (poster-изображение)
- Текстовые блоки (заголовки, параграфы)
Проверить LCP вашего сайта можно с помощью инструмента Web Vitals на reChecker. Анализ покажет текущие значения и подскажет направления оптимизации.
Диагностика причин медленного LCP
Перед оптимизацией необходимо выявить узкие места. Основные причины медленного LCP:
1. Медленный серверный ответ (TTFB)
Time to First Byte — время от запроса до первого байта ответа. Если сервер отвечает дольше 600 мс, LCP неизбежно страдает.
# Проверка TTFB через curl
curl -w "TTFB: %{time_starttransfer}s\n" -o /dev/null -s "https://example.com"
2. Блокирующий рендеринг JavaScript и CSS
Ресурсы в head без атрибутов async/defer блокируют парсинг HTML и отрисовку. Критический CSS должен быть инлайновым или загружаться с высоким приоритетом.
3. Неоптимизированные изображения
Крупные файлы, отсутствие современных форматов (WebP, AVIF), загрузка без приоритета — типичные проблемы. Используйте инструмент проверки изображений reChecker для аудита.
4. Медленная загрузка шрифтов
Шрифты блокируют отрисовку текста (FOIT — Flash of Invisible Text). Если LCP-элемент — текст, задержка шрифтов напрямую ухудшает метрику.
5. Очередь ресурсов
Браузер ограничивает количество одновременных соединений к одному домену (обычно 6). Если критический ресурс стоит в очереди за десятками других, LCP затягивается.
Оптимизация изображений для LCP
Изображения — самый частый LCP-элемент. Оптимизация даёт наибольший эффект.
Современные форматы
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Главное изображение" fetchpriority="high" width="1200" height="630">
</picture>
AVIF даёт сжатие на 20–50% лучше JPEG при том же качестве. WebP — универсальная альтернатива с поддержкой во всех современных браузерах.
Атрибут fetchpriority
Для LCP-изображения явно указывайте высокий приоритет:
<img src="hero.jpg" alt="Hero" fetchpriority="high" loading="eager">
По умолчанию браузер загружает изображения с низким приоритетом. fetchpriority="high" поднимает LCP-картинку в начало очереди.
Размеры width и height
Всегда указывайте размеры — это предотвращает layout shift (CLS) и позволяет браузеру резервировать место до загрузки:
<img src="hero.jpg" alt="Hero" width="1200" height="630" fetchpriority="high">
Предзагрузка LCP-изображения
Если изображение критично и находится в начале документа:
<link rel="preload" as="image" href="/hero.avif" type="image/avif">
Preload заставляет браузер начать загрузку до обнаружения тега img в HTML.
Lazy loading для нефоновых изображений
Для изображений ниже первого экрана используйте lazy loading — они не должны конкурировать за bandwidth с LCP:
<img src="product.jpg" alt="Товар" loading="lazy" width="400" height="400">
LCP-элемент не должен иметь loading="lazy" — иначе метрика будет измерять задержку до скролла.
Оптимизация серверного ответа
CDN и кэширование
Размещение статики на CDN сокращает RTT. Кэширование HTML и критических ресурсов снижает TTFB при повторных визитах.
# Nginx: кэш статики
location ~* \.(jpg|jpeg|png|webp|avif|css|js)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
HTTP/2 и HTTP/3
Мультиплексирование позволяет загружать множество ресурсов параллельно по одному соединению. Убедитесь, что сервер поддерживает HTTP/2.
Раннее завершение (Early Hints)
HTTP 103 Early Hints позволяет серверу отправить подсказки о preload до основного ответа:
HTTP/1.1 103 Early Hints
Link: </critical.css>; rel=preload; as=style
Link: </hero.avif>; rel=preload; as=image
Оптимизация критического рендеринга
Критический CSS инлайном
CSS, необходимый для отрисовки above-the-fold контента, должен быть встроен в HTML или загружен с высоким приоритетом:
<head>
<style>
/* Критический CSS для hero-блока */
.hero { min-height: 100vh; }
.hero img { width: 100%; height: auto; }
</style>
<link rel="stylesheet" href="main.css" media="print" onload="this.media='all'">
</head>
Отложенная загрузка нефонового JavaScript
<script src="analytics.js" defer></script>
<script src="app.js" type="module"></script>
Модули (type="module") по умолчанию откладываются. Обычные скрипты — с defer.
Удаление блокирующих скриптов из head
Третьесторонние виджеты (чаты, аналитика) часто блокируют рендеринг. Загружайте их после LCP:
window.addEventListener('load', () => {
const script = document.createElement('script');
script.src = 'https://widget.example.com/chat.js';
document.body.appendChild(script);
});
Оптимизация шрифтов
Если LCP-элемент — текст, шрифты критичны.
font-display: swap
@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom.woff2') format('woff2');
font-display: swap;
}
font-display: swap показывает текст системным шрифтом сразу, затем подменяет кастомным. Избегайте font-display: block — он блокирует отрисовку до 3 секунд.
Предзагрузка критического шрифта
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
Подмножество символов
Если используете только кириллицу и латиницу, генерируйте подмножество шрифта — файл станет в 2–3 раза меньше.
Чек-лист оптимизации LCP
| Действие | Приоритет | Сложность |
|---|---|---|
| Оптимизировать LCP-изображение (формат, размер) | Высокий | Низкая |
| Добавить fetchpriority="high" для LCP-элемента | Высокий | Низкая |
| Указать width/height для изображений | Высокий | Низкая |
| Настроить preload для критических ресурсов | Высокий | Средняя |
| Включить CDN и кэширование | Высокий | Средняя |
| Инлайнить критический CSS | Средний | Средняя |
| Отложить нефоновый JavaScript | Средний | Средняя |
| Оптимизировать шрифты (swap, preload) | Средний | Низкая |
| Сократить TTFB (сервер, БД) | Высокий | Высокая |
Мониторинг и валидация
После внедрения изменений проверьте результат:
- PageSpeed Insights — лабораторные и полевые данные
- Chrome DevTools — вкладка Performance, метка LCP
- Web Vitals на reChecker — быстрая проверка без установки инструментов
Полевые данные (CrUX) обновляются с задержкой 28 дней. Лабораторные тесты показывают эффект сразу, но могут отличаться от реальных условий пользователей.
Специфика по типам контента
E-commerce: товарные карточки
LCP-элемент — обычно изображение товара. Оптимизация: preload первого изображения, fetchpriority="high", современные форматы. Избегайте lazy loading для главного изображения.
Блоги и статьи
LCP — hero-изображение или крупный заголовок. Для hero — те же приёмы, что для изображений. Для заголовков — критический CSS для шрифтов, preload шрифтов, минимизация блокирующего CSS.
Лендинги
Часто один экран, один крупный элемент. LCP критичен. Максимальная оптимизация: инлайновый критический CSS, preload всех критических ресурсов, минимум JS.
Инструменты измерения
Chrome DevTools
Performance → запись загрузки → метка LCP. Показывает элемент и время. Network позволяет проверить приоритет загрузки ресурсов.
PageSpeed Insights
Лабораторные и полевые данные. Полевые (CrUX) — реальные пользователи. Лабораторные — симулированная среда. Оба важны.
Web Vitals расширение
Расширение для Chrome от Google показывает LCP, INP, CLS в реальном времени при просмотре страниц.
reChecker Web Vitals
Инструмент Web Vitals на reChecker — проверка без установки инструментов. Введите URL и получите отчёт по метрикам.
Частые вопросы
LCP ухудшился после обновления — почему?
Добавление тяжёлых скриптов, новых изображений, блокирующего CSS. Проверьте Network waterfall — какой ресурс задерживает отрисовку.
LCP отличается на мобильном и десктопе — нормально?
Да. Разные устройства, скорость сети, размеры экрана. Оптимизируйте оба, но мобильный приоритетнее (mobile-first indexing).
Нужно ли оптимизировать LCP для всех страниц?
Приоритет — страницы с трафиком и конверсиями. Главная, ключевые товары, популярные статьи. Остальные — по мере возможности.
Связанные материалы
Подробнее о всех метриках Core Web Vitals и их взаимосвязи читайте в полном руководстве по Core Web Vitals 2026. Для комплексной проверки производительности используйте инструмент Web Vitals и проверку изображений на reChecker.