Core Web Vitals – co to jest i jak poprawić LCP, INP oraz CLS?

Core Web Vitals pokazują, jak szybko strona wyświetla główną treść, jak sprawnie reaguje na działania użytkownika i czy jej układ pozostaje stabilny. Google opisuje te trzy obszary za pomocą wskaźników LCP, INP i CLS. Każdy z nich ma osobny próg, sposób pomiaru i zestaw możliwych przyczyn słabego wyniku.

Sam wynik nie mówi jeszcze, co należy naprawić. Trzeba najpierw odróżnić dane z wizyt prawdziwych użytkowników od testu laboratoryjnego, znaleźć element odpowiedzialny za problem, a dopiero później zmienić obrazy, kod JavaScript, serwer lub układ strony.

Spis treści

• Co to są Core Web Vitals?
• Jakie są progi LCP, INP i CLS?
• Jak sprawdzić Core Web Vitals swojej strony?
• Jak poprawić LCP?
• Jak poprawić INP?
• Jak poprawić CLS?
• Czy Core Web Vitals wpływają na pozycję w Google?
• Najczęstsze pytania

Co to są Core Web Vitals?

Core Web Vitals to trzy wskaźniki służące do oceny ważnych elementów doświadczenia użytkownika: szybkości wczytania głównej treści, responsywności i stabilności wizualnej. Google wykorzystuje je w swoich systemach rankingowych, ale dobry wynik nie gwarantuje wysokiej pozycji.

Trzy wskaźniki to:

• LCP (Largest Contentful Paint) – czas od rozpoczęcia wczytywania do wyrenderowania największego obrazu lub bloku tekstu widocznego w obszarze przeglądarki.
• INP (Interaction to Next Paint) – responsywność strony podczas kliknięć, dotknięć i obsługi klawiatury, obserwowana przez całą wizytę.
• CLS (Cumulative Layout Shift) – stabilność wizualna wyrażona wynikiem nieoczekiwanych przesunięć układu.

INP zastąpił FID (First Input Delay) w zestawie Core Web Vitals w marcu 2024 roku. FID uwzględniał opóźnienie pierwszej interakcji. INP obejmuje interakcje podczas całej wizyty i bierze pod uwagę także czas obsługi zdarzenia oraz wyświetlenia kolejnej klatki.

Jakie są progi LCP, INP i CLS?

Google klasyfikuje każdy wskaźnik jako dobry, wymagający poprawy albo słaby. Aktualne wartości graniczne są następujące:

Ocena opiera się na 75. percentylu wizyt. Oznacza to, że aby dany wskaźnik otrzymał ocenę „dobry”, co najmniej 75% wizyt musi mieścić się w zielonym progu. W raporcie Search Console status grupy podobnych adresów URL wyznacza jej najsłabszy wskaźnik.

Jak sprawdzić Core Web Vitals swojej strony?

Zacznij od PageSpeed Insights. Narzędzie pokazuje dwa rodzaje danych, które odpowiadają na inne pytania:

• Dane terenowe (field data, CrUX) – zagregowane pomiary wizyt użytkowników Chrome z ostatnich 28 dni. Pokazują rzeczywiste doświadczenia i służą do oceny Core Web Vitals.
• Dane laboratoryjne (lab data, Lighthouse) – test wykonany w kontrolowanych warunkach. Pomaga znaleźć przyczynę problemu, ale nie musi odtwarzać urządzeń, sieci i zachowań użytkowników.

Jeśli dla konkretnego adresu URL brakuje wystarczającej ilości danych terenowych, PageSpeed Insights może pokazać dane dla całej domeny albo tylko test laboratoryjny.

Następnie sprawdź raport „Podstawowe wskaźniki internetowe” w Google Search Console. Grupuje on adresy o podobnym sposobie działania. Dzięki temu można ustalić, czy problem obejmuje na przykład szablon kart produktów, czy pojedynczy typ strony. Do analizy konkretnego przypadku użyj PageSpeed Insights i panelu Performance w Chrome DevTools.

Jak poprawić LCP?

Najpierw ustal w PageSpeed Insights lub DevTools, który element jest LCP. Dopiero wtedy sprawdź, czy czas traci się na odpowiedź serwera, wykrycie zasobu, jego pobranie czy renderowanie.

Skuteczne działania:

1. Dopasuj wymiary obrazu LCP, skompresuj go i rozważ format WebP lub AVIF.
2. Umieść zasób LCP w początkowym HTML i nie stosuj dla niego loading="lazy". Dla głównego obrazu można użyć fetchpriority="high"; preload przydaje się zwłaszcza wtedy, gdy przeglądarka nie może wcześnie odkryć zasobu.
3. Skróć czas odpowiedzi serwera (TTFB) przez lepszy hosting, pamięć podręczną lub CDN.
4. Usuń lub odłóż w czasie skrypty i style, które nie są potrzebne do wyświetlenia pierwszego ekranu.
5. Jeśli elementem LCP jest tekst korzystający z fontu webowego, zoptymalizuj ładowanie czcionki i sprawdź, czy preload rzeczywiście skraca czas renderowania.

Jak poprawić INP?

Słaby INP oznacza, że po interakcji przeglądarka zbyt długo czeka na możliwość obsługi zdarzenia, wykonuje zbyt dużo pracy albo z opóźnieniem wyświetla następną klatkę. Częstą przyczyną są długie zadania JavaScript na głównym wątku, w tym kod zewnętrznych czatów, analityki i widżetów.

Skuteczne działania:

• Ogranicz kod wykonywany przy starcie strony i ładuj funkcje dopiero wtedy, gdy są potrzebne.
• Odłóż w czasie skrypty zewnętrzne, które nie są potrzebne od razu po wczytaniu strony.
• Ogranicz liczbę wtyczek i integracji do tych, które realnie przynoszą wartość.
• W obsłudze zdarzeń wykonuj tylko pracę potrzebną do szybkiej aktualizacji interfejsu. Dłuższe zadania dziel na mniejsze i oddawaj sterowanie głównemu wątkowi, na przykład przez scheduler.yield() lub setTimeout.
• Nagraj wolną interakcję w panelu Performance w DevTools i sprawdź opóźnienie wejścia, czas obsługi zdarzenia oraz opóźnienie prezentacji. Lighthouse nie mierzy INP bez prawdziwej interakcji, dlatego w teście laboratoryjnym używa innych metryk diagnostycznych.

Jak poprawić CLS?

Niestabilny układ strony to zwykle efekt obrazów i reklam bez zarezerwowanego miejsca, czcionek zmieniających rozmiar tekstu po wczytaniu oraz treści wstawianych dynamicznie nad już widocznym contentem, np. banerów cookies.

Skuteczne działania:

• Ustaw atrybuty width i height (lub aspect-ratio w CSS) dla każdego obrazu i wideo.
• Zarezerwuj stałe miejsce na reklamy, osadzone widżety i elementy ładowane asynchronicznie.
• Dopasuj metryki fontu zastępczego do fontu webowego i przetestuj strategię font-display; sam preload nie gwarantuje braku przesunięć tekstu.
• Unikaj wstawiania nowych elementów nad treścią, którą użytkownik już widzi i z którą może wchodzić w interakcję.

Czy Core Web Vitals wpływają na pozycję w Google?

Tak. Google potwierdza, że Core Web Vitals są wykorzystywane przez systemy rankingowe, ale nie tworzą jednego, samodzielnego „sygnału Page Experience”. Dobry wynik nie zastąpi trafnej i pomocnej treści ani nie gwarantuje wysokiej pozycji. Optymalizację warto więc prowadzić przede wszystkim po to, aby strona szybciej pokazywała treść, sprawnie reagowała i nie utrudniała użytkownikowi wykonania zadania.

Najczęstsze pytania

Czy Core Web Vitals to jedyny czynnik szybkości brany pod uwagę przez Google?

Nie. Core Web Vitals opisują trzy ważne aspekty doświadczenia użytkownika, ale nie obejmują całej wydajności strony. W diagnostyce przydają się też między innymi TTFB, FCP i Total Blocking Time. Google zaleca ponadto HTTPS, poprawne działanie na urządzeniach mobilnych i unikanie natrętnych elementów zasłaniających treść.

Jak często aktualizują się dane Core Web Vitals w Search Console?

Raport korzysta z danych terenowych z kroczącego okresu 28 dni. Świeże pomiary stopniowo zastępują starsze, dlatego zmiana wyniku po wdrożeniu nie musi być widoczna od razu. Do szybkiego sprawdzenia poprawki użyj testu laboratoryjnego, ale ostatecznie obserwuj również dane terenowe.

Czy strona na WordPressie może mieć dobre wyniki Core Web Vitals?

Tak, pod warunkiem lekkiego motywu, ograniczonej liczby wtyczek, wdrożonego cache'owania i zoptymalizowanych obrazów. Problemy zwykle powodują rozbudowane kreatory stron, zbyt wiele wtyczek działających jednocześnie i brak kompresji grafik, a nie sam WordPress jako platforma.

Czy każda podstrona musi mieć zielony wynik?

W Search Console adresy są łączone w grupy o podobnym sposobie działania, a status dotyczy całej grupy. Nie oznacza to jednak, że Google zawsze ocenia doświadczenie wyłącznie na poziomie całej witryny. Jeśli potrzebujesz wyniku konkretnego adresu, sprawdź go osobno w PageSpeed Insights; przy małej ilości danych może być dostępny tylko wynik całej domeny.

Ile trwa poprawa Core Web Vitals na istniejącej stronie?

Zależy od przyczyny i architektury strony. Błędne wymiary obrazu można poprawić w jednej zmianie, a przebudowa kodu blokującego główny wątek może wymagać większego zakresu prac. Nie wyceniaj zadania na podstawie samego wyniku: najpierw wskaż problematyczny element lub interakcję, wykonaj pomiar przed zmianą i powtórz go po wdrożeniu.

Sprawdzamy LCP, INP i CLS w ramach audytu SEO. Jeśli chcesz wiedzieć, które elementy Twojej strony realnie spowalniają wynik, prześlij adres do sprawdzenia.