Core Web Vitals prosto wyjaśnione: co mierzy Google i jak to poprawić

Core Web Vitals to trzy wskaźniki, na podstawie których Google ocenia, jak Twoja strona odbierana jest przez prawdziwych odwiedzających: jak szybko się ładuje, jak szybko reaguje na kliknięcia i czy układ strony przeskakuje podczas ładowania. Wyniki te wpływają na ranking i można je sprawdzić za pomocą dowolnego narzędzia przeglądarki. W tym artykule wyjaśniamy, co dokładnie jest mierzone, jakie obowiązują wartości graniczne i jak konkretnie zająć się każdym z tych trzech wskaźników.

Trzy wskaźniki w skrócie

Od przejścia na INP (marzec 2024) Google mierzy trzy wskaźniki. Każdy z nich reprezentuje inny wymiar doświadczenia użytkownika:

• LCP (Largest Contentful Paint) – jak długo trwa, zanim załaduje się największy widoczny element? Najczęściej jest to obraz hero lub duży nagłówek. Dobrze: poniżej 2,5 sekundy.
• INP (Interaction to Next Paint) – jak szybko strona reaguje, gdy ktoś kliknie, wpisze coś lub otworzy menu? Mierzone jest opóźnienie do widocznej reakcji. Dobrze: poniżej 200 milisekund.
• CLS (Cumulative Layout Shift) – jak mocno przesuwa się układ strony podczas ładowania? Dzieje się tak, gdy obrazy doładowują się bez zarezerwowanego miejsca i tekst nagle przeskakuje w dół. Dobrze: poniżej 0,1.

Ważna jest tak zwana zasada 75. percentyla: Google ocenia nie średnią, lecz wartość, którą osiąga 75 procent Twoich odwiedzających. Dobra średnia nic Ci nie da, jeśli jedna czwarta użytkowników widzi ślamazarną stronę.

Jak mierzyć swoje wyniki

Aby zacząć, nie potrzebujesz płatnego narzędzia. Te trzy źródła wystarczą do uczciwej diagnozy:

• PageSpeed Insights (pagespeed.web.dev) – po wpisaniu adresu URL otrzymujesz zarówno dane laboratoryjne, jak i rzeczywiste dane terenowe od użytkowników Chrome, o ile ruch jest wystarczający.
• Google Search Console – w sekcji Core Web Vitals widzisz, które adresy URL są oceniane jako dobre, wymagające poprawy lub złe, pogrupowane według problemu.
• Lighthouse w narzędziach deweloperskich Chrome – do szybkich, lokalnych testów podczas pracy.

Uczciwa uwaga: dane laboratoryjne i terenowe często różnią się od siebie. To dane terenowe od prawdziwych odwiedzających są tym, co Google wykorzystuje w rankingu. Jeśli masz niewielki ruch, zebranie wiarygodnych danych terenowych może chwilę potrwać.

Poprawa LCP: czas ładowania głównej treści

Najczęstszym hamulcem LCP jest zbyt duży, niezoptymalizowany obraz w widocznym obszarze. Oto jak się za to zabrać:

• Dostarczaj obrazy w nowoczesnym formacie WebP lub AVIF i skaluj je do faktycznie wyświetlanego rozmiaru.
• Najważniejszy obraz ładuj priorytetowo za pomocą preload, zamiast pozwalać mu utonąć w kolejce.
• Sprawdź czas odpowiedzi serwera – wolny hosting lub przeciążony CMS opóźnia wszystko. Wyraźnie pomagają cache i CDN.
• Ogranicz blokujące renderowanie CSS i JavaScript, aby przeglądarka mogła wcześniej wyświetlić treść.

Poprawa INP: szybkość reakcji

INP prawie zawsze cierpi z powodu nadmiaru JavaScriptu. Gdy główny wątek przeglądarki jest zajęty skryptami, nie może reagować na kliknięcia. Konkretnie pomaga:

• Usunięcie lub opóźnione ładowanie zbędnych skryptów oraz ciężkich narzędzi śledzących i marketingowych.
• Podział długich zadań JavaScriptu na mniejsze porcje, aby przeglądarka mogła w międzyczasie reagować na działania użytkownika.
• Krytyczne sprawdzenie widżetów podmiotów trzecich – okienka czatu, banery cookie i osadzenia to częsti winowajcy.

Lekka, porządnie zbudowana strona rzadko ma tu problemy. INP staje się kłopotem przede wszystkim wtedy, gdy przez lata nawarstwiały się wtyczki i narzędzia.

Poprawa CLS: stabilność układu

CLS to często najłatwiejszy do naprawienia wskaźnik, bo przyczyny są jasne:

• Dla obrazów i filmów zawsze podawaj szerokość i wysokość, aby przeglądarka z góry rezerwowała miejsce.
• Powierzchnie reklamowe i dynamicznie doładowywane treści opatrz stałym symbolem zastępczym.
• Osadzaj czcionki tak, aby tekst podczas ładowania nie przeskakiwał z czcionki zastępczej na docelową.

Czy naprawdę wszędzie potrzebujesz maksymalnej punktacji?

Uczciwa odpowiedź: nie. Core Web Vitals to jeden z wielu czynników rankingowych, a dobra treść w razie wątpliwości przebija ostatni milimetr szybkości. Nie opłaca się tygodniami optymalizować z 95 na 99 punktów. To, co się opłaca, to wyjście z czerwonego do zielonego zakresu, czyli osiągnięcie progów 2,5 s, 200 ms i 0,1. Wszystko powyżej to dopieszczanie, które naprawdę się zwraca tylko przy bardzo dużych stronach.

Z własnego doświadczenia: prowadzimy w produkcji siedem własnych marek, od portalu produktowego z ponad 177 000 wpisów po kilka pulpitów SaaS. Większość problemów z Vitals nie wynika z braku trików, lecz z nadmiaru balastu – zbędnych skryptów, ogromnych obrazów, ociężałego CMS-a. Kto od początku buduje lekko, nie ma tu prawie nic do naprawiania. Jeśli natomiast Twoja strona już istnieje i znajduje się w czerwonym zakresie, właściwym pierwszym krokiem jest ukierunkowana analiza za pomocą PageSpeed Insights i Search Console.