Core Web Vitals: trzy liczby, które mierzy Google

Core Web Vitals to potwierdzony sygnał rankingowy, a co ważniejsze — czynnik konwersji. Aktualna trójka:

• LCP (Largest Contentful Paint) — główna treść widoczna w < 2,5 s. Naprawa: statyka/ISR, priority na obrazku hero, minimum blokującego CSS, szybki TTFB (patrz strategia renderowania).
• INP (Interaction to Next Paint) — zastąpił FID w marcu 2024; każda interakcja powinna odpowiadać w < 200 ms. Naprawa: mniej i leniwiej ładowane skrypty zewnętrzne, mniejsze bundle klienckie ("use client" tylko tam, gdzie trzeba), dzielenie długich zadań.
• CLS (Cumulative Layout Shift) — < 0,1. Naprawa: wymiary na wszystkich obrazkach/embedach, zarezerwowane miejsce na banery, next/font (bez skoków przy podmianie fontu).

Mierz na dwa sposoby:

• Laboratoryjnie: Lighthouse w CI (np. @lhci/cli na każdym PR) łapie regresje przed deployem.
• W terenie: dane realnych użytkowników to to, na czym Google faktycznie rankuje. Podpinasz jednym hookiem:

// app/web-vitals.tsx
"use client";
import { useReportWebVitals } from "next/web-vitals";

export function WebVitals() {
  useReportWebVitals((metric) => {
    // wysyłamy do własnej analityki
    navigator.sendBeacon("/api/vitals", JSON.stringify(metric));
  });
  return null;
}

Dane terenowe sprawdzisz w Search Console → Core Web Vitals lub w PageSpeed Insights (pokazuje CrUX, gdy jest dość danych).

Checklista:

• LCP < 2,5 s, INP < 200 ms, CLS < 0,1 w danych terenowych, nie tylko w Lighthouse
• Lighthouse CI lub odpowiednik pilnuje regresji
• useReportWebVitals zasila analitykę metrykami realnych użytkowników
• Mobile sprawdzony osobno — to tam wykłada się większość witryn