Core Web Vitals: Как оптимизировать LCP

Largest Contentful Paint (LCP) измеряет, насколько быстро загружается основной контент вашей страницы — главное изображение, заголовок или видео, которые пользователи видят первыми. Когда это занимает более 2,5 секунд, пользователи воспринимают ваш сайт как медленный, показатели отказов растут, а оценки Core Web Vitals ухудшаются. Это руководство подробно объясняет, как диагностировать и исправить проблемы с LCP на всех четырех этапах процесса загрузки.

Что такое Largest Contentful Paint (LCP)?

LCP отслеживает время рендеринга самого крупного видимого элемента контента в области просмотра до взаимодействия с пользователем. Это может быть <img>, <video> или текстовый блок. В отличие от абстрактных метрик, LCP отражает то, что действительно испытывают пользователи — когда страница «ощущается» загруженной.

Google устанавливает четкие пороговые значения:

• Хорошо: Менее 2,5 секунд
• Требует улучшения: 2,5-4,0 секунды
• Плохо: Более 4,0 секунд

Чтобы пройти Core Web Vitals, 75% посещений ваших страниц должны достигать «хороших» показателей LCP. Это напрямую влияет на SEO-рейтинги, поскольку Google использует Core Web Vitals как сигнал ранжирования.

Четыре этапа оптимизации LCP

LCP — это не одна метрика, а сумма четырех различных этапов. Понимание этого разделения критически важно для целенаправленной оптимизации:

1. Time to First Byte (TTFB): Время отклика сервера (~40% от общего LCP)
2. Resource Load Delay: Время между TTFB и началом загрузки LCP-ресурса (<10%)
3. Resource Load Duration: Фактическое время загрузки (~40%)
4. Element Render Delay: Время от завершения загрузки до визуального рендеринга (<10%)

Этапы «задержки» должны стремиться к нулю. Любое время ожидания — это чистая потеря.

Этап 1: Оптимизация времени отклика сервера (TTFB)

Медленный TTFB подрывает все остальное. Если ваш сервер отвечает 3 секунды, достижение LCP в 2,5 секунды становится невозможным.

Распространенные проблемы TTFB:

• Множественные редиректы (каждый добавляет 100-500 миллисекунд)
• Серверы, удаленные от пользователей
• Неэффективный код бэкенда
• Узкие места в базе данных

Решения:

• Внедрите серверное кэширование
• Используйте CDN для подачи контента с граничных узлов
• Минимизируйте редиректы — используйте финальный формат URL напрямую
• Оптимизируйте запросы к базе данных и обработку на бэкенде

Совет профессионала: CDN могут маскировать проблемы сервера. Тестируйте с URL-параметрами (например, ?test=123), чтобы обойти кэши CDN и выявить истинную производительность сервера.

Этап 2: Устранение задержек обнаружения ресурсов

Браузер должен найти ваш LCP-ресурс немедленно. Любая задержка обнаружения — это потерянное время.

Критическая ошибка: Lazy loading LCP-изображения. Никогда не используйте loading="lazy" для контента в видимой области — это намеренно задерживает ваш самый важный элемент.

Сделайте ресурсы обнаруживаемыми:

<!-- Хорошо: Изображение в HTML -->
<img fetchpriority="high" src="/hero.webp" alt="...">

<!-- Плохо: Скрыто в CSS -->
.hero { background-image: url('/hero.webp'); }

Для фоновых изображений CSS (избегайте их для LCP, когда это возможно), предварительно загружайте их:

<link rel="preload" fetchpriority="high" as="image" href="/hero.webp" type="image/webp">

Атрибут fetchpriority="high" сообщает браузерам приоритизировать этот ресурс над другими. Без него изображения часто загружаются с приоритетом «Низкий» по умолчанию.

Этап 3: Сокращение продолжительности загрузки ресурсов

Меньшие файлы загружаются быстрее. Этот этап — чистая физика: уменьшите байты, уменьшите время.

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

• Используйте современные форматы (WebP, AVIF)
• Внедрите адаптивные изображения с srcset
• Сжимайте без видимой потери качества
• Правильно подбирайте размер изображений — не загружайте 4K-изображения для мобильных устройств

Оптимизация шрифтов для текстового LCP:

• Используйте font-display: swap для немедленного показа текста
• Создавайте подмножества шрифтов только с необходимыми символами
• Предварительно загружайте критические шрифты

Соображения по CDN:

• CDN для изображений автоматически оптимизируют форматы и сжатие
• Подача с того же домена избегает накладных расходов на соединение
• Используйте функции прокси CDN, когда они доступны

Этап 4: Минимизация блокировки рендеринга

Даже с загруженными ресурсами рендеринг может застопориться из-за перегрузки основного потока.

Распространенные блокировщики:

• Блокирующий рендеринг CSS в <head>
• Синхронное выполнение JavaScript
• Длительные задачи от сторонних скриптов

Решения:

Встройте критический CSS:

<style>
  /* Только стили для видимой области */
  .hero { /* стили */ }
</style>

Отложите некритический JavaScript:

<script defer src="/app.js"></script>

Для текстовых LCP-элементов, заблокированных веб-шрифтами, обеспечьте резервный рендеринг:

@font-face {
  font-family: 'Custom';
  font-display: swap; /* Показывает резервный шрифт немедленно */
  src: url('/font.woff2') format('woff2');
}

Особые случаи: Видео и фоновые изображения

Видео-элементы: Постер или первый кадр становится кандидатом на LCP. Оптимизируйте постер как любое другое изображение и обеспечьте эффективное кодирование видео.

Фоновые изображения CSS: Они создают присущие задержки обнаружения. Браузер не может предварительно загрузить то, что он еще не разобрал. Преобразуйте критические фоновые изображения в элементы <img> или предварительно загружайте их явно.

Измерение и мониторинг LCP

Лабораторные данные (PageSpeed Insights, Lighthouse) помогают диагностировать проблемы, но полевые данные (CrUX, RUM) показывают реальный пользовательский опыт. Всегда приоритизируйте полевые данные — именно их Google использует для ранжирования.

Используйте панель Performance в Chrome DevTools для локального просмотра разбивки LCP. JavaScript-библиотека web-vitals позволяет настроить пользовательский мониторинг:

import {onLCP} from 'web-vitals';

onLCP(({value, entries}) => {
  console.log('LCP:', value, entries[0].element);
});

Заключение

Оптимизация LCP требует систематического внимания ко всем четырем этапам. Начните с TTFB — никакая оптимизация не имеет значения, если ваш сервер медленный. Обеспечьте немедленное обнаружение ресурсов, минимизируйте размеры файлов и устраните блокирующие рендеринг ресурсы. Самое главное — никогда не применяйте lazy loading к вашему LCP-элементу. С этими оптимизациями достижение LCP менее 2,5 секунд становится не просто возможным, но предсказуемым.

Часто задаваемые вопросы

Gain control over your UX

See how users are using your site as if you were sitting next to them, learn and iterate faster with OpenReplay. — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.