Core Web Vitals: LCP, INP i CLS w praktyce

Core Web Vitals opisują trzy aspekty doświadczenia na stronie: szybkość pojawienia się głównej treści, responsywność po interakcji i stabilność układu. Są użytecznymi metrykami jakości, ale nie zastępują wartościowej treści ani nie gwarantują pozycji w Google.

Jakie metryki mierzyć?

LCP (Largest Contentful Paint): czas renderowania największego istotnego elementu widocznego na początku strony. Dobry wynik to najwyżej 2,5 s.
INP (Interaction to Next Paint): responsywność strony w trakcie interakcji. Dobry wynik to najwyżej 200 ms.
CLS (Cumulative Layout Shift): wielkość nieoczekiwanych przesunięć układu. Dobry wynik to najwyżej 0,1.

Progi i definicje publikuje web.dev. W praktyce ocena dotyczy zwykle 75. percentyla doświadczeń użytkowników, a nie jednego pomiaru wykonanego na laptopie dewelopera.

Dlaczego wynik z Lighthouse może się różnić?

Lighthouse wykonuje test laboratoryjny w ustalonych warunkach. Dane terenowe, takie jak Chrome UX Report lub pomiar własnych użytkowników, obejmują różne urządzenia, sieci i zachowania. INP wymaga rzeczywistych interakcji, dlatego pojedynczy test ładowania nie pokazuje pełnego obrazu. Wyniki z laboratorium służą do diagnozy, a dane terenowe do oceny typowego doświadczenia.

Od czego zacząć poprawę?

Dla LCP sprawdź, czy największy obraz ma właściwy rozmiar, czy serwer odpowiada sprawnie i czy zasoby blokujące renderowanie są potrzebne. Dla INP przejrzyj długie zadania JavaScript oraz pracę wykonywaną po kliknięciu. Dla CLS rezerwuj miejsce na obrazy i elementy doładowywane później. Najpierw zmierz główne szablony strony osobno na urządzeniach mobilnych i desktopowych.

Ustaw priorytety według problemu użytkownika. Jeżeli strona ma dobry wynik techniczny, ale nie odpowiada na pytanie klienta, nie stanie się użyteczna przez dalsze skracanie skryptu. Z kolei dobry tekst nie usprawiedliwia formularza, który nie reaguje na telefonie.

Czy CWV wpływa na SEO i sprzedaż?

Google uwzględnia doświadczenie strony w systemach rankingowych, ale nie ma jednej „magicznej” liczby, która zapewnia widoczność. Wpływ poprawy szybkości na konwersję zależy od kontekstu i trzeba go mierzyć na własnej witrynie. Raportuj warunki testu i wynik przed oraz po zmianie.

Praktyczny kontekst wyboru technologii znajdziesz w porównaniu WordPressa i Next.js.