Core Web Vitals opisują trzy różne aspekty doświadczenia użytkownika: szybkość pojawienia się głównej treści, responsywność interakcji i stabilność układu. Jeden słaby wynik nie mówi jeszcze, co trzeba poprawić.
W skrócie
LCP zwykle prowadzi do analizy serwera, zasobu hero i ścieżki renderowania. INP kieruje uwagę na JavaScript i długie zadania po interakcji. CLS wskazuje elementy, które zmieniają pozycję już po rozpoczęciu wyświetlania strony.
LCP: kiedy najważniejszy element pojawia się za późno
Largest Contentful Paint często dotyczy dużego obrazu, nagłówka lub bloku tekstu widocznego na pierwszym ekranie. Przyczyna może leżeć w wolnym TTFB, zbyt późnym odkryciu zasobu, ciężkim obrazie, blokującym CSS albo renderowaniu po stronie JavaScript.
- sprawdź czas odpowiedzi serwera
- zidentyfikuj element LCP
- upewnij się, że jego zasób jest szybko odkrywany
- zoptymalizuj format i rozmiar obrazu
- ogranicz zasoby blokujące renderowanie
INP: strona jest widoczna, ale reaguje z opóźnieniem
Interaction to Next Paint mierzy opóźnienie reakcji interfejsu na interakcje użytkownika. Problem często pojawia się, gdy główny wątek jest zajęty długimi zadaniami JavaScript albo obsługa kliknięcia uruchamia zbyt dużo pracy naraz.
CLS: elementy przesuwają się podczas korzystania ze strony
Cumulative Layout Shift rośnie, gdy elementy zmieniają pozycję bez działania użytkownika. Typowe przyczyny to obrazy bez zarezerwowanych wymiarów, późno doładowywane banery, fonty lub treści wstawiane nad już widocznym obszarem.
Dane laboratoryjne i dane użytkowników pełnią różne role
Test laboratoryjny ułatwia powtarzalną diagnozę. Dane terenowe pokazują, czego doświadczają prawdziwi użytkownicy na różnych urządzeniach i łączach. Przy większych serwisach warto korzystać z obu perspektyw.
Nie optymalizuj tylko po to, aby zobaczyć zielony kolor
Najlepsze poprawki jednocześnie skracają czas oczekiwania, zmniejszają ciężar strony i upraszczają interfejs. Jeśli zmiana podnosi pojedynczy wynik, ale pogarsza funkcjonalność lub konwersję, trzeba ocenić ją szerzej.
Najważniejszy wniosek
Najpierw ustal, który element lub interakcja odpowiada za słaby wskaźnik. Dopiero potem optymalizuj — nie odwrotnie.
Źródło do dalszej weryfikacji: web.dev – Core Web Vitals.