Core Web Vitals (LCP/INP/CLS) — co to jest i jak poprawić wyniki
Praktyczny przewodnik: jak mierzyć LCP/INP/CLS i co realnie poprawia wyniki w Next.js oraz na stronach firmowych.
Core Web Vitals to zestaw metryk, które wprost opisują odczucia użytkownika: szybkość pierwszego wrażenia, responsywność i stabilność layoutu.
Jeśli celujesz w TOP-y, CWV jest Twoją “techniczną higieną”. Nie zastąpi treści i autorytetu, ale potrafi zablokować wzrost, gdy strona jest ciężka lub skacze.
1) LCP — największy element nad “foldem”
- Optymalizuj hero i obraz LCP (format AVIF/WebP, poprawne sizes).
- Unikaj preloaderów zasłaniających treść.
- Minimalizuj render-blocking CSS/JS (mniej client components).
Najczęstsze przyczyny słabego LCP
- Za duże obrazy w hero (brak sizes/wymiary).
- Za dużo JS w pierwszym renderze.
- Zewnętrzne skrypty ładujące się przed treścią.
2) INP — czas reakcji na interakcję
- Ogranicz ciężkie animacje i globalne listenery.
- Dziel komponenty i przenoś logikę do Server Components.
- Uważaj na duże listy i kosztowne re-rendery.
Jak poprawiać INP praktycznie
- Usuń animacje nie wnoszące wartości (albo warunkuj je mobile/reduced-motion).
- Unikaj ogromnych komponentów klienta na całej stronie.
- Dbaj o szybkie event handlers i ogranicz setState w pętlach.
3) CLS — skakanie layoutu
- Zawsze rezerwuj miejsce na obrazy i komponenty dynamiczne.
- Nie wstrzykuj treści nad fold bez wysokości minimalnej.
- Fonty: preload + swap, a najlepiej dopasowane fallbacki.
CLS w realnych projektach
- Najczęściej winny jest hero (grafiki), karuzele, lazy komponenty i fonty.
- Rezerwuj wysokość sekcji/komponentów, zanim dane się pojawią.
- Nie doklejaj elementów nad fold po załadowaniu (cookie bar bez miejsca = CLS).
Snippet do Featured Snippet
- LCP = czas załadowania największego elementu nad foldem.
- INP = opóźnienie reakcji na kliknięcia i wpisywanie.
- CLS = stabilność layoutu bez przeskoków.