Core Web Vitals – jak przyspieszyć stronę pod SEO

Core Web Vitals – jak przyspieszyć stronę pod SEO

Otwierasz swoją stronę na telefonie w drodze do biura. Białe tło, kręci się kółko, baner doczytuje się z opóźnieniem, a gdy chcesz kliknąć „Zamów”, strona podskakuje i trafiasz w cookies. Trzy sekundy, pięć sekund. Klient w tym czasie już wrócił do wyników Google i kliknął konkurencję. Core Web Vitals to dokładnie zestaw liczb, który opisuje to uczucie – i którym Google ocenia, czy Twoja strona jest znośna w obsłudze.

Dobra wiadomość jest taka, że to są mierzalne, naprawialne rzeczy. Nie „strona jest wolna” w abstrakcji, tylko trzy konkretne metryki z progami, przy których wiadomo, co poprawić i w jakiej kolejności. Z naszej praktyki większość firmowych witryn na WordPressie da się przyspieszyć o połowę bez przepisywania całego serwisu.

Poniżej rozkładam Core Web Vitals na czynniki pierwsze: co mierzą LCP, INP i CLS, jakie progi liczy Google, czym to sprawdzić za darmo i jakie naprawy dają największy skok.

Spis treści

Czym są Core Web Vitals i dlaczego Google na nie patrzy

Core Web Vitals to zestaw trzech wskaźników, którymi Google opisuje jakość obsługi strony przez realnego użytkownika: jak szybko ładuje się główna treść, jak szybko strona reaguje na kliknięcie i czy układ nie skacze podczas wczytywania. To część szerszego sygnału „page experience” w algorytmie wyszukiwarki.

Ważny niuans: Google ocenia Cię na podstawie danych od prawdziwych odwiedzających (dane terenowe z bazy CrUX), nie jednorazowego testu na Twoim laptopie. Liczy się to, jak strona zachowuje się u klienta na średnim telefonie i przeciętnym LTE – dlatego wynik „u mnie śmiga” potrafi rozjechać się z tym, co widzi wyszukiwarka.

Czy to czynnik rankingowy? Tak, ale skala ma znaczenie. Świetne wyniki nie wypchną słabej treści na szczyt, ale przy zbliżonych stronach szybkość bywa języczkiem u wagi – i pośrednio poprawia pozycje przez niższe odbicia i dłuższe sesje.

LCP, INP i CLS – trzy metryki, które musisz znać

Cała trójka mierzy trzy różne momenty wizyty. Najłatwiej zapamiętać je jako: czy widać, czy reaguje i czy nie skacze. Skrót lcp cls inp warto znać na pamięć, bo pod tymi nazwami zobaczysz je w każdym narzędziu.

LCP – Largest Contentful Paint (czy widać)

LCP mierzy, po jakim czasie wyrenderuje się największy element widoczny na pierwszym ekranie – zwykle główne zdjęcie, baner hero albo duży nagłówek. To odpowiedź na pytanie „kiedy klient zobaczył, że strona faktycznie się załadowała”. Najczęstsi winowajcy złego LCP: ciężkie, nieskompresowane zdjęcie w nagłówku i wolna odpowiedź serwera.

INP – Interaction to Next Paint (czy reaguje)

INP zastąpił dawne FID i jest twardszy. Mierzy opóźnienie między działaniem użytkownika (klik, dotknięcie, rozwinięcie menu) a tym, gdy strona widocznie zareaguje. Wysoki INP to ten moment, gdy klikasz „Dodaj do koszyka”, a przez ułamek sekundy nic się nie dzieje, bo przeglądarka mieli nadmiarowy JavaScript. To najczęściej problem przeładowanych skryptami stron i wtyczek.

CLS – Cumulative Layout Shift (czy nie skacze)

CLS mierzy stabilność układu – sumuje, jak bardzo elementy przeskakują w trakcie ładowania. Znasz to: czytasz tekst, doczytuje się grafika nad nim i cała treść zjeżdża w dół, albo chcesz kliknąć przycisk, a w jego miejsce wskakuje baner. To wina obrazów i reklam bez zarezerwowanego miejsca oraz czcionek doczytywanych z opóźnieniem.

Pro-tip: zanim zaczniesz cokolwiek optymalizować, ustal swój „winning element” dla LCP. Otwórz PageSpeed Insights i sprawdź, który element jest oznaczony jako LCP. W 8 na 10 firmowych stron, które audytujemy, to jedno zdjęcie w nagłówku – i jego kompresja daje największy pojedynczy skok wyniku.

Progi: co Google uznaje za dobre, a co za słabe

Google dzieli wyniki na trzy koszyki: dobry (zielony), wymaga poprawy (pomarańczowy) i słaby (czerwony). Celuj w zielony zakres, ale potraktuj go jako wartość, którą musi osiągnąć 75% Twoich realnych użytkowników – tak liczy to wyszukiwarka.

Metryka Co mierzy Dobry Wymaga poprawy Słaby
LCP Czas pojawienia się głównej treści do 2,5 s 2,5-4 s powyżej 4 s
INP Reakcja na interakcję do 200 ms 200-500 ms powyżej 500 ms
CLS Stabilność układu do 0,1 0,1-0,25 powyżej 0,25

Nie musisz pamiętać wszystkich liczb – wystarczy zasada: LCP w sekundach, INP w milisekundach, CLS jako ułamek bez jednostki. Jeśli choć jedna metryka świeci na czerwono na danych z urządzeń mobilnych, masz pierwszy priorytet na liście zadań.

Jak zmierzyć Core Web Vitals – PageSpeed, CrUX, Search Console

Pomiar dzieli się na dwa światy i to jest źródło większości nieporozumień. Dane laboratoryjne to symulowany test w kontrolowanych warunkach (świetne do diagnozy „co naprawić”). Dane terenowe (CrUX) to uśrednione wyniki realnych użytkowników z ostatnich 28 dni – i to one trafiają do oceny Google.

  • PageSpeed Insights – wpisujesz adres i dostajesz oba zestawy naraz: dane terenowe z CrUX na górze i diagnostykę laboratoryjną (Lighthouse) niżej. Punkt startowy numer jeden.
  • Raport Core Web Vitals w Google Search Console – pokazuje skalę problemu na całej witrynie, w podziale na mobile i desktop.
  • Lighthouse w Chrome (narzędzia deweloperskie) – szybki test lokalny przy wdrażaniu zmian.
  • Rozszerzenie Web Vitals – LCP, INP i CLS na żywo podczas klikania po stronie. Przydatne do wyłapania, co psuje CLS.

Zasada pomiaru: naprawiaj w oparciu o dane laboratoryjne (mówią „co”), ale sukces oceniaj po danych terenowych w Search Console (to one liczą się dla pozycji). Po wdrożeniu daj CrUX około 4 tygodni – baza aktualizuje się z opóźnieniem.

Pro-tip: zawsze patrz najpierw na zakładkę „Telefon”, nie „Komputer”. Google indeksuje mobilnie, a różnica w wynikach potrafi być dramatyczna – widzieliśmy strony z oceną 95 na desktopie i 38 na mobile. To wersja mobilna decyduje o Twoich pozycjach.

Jak przyspieszyć stronę – konkretne naprawy

Poniżej kolejność, którą stosujemy na kontach klientów – od napraw z największym zwrotem do detali, z przypisaniem do konkretnej metryki.

1. Kompresja i format WebP (głównie LCP)

Zdjęcia to zwykle 60-70% wagi strony. Pierwszy ruch: konwersja grafik do formatu WebP (lub AVIF), który przy tej samej jakości waży o połowę mniej niż JPG. Drugi: zgranie wymiarów – wgranie zdjęcia 4000 px, które wyświetla się w kontenerze 800 px, to czysta strata. Na WordPressie robi to wtyczka do optymalizacji obrazów, na sklepie warto to mieć w procesie dodawania produktów.

2. Lazy loading dla obrazów poniżej ekranu (LCP)

Lazy loading sprawia, że grafiki spoza pierwszego ekranu doczytują się dopiero, gdy użytkownik do nich przewinie. Przeglądarka nie marnuje pasma na zdjęcia, których nikt jeszcze nie widzi. Uwaga na pułapkę: nigdy nie wrzucaj w lazy loading elementu LCP z nagłówka – opóźnisz wtedy dokładnie to, co miałeś przyspieszyć.

3. Cache przeglądarki i serwera (LCP)

Cache (pamięć podręczna) sprawia, że powracający użytkownik nie pobiera tych samych plików od zera, a serwer nie generuje strony przy każdym wejściu. Na WordPressie to wtyczka cache plus, jeśli host pozwala, cache po stronie serwera. Do tego CDN, który serwuje pliki z serwera bliżej użytkownika – przy ruchu z całej Polski robi realną różnicę.

4. Ograniczenie JavaScriptu (głównie INP)

To najczęstsza przyczyna słabego INP i najtrudniejsza do ruszenia. Każda wtyczka, czat, mapa, widżet opinii i piksel reklamowy dokłada skrypty, które przeglądarka musi przetworzyć. Audyt wtyczek pod kątem „czy ta jedna funkcja jest warta 200 ms opóźnienia” potrafi odchudzić stronę bardziej niż cokolwiek innego. Odkładaj ładowanie nieistotnych skryptów (defer/async) i usuwaj to, czego realnie nie używasz.

5. Rezerwacja miejsca pod elementy (CLS)

Żeby układ nie skakał, każdy obraz powinien mieć zdefiniowaną szerokość i wysokość, a miejsca pod banery, reklamy i osadzone treści trzeba zarezerwować z góry. Do tego ładowanie czcionek z parametrem, który zapobiega „skokowi” tekstu po doczytaniu fontu. To często najtańsza naprawa – poprawa CLS bywa kwestią kilku linijek CSS.

Problem Która metryka cierpi Naprawa
Ciężkie zdjęcie w nagłówku LCP WebP + dopasowanie wymiarów
Klik reaguje z opóźnieniem INP Mniej JS, audyt wtyczek, defer
Treść skacze przy ładowaniu CLS Wymiary obrazów, rezerwacja miejsca
Wolny serwer LCP Cache, lepszy hosting, CDN

Jeśli nie wiesz, od której naprawy zacząć i co realnie spowalnia Twoją witrynę, od tego właśnie jest audyt strony WWW – rozkładamy wynik na metryki i dajemy listę zadań po kolei, z największym zwrotem na górze. Część problemów wynika z samej konstrukcji serwisu, dlatego przy gruntownej przebudowie często prościej jest postawić go od nowa w ramach tworzenia stron WWW z wydajnością wpisaną w fundament.

Optymalizacja strony pod urządzenia mobilne

Skoro Google ocenia Cię mobilnie, optymalizacja pod telefon to nie dodatek, tylko punkt wyjścia. Telefon ma słabszy procesor i gorsze łącze, więc to, co na desktopie ledwo zauważysz, na mobile zamienia się w sekundy oczekiwania.

W praktyce: serwuj mniejsze wersje obrazów na małe ekrany, zrezygnuj z ciężkich animacji i suwaków hero, przyciski rób na tyle duże, żeby trafić kciukiem. Testuj na realnym, średniej klasy telefonie, nie na flagowcu. Z naszej praktyki najwięcej psują tu slidery hero i wideo z autoodtwarzaniem przy wejściu.

Szybkość to fundament, ale na pozycje pracuje razem z treścią i strukturą. Jak to poukładać całościowo, opisaliśmy w poradniku SEO oraz w tekście o optymalizacji on-page. Pełny przegląd witryny zacznij od audytu SEO krok po kroku.

Szybkość a konwersja i porzucanie koszyka

Tu dochodzimy do sedna, bo szybkość ładowania strony a pozycjonowanie to tylko jedna strona medalu. Druga to twarde pieniądze. Każda sekunda dodatkowego ładowania to klienci, którzy się rozmyślają.

Im dłużej ładuje się strona, tym więcej osób odpada, zanim cokolwiek zobaczy. Na mobile efekt jest silniejszy. W sklepie koszyk, który doczytuje się 5 sekund, wysypuje klientów tuż przed płatnością – mimo że produkt już wybrali.

Dlatego pracę nad Core Web Vitals traktujemy jako element optymalizacji konwersji, nie tylko SEO. Szczegółowo rozkładamy to w tekście o optymalizacji współczynnika konwersji. Żeby jednak zobaczyć, ile realnie tracisz na wolnej stronie, potrzebujesz poprawnie zmierzonej ścieżki zakupowej – tym zajmujemy się w ramach konfiguracji analityki, bez której „wydaje mi się, że strona jest wolna” zostaje na poziomie przeczucia.

Pro-tip: policz to na własnych liczbach. Jeśli na stronę wchodzi 10 000 osób miesięcznie, a poprawa szybkości odzyska choćby 2% z tych, co dziś odpadają na ładowaniu, to 200 dodatkowych szans na sprzedaż – bez złotówki więcej w budżecie reklamowym. Często to tańsze niż dorzucanie kolejnych pieniędzy do kampanii.

Od czego zacząć? Podsumowanie

Praca z Core Web Vitals ma prostą logikę: zmierz, ustal priorytet, napraw od największego zwrotu, sprawdź po miesiącu. Zacznij od PageSpeed Insights i raportu w Search Console na danych mobilnych, znajdź metrykę, która świeci na czerwono, i uderz w jej najczęstszą przyczynę – zwykle jest to ciężkie zdjęcie (LCP) albo nadmiar skryptów (INP).

Szybkość nie zastąpi dobrej treści ani sensownej oferty, ale potrafi przesądzić remis na Twoją korzyść i odzyskać klientów, którzy dziś odpadają zanim cokolwiek zobaczą. To rzadki przypadek, gdy jedna inwestycja pracuje naraz na pozycje i na konwersję.

Jako certyfikowany partner Google w Social Plan zaczynamy od audytu: sprawdzamy lcp cls inp na realnych danych, wskazujemy, co konkretnie spowalnia Twoją stronę, i układamy listę napraw według zwrotu. Jeśli chcesz wiedzieć, ile prędkości da się wycisnąć z Twojej witryny i co to da dla pozycji – napisz do nas. Przejrzymy stronę i powiemy wprost, co poprawić najpierw.

Najczęściej zadawane pytania

Czy Core Web Vitals naprawdę wpływają na pozycje w Google?
Tak, są częścią sygnału page experience w algorytmie. Nie są jednak czynnikiem najważniejszym – świetna szybkość nie wypchnie słabej treści na górę. Działają jako języczek u wagi przy zbliżonych stronach oraz pośrednio, przez zachowanie użytkowników: szybsza strona to mniej odbić i dłuższe sesje.

Jaki wynik Core Web Vitals jest dobry?
Celuj w zielony zakres: LCP do 2,5 sekundy, INP do 200 milisekund i CLS do 0,1. Co ważne, ten próg musi osiągać około 75% Twoich realnych użytkowników na urządzeniach mobilnych – Google ocenia Cię na danych terenowych, nie na pojedynczym teście.

Czym zmierzyć szybkość strony za darmo?
Wystarczą bezpłatne narzędzia Google: PageSpeed Insights (dane terenowe i diagnostyka naraz), raport Core Web Vitals w Search Console (skala problemu na całej witrynie) oraz Lighthouse w przeglądarce Chrome. Zawsze patrz najpierw na wyniki mobilne.

Co najszybciej przyspiesza stronę na WordPressie?
Z praktyki najwięcej daje kompresja zdjęć i format WebP, włączenie cache oraz odchudzenie liczby wtyczek dokładających JavaScript. Te trzy ruchy zwykle dają największy skok przy najmniejszym nakładzie, zanim wejdziesz w głębsze poprawki kodu.

Czy wolna strona psuje sprzedaż, nie tylko SEO?
Tak, i często bardziej. Im dłużej ładuje się strona, tym więcej osób ją porzuca, zanim coś zobaczy – na mobile efekt jest silniejszy. W sklepach wolny koszyk i checkout to klienci, którzy odpadają tuż przed płatnością, mimo że produkt już wybrali.