Що таке Core Web Vitals: LCP, INP і CLS і як їх вимірювати й покращувати?

Core Web Vitals - три метрики Google, що описують досвід реального користувача. Вони впливають на ранжування в пошуку й показуються в Search Console.

Оцінка - за 75-м перцентилем реальних відвідувань: сторінка «добра», якщо щонайменше 75% візитів укладаються в поріг. INP замінив FID у 2024 році: FID вимірював лише першу взаємодію й лише затримку до початку обробки.

Як вимірювати:

• польові дані (від реальних користувачів): звіт CrUX, Search Console, PageSpeed Insights, власний збір через бібліотеку web-vitals:

import { onLCP, onINP, onCLS } from 'web-vitals';

const send = (metric) => navigator.sendBeacon('/vitals', JSON.stringify(metric));
onLCP(send);
onINP(send);
onCLS(send);

• лабораторні дані: Lighthouse, вкладка Performance у DevTools - відтворювані, але не замінюють польові (інший пристрій і мережа). INP у лабораторії майже не виміряти - немає реальних взаємодій.

Типові причини й виправлення:

LCP:

• головне зображення завантажується пізно - fetchpriority="high", без loading="lazy" для першого екрана, preload;
• повільна відповідь сервера (TTFB) - кешування сторінок, CDN;
• блокуючі CSS і JavaScript - менше критичного CSS, defer для скриптів;
• шрифти, що затримують текст, - font-display: swap.

INP:

• довгі задачі в головному потоці - розбити роботу (scheduler.yield(), setTimeout), перенести обчислення у Web Worker;
• важкі обробники подій - оновити інтерфейс одразу, а повільну роботу виконати після відмальовування;
• великий DOM і дорогі перерахунки стилів;
• сторонні скрипти (аналітика, чати, реклама).

CLS:

• зображення й відео без розмірів - width/height чи aspect-ratio;
• вміст, що вставляється над наявним (банери, рекламні блоки), - зарезервувати місце;
• зміна шрифту після завантаження - size-adjust для запасного шрифту.

Для Laravel-сайту: Vite з розділенням коду, атрибути fetchpriority, width, height у Blade-компонентах зображень, Livewire wire:navigate для швидких переходів і кешування HTML на краю мережі для гостей.

Докладніше в документації: web.dev: Web Vitals