Jak działa Core Web Vitals w praktyce: metryki, infrastruktura i realna optymalizacja - ilustracja artykulu

Jak działa Core Web Vitals w praktyce: metryki, infrastruktura i realna optymalizacja

by Spectos

Pytanie o to, jak działa Core Web Vitals w praktyce, pojawia się zawsze wtedy, gdy raport w Search Console zmienia kolor z zielonego na czerwony, a ruch organiczny zaczyna się osuwać. Odpowiedź jest prostsza, niż sugerują dyskusje na forach: Google zbiera anonimowe pomiary od realnych użytkowników Chrome, agreguje je w oknie 28 dni i sprawdza, czy 75. percentyl wizyt mieści się w progach trzech metryk — LCP, INP oraz CLS. Nie liczy się średnia ani wynik jednego testu na szybkim łączu światłowodowym, tylko doświadczenie trzech czwartych odwiedzających, w tym tych na starszych telefonach i słabym zasięgu LTE. Ten materiał pokazuje, jak te trzy liczby powstają, które elementy infrastruktury — od serwera przez DNS po certyfikat — realnie je przesuwają oraz jakie zmiany dają największy zwrot przy najmniejszym nakładzie pracy. Zamiast ogólników znajdziesz tu konkretne progi, przykładowe koszty w złotówkach i kolejność działań sprawdzoną na sklepach oraz blogach WordPress.

Trzy metryki, z których składa się ocena Core Web Vitals

Largest Contentful Paint mierzy moment, w którym w widocznym obszarze ekranu pojawia się największy element treści — zwykle zdjęcie nagłówkowe, baner slidera albo blok tekstu z dużym nagłówkiem. Próg dobrego wyniku to 2,5 sekundy, a wszystko powyżej 4 sekund trafia do kategorii słabej. Największym winowajcą bywa nie waga obrazu, lecz opóźniona odpowiedź serwera i blokujące renderowanie arkusze stylów ładowane z zewnętrznych domen.

Interaction to Next Paint zastąpiło dawne First Input Delay i ocenia całą ścieżkę reakcji: od kliknięcia, przez pracę JavaScriptu w głównym wątku, aż po namalowanie zmienionej klatki. Dobry wynik to 200 milisekund, granica akceptowalności wypada przy 500. Metryka bezlitośnie obnaża motywy z kilkudziesięcioma wtyczkami, karuzele produktowe oraz skrypty czatów, które przy każdym dotknięciu przeliczają układ całego dokumentu.

Cumulative Layout Shift opisuje sumę nieoczekiwanych przesunięć układu w trakcie ładowania. Wartość 0,1 oddziela wynik dobry od przeciętnego, a 0,25 od słabego. Typowe źródła to obrazy bez zadeklarowanych wymiarów, reklamy wstrzykiwane po renderowaniu treści oraz czcionki webowe podmieniane bez rezerwacji miejsca. Dodanie atrybutów width i height do zdjęć potrafi obniżyć CLS o połowę w jeden wieczór.

MetrykaWynik dobryWymaga poprawyWynik słabyNajczęstsza przyczyna problemu
LCPdo 2,5 s2,5–4,0 spowyżej 4,0 swolny serwer, nieskompresowane zdjęcia hero
INPdo 200 ms200–500 mspowyżej 500 msnadmiar JavaScriptu i skryptów zewnętrznych
CLSdo 0,10,1–0,25powyżej 0,25brak wymiarów obrazów, późne banery
TTFB (pomocnicza)do 0,8 s0,8–1,8 spowyżej 1,8 sprzeciążony hosting, brak cache po stronie serwera
FCP (pomocnicza)do 1,8 s1,8–3,0 spowyżej 3,0 sblokujące pliki CSS i fonty

Ocena zbiorcza wypada pozytywnie wyłącznie wtedy, gdy wszystkie trzy główne metryki mieszczą się w progach jednocześnie. Adres URL bez wystarczającej liczby pomiarów dziedziczy wynik z grupy podobnych podstron, więc pojedynczy wpis na blogu bywa oceniany przez pryzmat całego szablonu. To wyjaśnia, dlaczego poprawa jednego artykułu nie zmienia raportu, a przebudowa motywu zmienia go natychmiast.

Hosting i serwer jako fundament, którego nie zastąpi optymalizacja frontendu

Zanim przeglądarka zacznie cokolwiek rysować, musi otrzymać pierwszy bajt odpowiedzi. Na tanim koncie współdzielonym za 15–40 zł miesięcznie TTFB potrafi skakać od 200 milisekund do ponad dwóch sekund, zależnie od tego, co robią sąsiedzi na tej samej maszynie. Żadna minifikacja CSS nie odzyska czasu straconego na oczekiwaniu na wolny proces PHP.

Jak wybrać hosting pod WordPress i kiedy przejść na VPS

Pytanie o to, jak wybrać hosting pod WordPress, sprowadza się do kilku parametrów technicznych: serwer LiteSpeed lub NGINX zamiast czystego Apache, aktualna gałąź PHP z włączonym OPcache, dyski NVMe, obiektowy cache w Redisie oraz jasno podana liczba równoległych procesów. Pakiety spełniające ten zestaw kosztują zwykle 20–60 zł miesięcznie i wystarczają blogom do kilkudziesięciu tysięcy odsłon.

Kolejne pytanie brzmi, czym różni się VPS od hostingu współdzielonego. Na koncie współdzielonym setki witryn dzielą procesor i pamięć według uznania dostawcy, a limity bywają egzekwowane spowolnieniem. VPS przydziela gwarantowane rdzenie i RAM, daje dostęp root oraz swobodę w konfiguracji cache, ale wymaga administracji — aktualizacji, kopii zapasowych i monitoringu. Sensowne maszyny startują od około 40 zł, a wersje zarządzane od 120–150 zł.

Osobny temat to sytuacja, w której obecny dostawca zawodzi i pojawia się kwestia, jak przenieść stronę na inny hosting bez utraty wyników. Kolejność jest stała: kopia plików i bazy, uruchomienie klonu pod adresem testowym, weryfikacja szybkości, obniżenie TTL rekordów DNS do 300 sekund na dobę przed migracją, dopiero potem przełączenie ruchu. Stary serwer trzymaj aktywny jeszcze przez 72 godziny.

Domena, DNS i szyfrowanie w łańcuchu ładowania strony

Zanim ruszy transfer danych, przeglądarka musi rozwiązać nazwę domeny. Na dobrze skonfigurowanej infrastrukturze zajmuje to 20–40 milisekund, na słabej nawet 150. Osoba pytająca, jak skonfigurować rekordy DNS domeny, powinna zacząć od wyboru operatora z siecią anycast, ustawienia rekordów A oraz AAAA na właściwe adresy i utrzymywania TTL na poziomie 3600 sekund poza okresami migracji.

Warstwę adresacji komplikują aliasy. Odpowiedź na pytanie, co to jest rekord CNAME, jest prosta — to wskazanie jednej nazwy na drugą, dzięki czemu subdomena podąża za zmianami adresu docelowego. Problem zaczyna się przy łańcuchach aliasów, bo każde dodatkowe zapytanie kosztuje kilkadziesiąt milisekund. Przy przejmowaniu cudzego projektu przydaje się też wiedza, jak sprawdzić, kto jest właścicielem domeny — służy do tego zapytanie WHOIS lub nowszy protokół RDAP w rejestrze NASK.

Utrata kontroli nad adresem kosztuje więcej niż jakakolwiek optymalizacja. Kwestia tego, jak przedłużyć domenę po wygaśnięciu, ma ścisłe ramy czasowe: przez około 30 dni obowiązuje okres karencji z ceną zbliżoną do standardowej odnowy, potem domena wchodzi w fazę wykupu, gdzie opłata restytucyjna sięga kilkuset złotych. Szyfrowanie działa podobnie mechanicznie — pytanie, jak zainstalować certyfikat SSL na serwerze, w większości paneli rozwiązuje jeden przycisk, bo darmowy certyfikat SSL Let’s Encrypt odnawia się automatycznie co 90 dni i odblokowuje HTTP/2 wraz z multipleksowaniem połączeń.

Jak działa Core Web Vitals w praktyce: metryki, infrastruktura i realna optymalizacja - zdjecie w tresci
Zdj. tematyczne: Jak działa Core Web Vitals w praktyce: metryk (fot. Mike Bird/Pexels)

Przekierowania, które zjadają setki milisekund

Każde przeadresowanie to dodatkowa podróż do serwera. Pytanie, jak ustawić przekierowanie 301 w htaccess, sprowadza się do reguły RewriteRule z flagą R=301, ale ważniejsze jest to, żeby łańcuch miał dokładnie jeden skok. Typowy sklep po migracji ma trzy: z wersji bez www na www, z HTTP na HTTPS i ze starego adresu na nowy. Skrócenie tego do jednej reguły ścina LCP nawet o 400 milisekund na łączu mobilnym.

Optymalizacja LCP, INP i CLS krok po kroku

Praca nad LCP zaczyna się od identyfikacji elementu, który przeglądarka uznaje za największy. Zwykle jest to zdjęcie nagłówkowe — powinno mieć format WebP lub AVIF, wymiary dopasowane do rzeczywistego kontenera, atrybut fetchpriority ustawiony na wysoki oraz wyłączone leniwe ładowanie. Konwersja pliku z 850 kB do 90 kB przy tej samej jakości wizualnej jest rutyną, nie wyczynem.

  • Usuń wtyczki dublujące funkcje: trzy narzędzia do cache na jednej instalacji potrafią wydłużyć INP zamiast go skrócić.
  • Ładuj skrypty analityczne, piksele reklamowe i widżety czatu z atrybutem defer albo po pierwszej interakcji użytkownika.
  • Rezerwuj miejsce dla banerów cookies, reklam i osadzonych filmów przez stały kontener o zdefiniowanej wysokości.
  • Osadzaj fonty lokalnie z font-display swap i ogranicz zestaw do dwóch krojów oraz trzech grubości.
  • Włącz kompresję Brotli i cache przeglądarki na 12 miesięcy dla zasobów statycznych z wersjonowaną nazwą pliku.

Największe zyski w INP daje redukcja długich zadań w głównym wątku. Podział ciężkich funkcji na mniejsze fragmenty, przeniesienie obliczeń do Web Workera i rezygnacja z bibliotek animacyjnych, które przeliczają układ przy każdej klatce, potrafią zbić wskaźnik z 480 do 150 milisekund. Zysk widać najmocniej na telefonach z pamięcią 3–4 GB, a to one dominują w polskich statystykach ruchu.

CLS naprawia się najtaniej, bo wymaga głównie dyscypliny w kodzie szablonu. Deklarowanie wymiarów każdego obrazu i iframe, rezygnacja z wstrzykiwania treści nad już wyrenderowanym obszarem oraz stosowanie transformacji CSS zamiast zmian właściwości top i left rozwiązują większość przypadków. Sieć CDN z serwerem brzegowym w Warszawie lub Frankfurcie domyka temat, skracając drogę pakietów do kilkunastu milisekund.

Pomiar: dane laboratoryjne kontra dane z pola

Jak działa Core Web Vitals w praktyce, najlepiej widać przy zestawieniu dwóch źródeł danych. PageSpeed Insights i Lighthouse wykonują symulację na wirtualnym urządzeniu z dławionym łączem — dają powtarzalną diagnostykę i listę problemów, ale nie decydują o ocenie. O niej rozstrzyga raport CrUX, czyli zanonimizowane pomiary od realnych użytkowników z ostatnich 28 dni.

Testując z domowego biurka, łatwo wyciągnąć błędne wnioski, dlatego przydaje się wiedza, jak sprawdzić prędkość internetu rzetelnie. Pomiar wykonuje się na kablu Ethernet, przy zamkniętych aplikacjach synchronizujących pliki w chmurze, na co najmniej dwóch niezależnych serwerach pomiarowych i w kilku porach dnia. Pojedynczy wynik z wieczornego szczytu na Wi-Fi mówi o zatłoczeniu pasma sąsiadów, nie o wydajności witryny.

Podobnie działa sieć bezprzewodowa. Osoby zastanawiające się, jak wzmocnić sygnał WiFi w domu, najwięcej zyskają na przeniesieniu routera na środek mieszkania i wyżej niż metr nad podłogą, przełączeniu klientów na pasmo 5 GHz, ręcznym wyborze najmniej obciążonego kanału oraz dołożeniu punktu mesh za 250–400 zł zamiast prostego wzmacniacza, który połowi przepustowość.

Docelowo warto wdrożyć własny monitoring RUM, zbierający metryki bezpośrednio od odwiedzających i dzielący je według typu urządzenia, przeglądarki i szablonu podstrony. Taki zestaw danych pokazuje, że problem dotyczy na przykład wyłącznie kart produktów na Androidzie, a nie całej witryny. Do tego przydaje się budżet wydajnościowy: twardy limit wagi strony, powiedzmy 900 kB, blokujący wdrożenia, które go przekraczają.

Jak szybko widać efekty poprawek w raporcie Core Web Vitals?

Zmiana w kodzie działa natychmiast, ale raport reaguje z opóźnieniem, bo operuje na ruchomym oknie 28 dni. Pierwsze sygnały pojawiają się po mniej więcej tygodniu, gdy nowe, lepsze pomiary zaczynają rozcieńczać stare wyniki w 75. percentylu. Pełne przejście adresu z kategorii słabej do dobrej zajmuje zwykle cztery do sześciu tygodni od wdrożenia, przy założeniu, że ruch jest stabilny. Witryny o małej liczbie wizyt czekają dłużej, ponieważ potrzebują odpowiedniej próbki danych. Przyspieszyć tego procesu się nie da, natomiast można go kontrolować: narzędzia laboratoryjne pokażą efekt tego samego dnia, więc służą do weryfikacji, czy zmiana faktycznie zadziałała, zanim dane z pola to potwierdzą.

Czy Core Web Vitals to czynnik rankingowy, który realnie przesuwa pozycje?

To potwierdzony sygnał rankingowy, ale o wadze znacznie mniejszej niż trafność i jakość treści. Sama poprawa metryk nie wypchnie słabego materiału na pierwszą stronę wyników. Znaczenie rośnie w sytuacjach granicznych: gdy kilka witryn oferuje porównywalnie dobrą odpowiedź na to samo zapytanie, szybsza zwykle wygrywa. Drugi, często niedoceniany efekt dotyczy zachowania odbiorców — skrócenie czasu ładowania z 4,5 do 2 sekund potrafi obniżyć odsetek porzuceń o kilkanaście procent i podnieść konwersję w sklepie, co przekłada się na przychód niezależnie od pozycji. Traktuj więc te metryki jako element higieny technicznej i optymalizacji biznesowej, a nie jako skrót do czołowych miejsc w wynikach.

Co zrobić, gdy strona zdaje testy laboratoryjne, a wypada źle w danych z pola?

Rozbieżność oznacza, że symulacja nie odwzorowuje warunków rzeczywistych odwiedzających. Sprawdź trzy obszary. Po pierwsze urządzenia — test biegnie na jednym profilu sprzętowym, podczas gdy realny ruch obejmuje telefony kilkuletnie, o wolniejszym procesorze, co uderza głównie w INP. Po drugie geografię: jeśli serwer stoi w Niemczech, a odbiorcy łączą się z całej Polski przez sieci mobilne, opóźnienie sieciowe dokłada kilkaset milisekund. Po trzecie strony wejścia — laboratorium najczęściej bada stronę główną, a ruch organiczny wchodzi na artykuły i karty produktów o innym szablonie i innym zestawie skryptów. Uruchom pomiar RUM z podziałem na typ szablonu, urządzenie i region, a źródło rozbieżności ujawni się w ciągu kilku dni.