Что такое LCP?

LCP (Largest Contentful Paint) фиксирует момент, когда самый крупный элемент в видимой части экрана (обычно главное изображение, фото товара или крупный заголовок) полностью отрисован. Из всех показателей Core Web Vitals он лучше всего отражает ощущение пользователя о том, что «страница загрузилась».

#Почему это важно

• Посетители могут уйти до того, как увидят основной контент; каждая секунда на счету, особенно в мобильных сетях.
• LCP — одна из трех метрик в оценке удобства страниц (page experience) от Google.
• Причин медленного LCP обычно немного, и они поддаются измерению: долгий ответ сервера (TTFB), слишком тяжелые изображения, блокирующие рендеринг CSS/JS, а также поздно загружаемое главное изображение (hero image).

#Где это отображается в SEOAsist

• На карточке Core Web Vitals на странице Overview отображается LCP в секундах, отдельно для мобильных и десктопных устройств.
• SEO-анализ выявляет проблему Slow LCP, когда мобильный LCP превышает 2,5 секунды.
• Проблема Slow response (> 3 s) в разделе Health указывает на время ответа сервера, которое напрямую задерживает LCP.

Подробнее: Overview dashboard.

#Пример

Загружайте главное изображение с высоким приоритетом и не используйте для него ленивую загрузку (lazy loading):

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

<img src="/img/hero-1200.webp" width="1200" height="600"
     alt="Oak dining table collection" fetchpriority="high">

#Частые ошибки

• Добавление атрибута loading="lazy" для главного изображения, из-за чего элемент LCP загружается с задержкой.
• Отправка изображения шириной 3000 пикселей на телефоны; используйте srcset и форматы WebP/AVIF.
• Скрытие основного текста до загрузки веб-шрифта; используйте font-display: swap.
• Оптимизация только фронтенда без настройки сервера и кэширования.