LCP

Определение простыми словами

LCP отвечает на вопрос «когда пользователь увидел главное». Браузер отслеживает все блоки в первом экране и фиксирует время отрисовки самого крупного — обычно это hero-фото, заголовок H1, обложка статьи или большой баннер. Чем быстрее этот элемент попадает в кадр, тем быстрее ощущается сайт.

Метрика входит в Core Web Vitals и учитывается алгоритмами Google. Полевые данные собираются у реальных пользователей в Chrome User Experience Report и попадают в Search Console.

Сравнение

Кейсы использования

• Аудит мобильной выдачи: смотрят LCP в Search Console, фильтруют URL, выпавшие из «Хорошо», и работают по списку.
• Оптимизация hero-секции: главную картинку конвертируют в WebP, добавляют атрибут fetchpriority="high" и preload.
• Снижение LCP за счёт TTFB: подключают страничный кеш, переезд на быстрый VPS возле аудитории.
• Негативный кейс: LCP-элемент скрывают через CSS, чтобы «обмануть» метрику — Google переключается на следующий крупный блок и ситуация не улучшается.
• Негативный кейс: ленивая загрузка применена к изображению первого экрана — браузер откладывает загрузку и LCP уходит за 5 секунд.

Технические детали

# Performance API: получить LCP в браузере
new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const last = entries[entries.length - 1];
  console.log('LCP:', last.renderTime || last.loadTime);
}).observe({type: 'largest-contentful-paint', buffered: true});

# Lighthouse CLI с фокусом на LCP
lighthouse https://example.com --only-audits=largest-contentful-paint

# Preload главного изображения в HTML
# 

# Web Vitals JS-библиотека для RUM
npm install web-vitals && import {onLCP} from 'web-vitals'

Частые вопросы