🔴 LCP у Core Web Vitals

Сьогодні вся увага на LCP – продовжуємо серію публікацій про Core Web Vitals.

🟢 Зелена зона: до 2.5 секунд
🟡 Жовта зона: від 2.5 секунд до 4 секунд
🔴 Червона зона: понад 4 секунди

LCP (Largest Contentful Paint) – Швидкість завантаження основного контенту, який займає більшу частину першого екрану сторінки і є контрастним до фону. Оскільки ми говоримо про Core Web Vitals, то слід враховувати, який елемент сторінки є LCP-елементом, тому що завантаження відбувається з різних пристроїв із різною роздільною здатністю екрана, і десь на перший екран може потрапляти більше контенту, тож, природно, що елементи можуть бути різними.

Окрім того, для різних сторінок LCP-елемент також може бути різним. Десь вставлено невелике зображення і LCP-елементом може бути великий заголовок, а десь навпаки – невеликий заголовок, але велике зображення, і вже зображення є LCP-елементом.

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

Так ось, якщо ми розуміємо, що є проблема з LCP, нам потрібно насамперед зрозуміти, який елемент є LCP-елементом. Для цього можна використовувати звіти Lighthouse, або Google Pagespeed Insights, який до речі теж працює на Lighthouse. І вже після цього приймати рішення, що робити.

тиць
pagespeed.web.dev

Додати коментар