LCP
Определение: LCP (Largest Contentful Paint) — это метрика, которая показывает, как быстро на странице появляется самый крупный видимый элемент в области просмотра (обычно это главный баннер, большое изображение или крупный заголовок). Чем быстрее отрисовался этот “главный” элемент, тем быстрее страница кажется пользователю загруженной.
Зачем это нужно
- Понимать реальную скорость “первого впечатления”: когда виден главный контент, пользователю спокойнее.
- Улучшать Core Web Vitals: LCP — одна из ключевых метрик скорости загрузки.
- Находить узкие места: тяжёлые изображения, медленный сервер, блокирующие стили и скрипты.
- Увеличивать конверсию: быстрый первый экран обычно снижает отказы и повышает вовлечённость.
- Контролировать качество после правок: баннеры, шрифты и виджеты часто ухудшают LCP незаметно.
Пример
Пример кода:
// Находим LCP-элемент (часто это hero-картинка) и делаем загрузку “приоритетной”
const hero = document.getElementById('heroImg');
// В реальности лучше задать это в HTML (fetchpriority), но принцип понятен
hero.setAttribute('fetchpriority', 'high');
// И обязательно фиксируем размеры, чтобы не было CLS
hero.width = 1200;
hero.height = 600;
Скриншот
Подпись к скриншоту: Lighthouse (или DevTools Performance): значение LCP и элемент, который стал “Largest Contentful”
Частые ошибки
- Ставить ленивую загрузку на изображение первого экрана, из-за чего оно появляется позже и портит LCP.
- Использовать слишком тяжёлые hero-изображения без оптимизации (WebP/AVIF), замедляя первый экран.
- Блокировать рендеринг: большие CSS/JS грузятся и выполняются до того, как показать контент.
- Не использовать кэширование и CDN для статики, из-за чего файлы долго скачиваются.
- Подключать внешние виджеты и шрифты без контроля, получая задержки на критическом пути.
Связанные термины
Наши услуги
- Доработка сайтов — найдём, что тормозит LCP, и ускорим первый экран: изображения, CSS/JS, серверные ответы.
- SEO-продвижение сайтов — улучшим техническое качество страниц и скорость, что помогает ранжированию и конверсии.
- Техническая поддержка сайта — контролируем метрики и не даём производительности ухудшаться после обновлений.