Largest Contentful Paint (LCP): как ускорить главный элемент

Largest Contentful Paint LCP: что измеряет и какие пороги у Google

LCP фиксирует время появления самого большого видимого блока в первом экране: обычно это главное фото, баннер, обложка видео или крупный заголовок с текстом. Не весь сайт, а именно этот один элемент. Поэтому страница может «весить» много и всё равно показывать хороший LCP, если главный элемент подготовлен правильно.

Google считает результат хорошим, когда LCP не больше 2,5 секунды, и плохим, когда он превышает 4 секунды. Всё, что между ними, требует доработки. Важная деталь: оценка строится на реальных данных посетителей, а не на одном вашем замере с ноутбука. В Узбекистане это принципиально: часть аудитории открывает сайт с недорогих смартфонов и с мобильного интернета в областях, и именно эти визиты тянут показатель вниз.

LCP влияет на SEO как один из сигналов качества страницы, но не заменяет релевантный контент. Зато на конверсию он влияет напрямую: быстрый первый экран удерживает человека до формы заявки, кнопки «Заказать» или перехода в Telegram.

Как найти элемент LCP на вашей странице

Ускорять «страницу вообще» бессмысленно. Сначала нужно понять, какой именно элемент засчитан как LCP, и работать с ним.

• Откройте страницу в PageSpeed Insights и найдите в диагностике блок с элементом LCP — там указан конкретный тег.
• Повторите проверку для мобильной и компьютерной версий: на телефоне LCP часто оказывается заголовком или другой картинкой, чем на десктопе.
• Для точной картины откройте инструменты разработчика Chrome, вкладку Performance: элемент LCP отмечен прямо на шкале загрузки.
• Проверьте не только главную, но и карточки товаров, статьи, страницы услуг: у каждого шаблона свой LCP.

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

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

• Ответ сервера: сколько браузер ждёт первый байт страницы.
• Задержка старта загрузки: через какое время браузер вообще узнаёт, что ему нужна главная картинка.
• Загрузка ресурса: вес файла и скорость канала.
• Задержка отрисовки: файл уже скачан, но показать его мешают скрипты, стили или анимация.

Сервер и хостинг: фундамент, который часто игнорируют

Если сервер долго отвечает, никакая сжатая картинка не спасёт: отсчёт идёт с самого начала. Самые частые причины медленного ответа на сайтах малого бизнеса — дешёвый хостинг на общем сервере, отсутствие кеша и тяжёлые запросы к базе при каждом открытии страницы на WordPress или Bitrix.

Что проверить: включено ли кеширование страниц на сервере или в CDN, включено ли сжатие ответа, нет ли цепочки лишних редиректов (например, с http на https, потом с www на без www, потом на языковую версию). Отдельно посмотрите, где физически стоит сервер: для аудитории в Узбекистане расположение и качество канала заметно влияют на скорость.

Главная картинка: пошаговая настройка

В большинстве случаев LCP — это изображение, и именно здесь самый быстрый выигрыш. Идите по шагам.

• Переведите файл в WebP или AVIF и сожмите: тяжёлый PNG на первом экране — прямая дорога к плохой оценке.
• Отдавайте размер под экран: через srcset и sizes телефон получит небольшую версию, а не фото шириной в несколько тысяч пикселей.
• Уберите отложенную загрузку (lazy loading) именно с главной картинки: ленивая загрузка нужна для изображений ниже первого экрана.
• Добавьте атрибут fetchpriority со значением high, чтобы браузер загружал картинку в первую очередь.
• Выведите картинку обычным тегом img, а не фоном в CSS: фон браузер находит только после загрузки стилей. Если фон неизбежен, используйте предзагрузку.
• Не подставляйте картинку скриптом: она должна быть в исходной разметке страницы.

Скрипты, шрифты и слайдеры на первом экране

Даже идеальная картинка не появится, пока браузер занят чужим кодом. Блокируют отрисовку тяжёлые стили в начале страницы и скрипты без атрибутов defer или async. Критические стили первого экрана выносят прямо в страницу, остальные подгружают позже; скрипты подключают с defer; чат-виджеты, счётчики и пиксели откладывают до момента, когда страница уже показана.

Если LCP у вас текстовый блок, его тормозят веб-шрифты. Подключайте только нужные начертания и наборы символов, задайте font-display: swap, чтобы текст появлялся запасным шрифтом, и предзагрузите основной.

Отдельный виновник — слайдер на главной. Картинки в нём грузит скрипт, а первый слайд выезжает с анимацией. Если слайдер нужен, первый слайд делают обычной картинкой в разметке, видимой без скриптов. Часто честнее заменить слайдер одним сильным баннером.

Типичные ошибки при работе с LCP

Эти промахи повторяются от сайта к сайту, и их легко проверить за один вечер.

• Оптимизируют картинки по всему сайту, но не трогают ту единственную, что является LCP.
• Включают lazy loading для всех изображений подряд, включая главное.
• Ставят видеофон на первый экран ради «красоты», не оценив его вес.
• Подключают несколько шрифтовых семейств и десятки виджетов в шаблоне.
• Измеряют один раз в лаборатории и считают задачу закрытой, не глядя на данные реальных пользователей.
• Ждут результата в Search Console на следующий день: полевые данные накапливаются постепенно.

Пример и порядок работ: от Search Console до результата

Представим сайт застройщика или интернет-магазина в Ташкенте: на первом экране огромное фото во весь экран, оно подключено фоном через CSS и привязано к слайдеру. Браузер узнаёт о картинке только после стилей и скриптов слайдера, а файл весит несколько мегабайт. Замена на тег img с адаптивными размерами в WebP, высокий приоритет загрузки и первый слайд без скрипта обычно дают больше, чем любые другие правки на этой странице.

Рабочий порядок для любого сайта:

• Найти страницы с плохим LCP в отчёте Core Web Vitals в Search Console.
• Сгруппировать их по шаблонам: главная, карточки, статьи.
• Определить элемент LCP для каждого шаблона.
• Разложить время на четыре части и найти самую длинную.
• Исправить и перемерить в лаборатории (Lighthouse, PageSpeed Insights).
• Дождаться обновления полевых данных и только потом оценивать итог.

Когда стоит подключить специалистов

Часть правок делается за час: формат картинки, отключение ленивой загрузки, приоритет. Но если проблема в шаблоне CMS, хостинге или архитектуре скриптов, без разработчика и SEO-специалиста не обойтись. Команда markdev занимается SEO-оптимизацией сайтов в Узбекистане, включая техническую часть и Core Web Vitals. Если хотите понять, что именно тормозит ваш первый экран, расскажите о сайте — обсудим задачу и предложим порядок работ.