LCP: как ускорить загрузку главного контента и пройти Core Web Vitals

Если пользователь зашёл на ваш сайт и за две с половиной секунды не увидел главное — крупную картинку, заголовок или ключевой блок, — он уже начал сомневаться, стоит ли оставаться. Именно эту задержку измеряет Largest Contentful Paint, один из трёх ключевых показателей Core Web Vitals и подтверждённый фактор ранжирования в Google. Медленный LCP — самая частая причина, по которой сайт проваливает проверку скорости и теряет позиции. В этом гайде разберём, что такое LCP, из каких четырёх частей он складывается, как его измерить и какими конкретными приёмами ускорить отрисовку главного контента, чтобы уверенно пройти пороги Core Web Vitals.

Что такое Largest Contentful Paint

Largest Contentful Paint — это время от начала загрузки страницы до момента, когда в области видимого экрана отрисовывается самый крупный элемент контента. Проще говоря, LCP отвечает на вопрос: «Когда пользователь увидел то главное, ради чего пришёл?». Этот показатель моделирует субъективное ощущение скорости гораздо точнее, чем устаревшие метрики вроде времени полной загрузки, потому что человеку неважно, догрузились ли футер и аналитика, — ему важно увидеть основной контент.

Браузер сам определяет, какой элемент считать LCP-элементом, и пересчитывает это по мере отрисовки страницы. Кандидатами обычно становятся крупное изображение, фоновое изображение, постер видео или большой блок текста. Финальным LCP-элементом считается самый большой из них на момент, когда страница стала интерактивной. Важно понимать: LCP-элемент может меняться в процессе загрузки, и ваша задача — ускорить именно тот элемент, который оказался финальным.

Какой элемент считается LCP

• Крупное изображение в баннере или герое страницы — самый частый случай.
• Фоновое изображение блока, заданное через CSS.
• Постер (превью) видео, пока само видео не запущено.
• Большой текстовый блок — заголовок H1 или вводный абзац, если изображений на первом экране нет.

Пороги LCP: что считается хорошим результатом

Google задаёт три зоны для оценки LCP, и они одинаковы для мобильных и десктопных страниц по смыслу, хотя на мобильных достичь хороших значений сложнее из-за слабого железа и сетей.

Оценка	Значение LCP	Что это значит
Хорошо	менее 2,5 с	Порог пройден, проблем нет
Нужно улучшить	2,5–4 с	Зона риска, требуется работа
Плохо	более 4 с	Серьёзная потеря пользователей и позиций

Ключевой нюанс: Google оценивает не среднее значение, а 75-й перцентиль реальных посещений. Это означает, что 75% ваших пользователей должны укладываться в порог. Если у вас отличный LCP на быстром офисном интернете, но половина аудитории сидит на мобильном в регионах, в полевых данных вы можете проваливаться. Поэтому ориентироваться нужно на полевые показатели, а не только на лабораторный тест с быстрого ноутбука. Как LCP вписывается в общую картину, мы разбираем в обзорном материале про Core Web Vitals и улучшение скорости загрузки.

Четыре составляющие LCP

Чтобы системно ускорять LCP, нужно понимать, что он складывается из четырёх последовательных отрезков времени. Команда Chrome предложила разбивку, которая помогает понять, где именно теряются секунды.

1. Время до первого байта (TTFB) — сколько ждали ответа сервера. Обычно занимает 40% бюджета LCP.
2. Задержка загрузки ресурса — пауза между получением HTML и началом загрузки LCP-картинки.
3. Время загрузки ресурса — сколько грузился сам файл изображения по сети.
4. Задержка отрисовки — пауза между окончанием загрузки ресурса и его появлением на экране.

На большинстве реальных сайтов основная потеря времени приходится на первые два отрезка: медленный сервер и позднее обнаружение LCP-ресурса. Если вы знаете, в каком отрезке теряется время, оптимизация становится точечной. Например, если TTFB занимает две секунды, бессмысленно сжимать картинку — сначала надо разобраться с сервером, о чём подробно в гайде про TTFB и ответ сервера до 200 мс.

LCP — это не одна проблема, а сумма четырёх задержек. Оптимизировать вслепую бессмысленно: сначала измерьте разбивку, найдите самый длинный отрезок и бейте именно по нему.

Как измерить LCP

Есть два принципиально разных типа данных: лабораторные и полевые. Лабораторные данные получают в контролируемых условиях — это Lighthouse в Chrome DevTools, PageSpeed Insights и WebPageTest. Они показывают, что происходит на эталонном устройстве при эмуляции сети, и удобны для отладки, потому что воспроизводимы. В Lighthouse вы сразу увидите, какой элемент стал LCP, и получите подсказки по оптимизации.

Полевые данные собираются с реальных пользователей через отчёт CrUX (Chrome User Experience Report). Именно эти цифры Google использует для ранжирования, и именно их показывает отчёт Core Web Vitals в Google Search Console. Полевые данные могут сильно отличаться от лабораторных, потому что учитывают всё разнообразие устройств и сетей вашей аудитории. Правильный подход — отлаживать по лабораторным данным, а контролировать результат по полевым в Search Console и Яндекс Вебмастере.

Причины медленного LCP и решения

Разберём конкретные приёмы ускорения по каждому из четырёх отрезков. Это рабочий набор техник, который мы применяем на реальных проектах.

Ускоряем сервер и TTFB

Быстрый ответ сервера — фундамент LCP. Включите серверное кэширование, чтобы страница не генерировалась заново при каждом запросе. Используйте быстрый хостинг с современным процессором, настройте кэш на уровне приложения и базы данных, подключите CDN для приближения контента к пользователю. Для WordPress критично важен объектный кэш и страничное кэширование. Если TTFB стабильно выше 600 мс, никакая оптимизация картинок не спасёт LCP.

Preload и fetchpriority для LCP-картинки

Главная причина задержки загрузки ресурса — браузер поздно узнаёт, что картинку нужно грузить. Решение — предзагрузить LCP-изображение тегом <link rel=»preload» as=»image» href=»hero.webp»> в начале <head>. Ещё мощнее работает атрибут fetchpriority=»high» прямо на теге <img> — он говорит браузеру, что это изображение важнее остальных, и поднимает его в очереди загрузки. Эти два приёма часто срезают LCP на секунду и более без других изменений.

Не используйте lazy-load для LCP-элемента

Очень распространённая ошибка: плагин ставит атрибут loading=»lazy» на все изображения подряд, включая главный баннер. Ленивая загрузка для LCP-картинки катастрофична — она специально откладывает загрузку, и LCP взлетает на две-три секунды. Главное изображение первого экрана должно грузиться с приоритетом, а не лениво. Ленивую загрузку применяйте только к картинкам ниже сгиба — об этом подробно в материале про lazy-load изображений и видео для SEO.

Современные форматы и сжатие изображений

Время загрузки ресурса напрямую зависит от веса файла. Перевод изображений в форматы WebP и AVIF уменьшает их вес на 30–60% без видимой потери качества. Кроме формата важны правильные размеры: не отдавайте картинку 3000 пикселей в контейнер шириной 800. Используйте атрибуты srcset и sizes, чтобы браузер выбрал подходящий размер под устройство. Тема форматов подробно раскрыта в гайде про WebP и AVIF — современные форматы изображений.

Critical CSS и устранение render-blocking

Задержка отрисовки часто вызвана тем, что браузер ждёт загрузки всех блокирующих стилей и скриптов, прежде чем что-либо нарисовать. Выделение критического CSS — стилей, нужных для первого экрана, — и его инлайн в HTML позволяет начать отрисовку раньше. Остальные стили подгружаются асинхронно. Скрипты, не нужные для первого экрана, помечайте атрибутами defer или async. Эта тема детально разобрана в статье про критический CSS и render-blocking ресурсы.

Типичные ошибки, которые портят LCP

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

• Lazy-load на главном баннере — мгновенно добавляет 2–3 секунды к LCP.
• Огромный несжатый PNG в герое вместо WebP — файл на несколько мегабайт.
• Шрифт без preload, когда LCP-элемент это текстовый заголовок.
• Карусель или слайдер с тяжёлыми скриптами на первом экране.
• Медленный сервер с TTFB выше секунды и без кэширования.
• LCP-картинка, подгружаемая через JavaScript после рендеринга.
• Сторонние виджеты и аналитика, блокирующие отрисовку.

Исправление даже двух-трёх пунктов из этого списка обычно переводит страницу из зоны «плохо» в зону «хорошо». Самая большая ошибка — оптимизировать наугад, не определив, какой именно отрезок LCP тормозит. Если вы не уверены, где у вашего сайта узкое место, закажите комплексный SEO аудит, и мы найдём конкретные точки роста.

Чек-лист ускорения LCP

1. Определите финальный LCP-элемент через Lighthouse или PageSpeed Insights.
2. Измерьте разбивку LCP на четыре отрезка и найдите самый длинный.
3. Снизьте TTFB до 200–600 мс кэшированием и быстрым хостингом.
4. Предзагрузите LCP-картинку через rel=»preload» as=»image».
5. Добавьте fetchpriority=»high» на тег главного изображения.
6. Уберите loading=»lazy» с LCP-элемента первого экрана.
7. Переведите изображения в WebP или AVIF и задайте srcset.
8. Выделите критический CSS и отложите некритичные скрипты.
9. Подключите CDN для приближения контента к пользователю.
10. Контролируйте результат по полевым данным CrUX в Search Console.

Ускорение LCP — одна из самых результативных работ в техническом SEO: она напрямую улучшает позиции, поведенческие факторы и конверсию, потому что пользователь видит контент быстрее и реже уходит. Если вы хотите гарантированно пройти Core Web Vitals и вывести сайт в ТОП, закажите продвижение сайта или начните с технической доработки сайта, где наши специалисты возьмут на себя всю оптимизацию скорости.

Услуги LSI Продвижение

Наша команда предлагает полный спектр услуг по SEO-продвижению и технической доработке сайтов. Мы работаем только белыми методами, ориентируемся на реальный бизнес-результат — трафик, заявки и продажи, а не только позиции в отчёте, — и выстраиваем продвижение системно, под конкретные задачи и нишу вашего проекта. Начать можно с бесплатной диагностики, чтобы понять текущее состояние сайта и точки роста, а затем перейти к комплексной работе. Выберите подходящую услугу из списка ниже:

• Бесплатный SEO аудит сайта — автоматическая проверка на 50+ параметров за 2 минуты
• Комплексный SEO аудит — глубокий ручной анализ с рекомендациями от эксперта
• Продвижение сайтов — вывод в ТОП Яндекса и Google по целевым запросам
• SEO консультация — разбор вашего сайта с конкретными рекомендациями
• LSI тексты — экспертный контент, оптимизированный для поисковых систем
• Доработка сайта — техническая оптимизация и исправление ошибок
• Создание сайта под ключ — разработка с нуля с SEO-оптимизацией
• Стоимость продвижения — прозрачные тарифы и условия
• Портфолио и кейсы — реальные результаты наших клиентов