Core Web Vitals: що це таке і як їх покращити

Core Web Vitals — це набір метрик, розроблених Google, які вимірюють реальний користувацький досвід на сайті: як швидко він завантажується, наскільки добре реагує на взаємодію та чи залишається макет стабільним. Ці показники впливають не лише на задоволеність відвідувачів, але й на позиції сайту в пошуку Google, оскільки є частиною сигналів ранжування. Існує три основні метрики: LCP, INP та CLS.

LCP — відмалювання найбільшого контенту

Largest Contentful Paint вимірює час, коли у видимій області відмальовується найбільший змістовий елемент — зазвичай головне зображення або блок заголовка. Це відображає, як швидко користувач бачить основний контент сторінки. Хороший показник LCP — 2,5 секунди або менше.

Щоб покращити LCP, оптимізуйте зображення за допомогою сучасних форматів, таких як WebP або AVIF, та вказуйте їх розміри. Використовуйте мережу доставки контенту (CDN), впровадьте кешування та скоротіть час відповіді сервера. Завантажуйте критичні ресурси з пріоритетом, а другорядні скрипти відкладайте.

INP — чутливість до взаємодії

Interaction to Next Paint у 2024 році замінила попередню метрику FID (First Input Delay). INP вимірює, наскільки швидко сторінка візуально реагує на дії користувача — кліки, дотики та натискання клавіш — протягом усього візиту. Хороший INP — менше 200 мілісекунд.

Головний ворог INP — важкий JavaScript, що блокує основний потік. Розбивайте довгі завдання на менші, відкладайте некритичний код, скорочуйте кількість сторонніх скриптів та використовуйте веб-воркери для складних обчислень. Чим менше роботи браузеру потрібно виконати в момент взаємодії, тим швидшою буде відповідь.

CLS — сукупне зміщення макета

Cumulative Layout Shift вимірює візуальну стабільність — наскільки сильно елементи несподівано зміщуються під час завантаження сторінки. Кожен стикався із ситуацією, коли збираєшся натиснути кнопку, але реклама чи зображення раптово зсувають контент. Хороший показник CLS — 0,1 або менше.

Щоб запобігти зміщенням, завжди вказуйте розміри зображень та відео (width і height), резервуйте місце для реклами та вбудованого контенту й уникайте вставки контенту над уже видимими елементами. Завантажуйте шрифти так, щоб вони не спричиняли переформатування тексту.

Як вимірювати та покращувати

Існує два типи даних: лабораторні (lab data) та польові (field data). Lighthouse та PageSpeed Insights дають лабораторні вимірювання в контрольованому середовищі, а Chrome User Experience Report (CrUX) збирає дані реальних користувачів. Google використовує для ранжування саме польові дані, тому довіряйте показникам CrUX.

Почніть з PageSpeed Insights, який поєднує обидва типи даних та надає конкретні рекомендації. Розділ «Core Web Vitals» у Search Console показує проблеми по всьому сайту. Практичний порядок покращень: оптимізуйте зображення, мініфікуйте та відкладайте JavaScript, впровадьте кешування й CDN, а також стабілізуйте макет. Вимірюйте після кожної зміни, адже оптимізація — це безперервний процес.