Core Web Vitals: LCP, INP i CLS bez mitów

Co naprawdę mierzą trzy metryki Google, dlaczego dane laboratoryjne rozjeżdżają się z terenowymi i które poprawki faktycznie coś dają.

Wydajność · Opublikowano: 18 sierpnia 2026 · Zaktualizowano: 26 sierpnia 2026 · 3 min czytania · Анна Ковалёва

Core Web Vitals to trzy liczby, które Google zbiera od prawdziwych użytkowników. Bywają mylone z „wynikiem Lighthouse”, a to co innego: Lighthouse to przebieg laboratoryjny w sterylnych warunkach, Vitals pochodzą z terenu — od ludzi z wolnym 4G i trzyletnim telefonem.

LCP — moment, w którym widać treść

Largest Contentful Paint zapisuje wyrenderowanie największego elementu w widocznym obszarze: zwykle bannera, okładki artykułu albo nagłówka H1. Próg to 2,5 sekundy dla 75. percentyla.

Najczęstsze przyczyny wolnego LCP:

1. Obraz hero ładuje się jako jeden z ostatnich. Pomaga fetchpriority="high" na obrazie LCP i preload fontu nagłówka.
2. Wolna odpowiedź serwera. Przy TTFB powyżej 600 ms optymalizacja frontendu nie ma sensu — najpierw cache i baza.
3. Blokujący CSS. Jeden @import wewnątrz zewnętrznego pliku dokłada pełną rundę sieciową.
4. Renderowanie po stronie klienta. Jeśli element LCP pojawia się dopiero po hydratacji, dochodzi czas pobrania i parsowania JS.

INP — cena interaktywności

Interaction to Next Paint zastąpił FID w 2024 roku i jest znacznie surowszy. Bierze nie pierwszą interakcję, lecz praktycznie najgorszą w sesji: od kliknięcia do następnego renderu. Próg to 200 ms.

Główny winowajca to długie zadania w głównym wątku. Handler, który synchronicznie przelicza koszyk, filtruje listę 5 000 pozycji albo wywołuje getBoundingClientRect w pętli, potrafi zająć wątek na 400 ms. Trzy lekarstwa: podziel pracę przez scheduler.yield(), zdejmij analitykę i skrypty firm trzecich ze ścieżki krytycznej, a ciężkie obliczenia przenieś do Web Workera.

CLS — układ, który nie skacze

Cumulative Layout Shift sumuje nieplanowane przesunięcia treści. Próg to 0,1. Przyczyny są niemal zawsze te same:

• obrazy i iframe bez width/height lub aspect-ratio;
• bannery i panele cookie wstrzykiwane do układu po załadowaniu;
• web fonty bez font-display: optional lub bez dopasowanych metryk fontu zastępczego.

Laboratorium kontra teren

Przebieg laboratoryjny jest deterministyczny i świetnie nadaje się do wykrywania regresji w CI. Dane terenowe (CrUX, własny RUM) pokazują rzeczywistość, ale z 28-dniowym opóźnieniem. Sensowny układ: mierzyć oba źródła i badać tylko te regresje laboratoryjne, które potwierdza teren.

Kolejność prac, która się opłaca

Najpierw zmierz rozkład, nie średnią: p75 i p95 według typów stron. Potem znajdź jeden szablon z najgorszymi wynikami — zwykle kartę produktu albo wyszukiwarkę — i napraw go w całości. Poprawki rozsmarowane po całym serwisie prawie nigdy nie ruszają p75.

I sprawdzaj efekt na urządzeniu, nie na swoim laptopie: różnica INP między MacBookiem a budżetowym Androidem sięga pięciu razy.