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

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

Три метрики простими словами

LCP — коли з'явився головний вміст

Час до промальовування найбільшого елемента: зазвичай це головне зображення товару або перший великий блок тексту. Орієнтир — до 2,5 секунди. Найчастіші причини поганого LCP: повільна відповідь сервера, важке невідоптимізоване зображення, шрифти й стилі, що блокують рендер.

INP — наскільки сторінка чуйна

Метрика, що замінила стару FID. Вимірює затримку між дією користувача й реакцією інтерфейсу — натиснули «додати в кошик», а лічильник оновився за секунду. Орієнтир — до 200 мілісекунд. Головний винуватець — важкий JavaScript, зокрема сторонні скрипти аналітики й чатів.

CLS — чи стрибає верстка

Наскільки елементи зміщуються під час завантаження. Класика: ви цілитесь у кнопку, у цей момент довантажується банер, і ви натискаєте зовсім не те. Орієнтир — не більше 0,1. Причини майже завжди однакові: зображення без указаних розмірів, банери, що вантажаться пізніше, і шрифти, які підміняються після рендеру.

Де брати дані

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

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

Що дає найбільший ефект

• Прискорення відповіді сервера. Якщо сервер думає секунду, у LCP уже не вкластись — жодна оптимізація картинок цього не компенсує.
• Робота із зображеннями: сучасні формати, правильні розміри, пріоритет завантаження для головного зображення й відкладення решти.
• Явні розміри для всіх зображень і банерів — найдешевший спосіб прибрати стрибки верстки.
• Ревізія сторонніх скриптів. Зазвичай два-три з них дають більшу частину затримки реакції.
• Робота зі шрифтами: попереднє завантаження й коректна поведінка під час підміни.

Чого очікувати

Метрики оновлюються не миттєво: польові дані накопичуються тижнями, тому результат зміни видно не наступного дня. І варто розуміти межу — Core Web Vitals це фактор ранжування, але не головний. Сторінка з ідеальними показниками й слабким змістом не обійде корисну сторінку з посередніми.

Практична робота над метриками — це оптимізація Core Web Vitals. Якщо коренева причина в часі відповіді, спершу потрібна оптимізація швидкодії магазину або налаштування сервера — інакше ви шліфуєте фронтенд поверх повільного бекенду.