Що Таке Largest Contentful Paint (LCP): Просте Пояснення

Розберемо Largest Contentful Paint (LCP): що це таке, як його вимірюють, і як оптимізувати для покращення показників Core Web Vitals.

Largest Contentful Paint (LCP) — це один із показників користувацького досвіду від Google, який став частиною алгоритмів ранжування у 2021 році.

LCP входить до трійки ключових метрик Core Web Vitals (CWV), що відстежують технічні параметри, які впливають на взаємодію користувачів із сайтом.

Core Web Vitals існують у своєрідному парадоксі: Google одночасно підкреслює їх важливість, але й знижує їх вплив на ранжування.

Як і інші показники CWV, LCP корисний для діагностики технічних проблем і забезпечення належного рівня функціональності вашого сайту для користувачів.

Що Таке Largest Contentful Paint (LCP)?

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

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

Елементи, які зазвичай вимірюються, включають зображення, відео, фонові зображення та текстові блоки, такі як абзаци.

LCP складається з кількох підметрик:

• Час до першого байта (TTFB)
• Затримка завантаження ресурсів
• Тривалість завантаження ресурсів
• Затримка рендерингу елементів

Оптимізація LCP передбачає покращення кожної з цих підметрик, щоб сторінка завантажувалася і відображала необхідні ресурси менш ніж за 2,5 секунди.

Порогові значення LCP:

Давайте детальніше розглянемо ці підметрики та способи їх покращення.

Час до Першого Байта (TTFB)

TTFB — це час відповіді сервера, який вимірює, скільки часу потрібно браузеру користувача, щоб отримати перший байт даних із вашого сервера. Це включає час на DNS-запит, обробку запитів сервером і перенаправлення.

Оптимізація TTFB може значно зменшити загальний час завантаження та покращити показник LCP.

На час відповіді сервера впливають такі фактори:

1. Запити до бази даних

Якщо ваш час відповіді високий, варто визначити джерело проблеми. Це може бути через погано оптимізовані запити або великий обсяг запитів, які сповільнюють сервер. Якщо у вас MySQL-база даних, можна вести лог повільних запитів , щоб знайти ті, що займають найбільше часу.

Якщо ваш сайт на WordPress, ви можете скористатися плагіном Query Monitor , щоб побачити, скільки часу займають SQL-запити.

2. Кеш-пропуски CDN

Пропуск кешу CDN відбувається, коли запитаний ресурс не знайдено в кеші CDN, і запит перенаправляється на сервер-джерело. Це займає більше часу, що призводить до збільшення затримки та довшого часу завантаження для кінцевого користувача.

Зазвичай ваш провайдер CDN надає звіт про кількість кеш-пропусків.

Якщо ви спостерігаєте високий відсоток (>10%) кеш-пропусків, можливо, варто звернутися до провайдера CDN або підтримки хостингу, щоб вирішити проблему.

Ось реальний приклад із пошукової консолі високого часу відповіді сервера (TTFB), спричиненого пропусками кешу:

3. Неефективний серверний рендеринг

На вашому сайті можуть бути компоненти, які залежать від API сторонніх сервісів. Наприклад, ви бачите кількість прочитань і поділів на статтях. Ми отримуємо ці дані з різних API, але замість того, щоб робити це під час кожного запиту до сервера, ми заздалегідь отримуємо їх і зберігаємо у нашій базі даних для швидшого відображення.

Уявіть собі, що ми підключаємося до підрахунку спільних ресурсів і API GA4, коли надходить запит до сервера. Виконання кожного запиту займає приблизно 300-500 мс, і ми б додали приблизно ~1000 мс затримки через неефективне відтворення на стороні сервера. Отже, переконайтеся, що ваш сервер оптимізовано.

4. Хостинг

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

Оберіть хостинг з інтегрованим CDN та кешуванням. Це допоможе уникнути необхідності купувати CDN окремо та заощадити час на його обслуговування.

Інвестування у правильний хостинг окупиться сповна.

Затримка Завантаження Ресурсу

Затримка завантаження ресурсу — це час, необхідний браузеру для знаходження і початку завантаження LCP-ресурсу.

Наприклад, якщо у вас є фонове зображення в головному блоці, яке потребує завантаження CSS-файлів для ідентифікації, виникає затримка, рівна часу, необхідному для завантаження CSS-файлу, щоб почати завантаження LCP-зображення.

У випадку, коли LCP-елементом є текстовий блок, ця затримка дорівнює нулю.

Оптимізуючи швидкість знаходження і завантаження цих ресурсів, можна прискорити відображення важливого контенту. Один зі способів зробити це — попередньо завантажити CSS-файли і LCP-зображення, встановивши для зображення fetchpriority="high", щоб CSS-файл завантажувався першочергово.

Проте кращий підхід — якщо у вас є достатньо контролю над сайтом — це вбудувати критичний CSS для контенту, що знаходиться у верхній частині сторінки, щоб браузер не витрачав час на завантаження CSS-файлу. Це дозволяє зекономити трафік і попередньо завантажувати лише зображення.

Ще краще — уникати використання героїчних зображень або слайдерів, оскільки вони часто не додають цінності , і користувачі зазвичай швидко прокручують сторінку повз них, бо вони відволікають.

Ще одним фактором, що сприяє затримці завантаження, є перенаправлення .

Якщо у вас є зовнішні посилання з перенаправленнями, змінити це важко. Але ви маєте контроль над внутрішніми посиланнями, тому знайдіть внутрішні посилання з перенаправленнями, які часто виникають через відсутні слеші, неправильні версії (WWW або без WWW) чи змінені URL, і замініть їх на правильні адреси.

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

Тривалість Завантаження Ресурсу

Тривалість завантаження ресурсу — це фактичний час, витрачений на завантаження LCP-ресурсу.

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

Щоб зменшити тривалість завантаження, можна застосувати:

• Формат WebP.
• Правильний розмір зображень (встановити відповідність внутрішнього та видимого розмірів).
• Пріоритизацію завантаження.
• Використання CDN.

Затримка Відображення Елемента

Затримка відображення елемента — це час, який потрібен браузеру для обробки та рендерингу LCP-елемента.

На цю метрику впливає складність HTML, CSS і JavaScript.

Зменшення блокуючих ресурсів рендерингу і оптимізація коду допоможуть скоротити цю затримку. Однак, якщо на сторінці працюють важкі JavaScript-скрипти, які блокують головний потік, відображення LCP-елемента може бути відкладено, доки ці завдання не завершаться.

Тут важливі низькі значення метрики Загальний Час Блокування (TBT), яка вимірює час, протягом якого головний потік блокується довгими завданнями під час завантаження сторінки, що вказує на наявність важких скриптів, які можуть затримувати рендеринг і реагування.

Один зі способів покращити не тільки тривалість і затримку завантаження, а й усі показники CWV під час навігації користувачів по вашому сайту — реалізувати API спекулятивних правил для майбутніх переходів. Завдяки попередньому рендерингу сторінок, на які користувачі, ймовірно, перейдуть під час наведення курсору на посилання, ви зможете зробити завантаження сторінок миттєвим.

Уникайте Помилок при Оцінюванні LCP

Усі елементи, що знаходяться на екрані користувача (в межах видимої області), використовуються для обчислення LCP. Це означає, що зображення, які спочатку відображаються поза екраном, а потім переміщуються в макет, можуть не враховуватися у підрахунку Largest Contentful Paint.

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

Як Виміряти Показник LCP

Існує два види інструментів для оцінювання LCP: польові ( Field Tools ) та лабораторні ( Lab Tools ).

Польові інструменти надають реальні вимірювання сайту під час використання.

Лабораторні інструменти дають віртуальний показник, базуючись на змодельованому аналізі з використанням алгоритмів, які імітують умови Інтернету, з якими може стикатися типовий користувач мобільного пристрою.

Щоб знайти ресурси LCP та виміряти час їх відображення, ви можете скористатися DevTools > Performance report.

Оптимізація LCP — Більш Складне Питання

Покращення LCP — це важливий крок до покращення CWV, але це може бути найскладнішою метрикою для оптимізації.

LCP складається з багатьох підметрик, кожна з яких потребує глибокого розуміння для ефективної оптимізації.

Цей гід дав вам базове уявлення про покращення LCP, а здобуті знання допоможуть вам зробити значні покращення.

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