LCP (Largest Contentful Paint)

LCP (Largest Contentful Paint) — це показник швидкості завантаження, який фіксує момент відображення найбільшого придатного елемента контенту у видимій частині сторінки. Найчастіше ним стає hero-зображення, великий заголовок, текстовий блок або poster відео.

LCP входить до Core Web Vitals і наближено відповідає на запитання: коли користувач побачив основний зміст першого екрана? Це не час повного завантаження сторінки й не момент, коли завершилися всі мережеві запити.

Актуальні пороги

• добре: до 2,5 секунди включно;
• потребує покращення: понад 2,5 до 4 секунд включно;
• погано: понад 4 секунди.

Для оцінки сайту орієнтуються на 75-й перцентиль реальних візитів, окремо для mobile і desktop. Це означає, що щонайменше 75% виміряних завантажень мають вкладатися в ціль.

Що входить у час LCP

Відлік починається з навігації й охоплює redirect, встановлення з’єднання, Time to First Byte, завантаження ресурсу та його рендеринг. Тому оптимізація лише розміру hero-зображення не допоможе, якщо сервер відповідає повільно або браузер пізно дізнається про ресурс.

Який елемент стає LCP

Браузер розглядає великі текстові блоки, зображення, poster відео та деякі фонові зображення. Кандидат може змінюватися під час завантаження: спочатку ним є заголовок, а після появи великого фото — фото. Остаточний LCP фіксується до взаємодії або завершення спостереження.

Практичний приклад

Сайт туристичного оператора швидко показує меню й заголовок, але hero-фото вагою 2,8 МБ завантажується через JavaScript після слайдера. Саме фото стає LCP на 5,1 секунди. Зменшення другорядних іконок майже не вплине; потрібно змінити формат і розмір hero, пріоритет завантаження та спосіб його виявлення браузером.

Чотири складові затримки

• TTFB — очікування першого байта HTML;
• resource load delay — час до початку завантаження LCP-ресурсу;
• resource load duration — тривалість його завантаження;
• element render delay — затримка між отриманням ресурсу та відображенням.

Такий розклад допомагає знайти реальне вузьке місце, а не застосовувати універсальний список оптимізацій.

Як покращити LCP

• скоротити TTFB через кешування, CDN і оптимізацію backend;
• віддавати правильно стиснене адаптивне зображення;
• не застосовувати lazy loading до LCP-елемента;
• дати браузеру рано виявити ресурс у HTML;
• за потреби використати fetchpriority="high" або preload;
• зменшити render-blocking CSS і JavaScript;
• оптимізувати web fonts і критичний CSS.

Field data і lab data

Chrome UX Report і звіт Core Web Vitals у Search Console відображають агреговані дані реальних користувачів. Lighthouse створює лабораторний тест у контрольованих умовах. Lab зручний для діагностики й regression testing, але один хороший прогін не доводить, що польовий 75-й перцентиль уже став добрим.

LCP і SEO

Core Web Vitals є частиною page experience, але LCP не переважує релевантність, корисність і якість контенту. Оптимізація має сенс насамперед як покращення досвіду та конверсії. Не варто погіршувати зміст або прибирати важливе зображення лише заради механічного бала.

Типові помилки

• вимірювати лише домашню сторінку;
• орієнтуватися на середнє замість 75-го перцентиля;
• змішувати mobile і desktop;
• вмикати lazy loading для hero;
• оптимізувати не той елемент;
• плутати LCP з повним завантаженням;
• очікувати миттєвого оновлення CrUX після релізу.

Професорська та директорська перевірка

LCP є операціоналізацією сприйнятої швидкості основного контенту, а не повною моделлю продуктивності. Для директора важливо сегментувати показник за шаблоном, пристроєм, географією й бізнес-сторінкою та пов’язувати зміни з engagement і conversion, не обіцяючи гарантованого приросту позицій.

Пов’язані поняття

Core Web Vitals · CLS · INP · TTFB · CrUX · Lighthouse · Page experience · Critical rendering path

Висновок

LCP показує, як швидко користувач бачить головний елемент першого екрана. Стійке покращення потребує роботи з усім шляхом — від відповіді сервера й раннього виявлення ресурсу до його завантаження та рендерингу.

Джерело

web.dev: Largest Contentful Paint