Чтобы улучшить LCP, нужно ускорить четыре звена: ответ сервера (TTFB до 0,8 секунды - кэширование и нормальный хостинг), загрузку главной картинки первого экрана (сжатие, формат WebP, приоритетная загрузка), рендер-блокирующие стили и скрипты (критический CSS, отложенный JavaScript) и шрифты (локальное подключение с font-display swap). Целевое значение LCP - до 2,5 секунды у 75 процентов реальных посетителей. Разберём каждое звено по порядку влияния.

Что такое LCP. Largest Contentful Paint - момент, когда на экране появился самый крупный видимый элемент: обычно баннер, фото товара или заголовок. До этой секунды посетитель смотрит на пустоту и решает, не закрыть ли вкладку. LCP - одна из трёх метрик Core Web Vitals, влияющих на позиции в Google.

Из чего складывается LCP: четыре фазы загрузки

LCP - это сумма: время ответа сервера, затем загрузка блокирующих ресурсов (CSS, шрифты, синхронные скрипты), затем загрузка самого LCP-элемента (чаще всего картинки) и его отрисовка. Диагноз ставится по этой цепочке: если сервер отдаёт страницу 2 секунды - бесполезно сжимать картинки, начинать нужно с хостинга и кэша. Фазы наглядно видны в отчёте PageSpeed Insights в блоке про LCP.

Как улучшить LCP: план из 6 шагов

  1. Ускорьте ответ сервераВключите кэширование страниц (в Битрикс - композитный сайт), проверьте тариф хостинга и версию PHP. Цель - TTFB до 0,8 секунды. Медленная база и тяжёлые выборки каталога тоже живут в этой фазе.
  2. Оптимизируйте LCP-картинкуСожмите её, отдайте в WebP или AVIF, задайте реальные размеры под экран (srcset), а не одну картинку 3000 пикселей для всех. Типовой выигрыш - от половины секунды до двух.
  3. Грузите главное первымДля LCP-картинки - fetchpriority high и предзагрузка (preload); ленивую загрузку (loading lazy) для первого экрана уберите: на LCP-элементе она вредит сильнее всего.
  4. Разберитесь с CSS и скриптамиКритические стили - в начало страницы, остальное - потом; счётчики, чаты и виджеты - с defer или после первого взаимодействия. Каждый синхронный скрипт в head отодвигает появление контента.
  5. Приведите в порядок шрифтыПодключайте локально, форматом WOFF2, с font-display swap: текст появляется сразу системным шрифтом и заменяется фирменным без задержки рендера.
  6. Замерьте до и послеЛабораторный тест покажет эффект сразу, полевые данные подтянутся за 28 дней. Проверяйте мобильную версию: именно она обычно «красная».
Быстрая победа для Битрикс. Часто худший LCP у сайтов на Битрикс лечится тремя настройками: включённый композитный кэш, автогенерация WebP и вынос сторонних виджетов в отложенную загрузку. Это день работы, а метрика падает с 5-6 секунд до целевых 2,5.

LCP в красной зоне и непонятно, с чего начать?

Найдём узкое место по фазам загрузки и устраним: сервер, кэш, картинки, скрипты, шрифты. Работаем с сайтами на Битрикс с 2013 года - 450+ проектов.

Ускорить сайт

Типичные ошибки, которые убивают LCP

  • Слайдер на первом экране: пять тяжёлых картинок грузятся ради одной видимой
  • Фоновое видео или огромный баннер «для красоты» без сжатия и предзагрузки
  • Ленивая загрузка, повешенная на все картинки подряд, включая главную
  • Пять счётчиков, три чата и квиз-виджет, подключённые синхронно в head
  • Дешёвый перегруженный хостинг, на котором даже пустая страница отдаётся секунду
Важно. Не оптимизируйте вслепую по чужим чек-листам. Сначала диагноз - какая фаза съедает время именно у вас, потом лечение. Иначе легко потратить неделю на сжатие картинок при медленном сервере - и не сдвинуть метрику ни на десятую секунды.

LCP улучшили - что дальше

LCP - обычно самая проблемная, но не единственная метрика: следом стоит проверить отклик интерфейса (INP) и стабильность вёрстки (CLS), а также общий план из статьи как ускорить сайт. Скорость - процесс: каждый новый баннер, виджет или доработка способны вернуть метрику в жёлтую зону, поэтому замеры стоит повторять после заметных изменений на сайте - или доверить контроль тем, кто делает это по регламенту в рамках поддержки сайта.

Частые вопросы про улучшение LCP

Какое значение LCP считается хорошим для сайта?
До 2,5 секунды у 75 процентов реальных визитов - зелёная зона. От 2,5 до 4 секунд - требует улучшения, больше 4 - плохо. Смотрите полевые данные в PageSpeed Insights, а не только лабораторный балл.
LCP на десктопе зелёный, на мобильных красный. Почему?
Слабые процессоры и мобильные сети: та же страница на телефоне грузится в разы дольше. Лечится адаптивными размерами картинок, меньшим объёмом скриптов и кэшированием. Ориентируйтесь именно на мобильные показатели.
Поможет ли переезд на другой хостинг улучшить LCP?
Поможет, если узкое место - фаза ответа сервера (высокий TTFB). Если сервер отвечает быстро, а тормозят картинки и скрипты, переезд ничего не даст. Сначала диагностика по фазам, потом решения.
Сколько стоит оптимизация LCP у специалистов?
Типовой проект ускорения сайта на Битрикс - от 300-600 BYN в зависимости от состояния: диагностика, настройка кэширования, оптимизация изображений и скриптов. Точную смету считаем бесплатно за 1 день после экспресс-аудита.

Улучшение LCP - самая благодарная работа над скоростью: посетитель видит контент почти мгновенно, Google снимает понижающий фактор, реклама конвертирует дороже. Если нет времени разбираться в фазах и приоритетах загрузки - передайте задачу нам: в рамках доработки сайтов Alavir проведёт диагностику, ускорит сайт и покажет результат цифрами до и после. Консультация бесплатная.