Core Web Vitals na stronie firmowej — jak sprawdzić LCP, INP i CLS i co poprawić najpierw

Core Web Vitals to trzy wskaźniki, którymi Google mierzy realne wrażenia użytkownika na Twojej stronie: LCP (jak szybko pojawia się główna treść), INP (jak szybko strona reaguje na kliknięcia) i CLS (czy układ nie „skacze" podczas ładowania). Dla firmy usługowej mają one znaczenie czysto praktyczne: klient, który czeka na załadowanie się strony hydraulika czy prawnika, wraca do wyników wyszukiwania i dzwoni do konkurencji. Sprawdzenie tych wskaźników zajmuje kilkanaście minut i nie wymaga płatnych narzędzi.

Czym są Core Web Vitals i po co je mierzyć

Krótko: to zbiór pomiarów tego, jak Twoja strona zachowuje się u prawdziwego użytkownika — nie w teorii, tylko w przeglądarce na telefonie klienta. Google zbiera te dane z przeglądarek użytkowników, które zgodziły się je przekazywać, i prezentuje je w raportach. Dla małej firmy to najprostszy sposób, żeby odpowiedzieć na pytanie „czy moja strona jest po prostu wygodna?" — bez zgadywania i bez polegania na opinii wykonawcy, który „wygląda dobrze".

Ważne zastrzeżenie dla małych witryn: dane od realnych użytkowników zbierają się tylko wtedy, gdy strona ma ruch. Jeśli Twoja witryna odwiedzana jest kilkadziesiąt razy w miesiącu, raport może pokazywać „brak danych" — i to nie znaczy, że strona jest zła. Wtedy opierasz się na testach laboratoryjnych, o których piszę niżej.

Trzy wskaźniki, które sprawdzasz: LCP, INP i CLS

Każdy z tych wskaźników odpowiada na inne pytanie użytkownika. Zanim cokolwiek poprawisz, musisz wiedzieć, który z nich u Ciebie szwankuje — bo naprawa wygląda zupełnie inaczej w każdym przypadku.

LCP — jak szybko pojawia się główna treść

Largest Contentful Paint mierzy czas, po którym na ekranie pojawia się największy widoczny element pierwszego ekranu — najczęściej zdjęcie w nagłówku strony albo duży nagłówek z tekstem. To wskaźnik pierwszego wrażenia: użytkownik ocenia, czy strona w ogóle się ładuje.

Najczęstsi winowajcy słabego LCP na stronach firmowych:

• zdjęcie hero wgrane prosto z aparatu, ważące kilka megabajtów,
• serwer, który wolno odpowiada na pierwsze żądanie,
• fonty i arkusze stylów blokujące wyświetlenie treści.

INP — jak szybko strona reaguje na kliknięcie

Interaction to Next Paint mierzy czas między kliknięciem użytkownika (np. rozwinięcie menu, wysłanie formularza, kliknięcie przycisku) a widoczną reakcją strony. Psują go przede wszystkim ciężkie skrypty: nadmiar narzędzi śledzących, niepotrzebne biblioteki, skrypty ładowane bez opóźnienia. Strona firmowa potrzebuje niewiele JavaScriptu — menu, formularz, może galeria — więc jeśli INP jest słaby, zwykle znaczy to, że strona niesie zbędny balast.

CLS — czy układ nie przesuwa się podczas ładowania

Cumulative Layout Shift mierzy, ile treści „przeskakuje" w trakcie ładowania. Klasyczny przykład: klient klika link w menu, a w tym momencie nad nim doskakuje baner albo zdjęcie bez zarezerwowanej wysokości — i klik trafia w coś innego. Na stronie firmowej CLS psują najczęściej:

• obrazki i osadzone mapy bez zadeklarowanych wymiarów,
• fonty ładowane późno, zmieniające szerokość tekstu,
• banery i paski pojawiające się nad treścią już po jej wyświetleniu.

Jak sprawdzić Core Web Vitals swojej strony — krok po kroku

Potrzebujesz dwóch bezpłatnych narzędzi: PageSpeed Insights i Google Search Console. Pierwsze pokazuje wynik na teraz, drugie — historię i listę problematycznych podstron.

1. Wejdź na pagespeed.web.dev i wpisz adres swojej strony. Sprawdź wynik osobno dla telefonu i dla komputera — to telefon jest ważniejszy, bo większość klientów lokalnych firm trafia na stronę właśnie z niego.
2. Rozwiń sekcje „Ocena wydajności" i wskaźniki LCP, INP i CLS. Narzędzie samo porównuje wyniki z progami Google i oznacza je kolorem, a pod spodem wskazuje konkretne elementy, które obniżają wynik — np. które zdjęcie jest za duże.
3. Otwórz raport „Core Web Vitals" w Google Search Console. Jeśli domena jest zweryfikowana, zobaczysz, które podstrony przechodzą, a które wymagają poprawy — to gotowa lista prac, uporządkowana według adresów URL.
4. Zrób test ręczny na własnym telefonie. Otwórz stronę w trybie prywatnym, bez wtyczek blokujących reklamy, najlepiej w sieci komórkowej. Jeśli menu otwiera się z wyraźnym opóźnieniem, a treść skacze — masz potwierdzenie problemu niezależnie od tego, co pokazują narzędzia.

Co poprawić najpierw — kolejność działań

Nie poprawiaj wszystkiego naraz. Zacznij od rzeczy, które dają największy efekt przy najmniejszej pracy, i po każdej zmianie powtórz test.

1. Obrazy. To zdecydowanie najczęstsza przyczyna słabego LCP na stronach firmowych. Zmniejsz zdjęcia do rozmiaru, w jakim są faktycznie wyświetlane, użyj nowoczesnego formatu i włącz lazy loading dla wszystkiego poniżej pierwszego ekranu. Zadbaj też o zadeklarowane wymiary obrazków — to od razu poprawia CLS.

2. Hosting i sieć dostarczania. Czas odpowiedzi serwera to dolna granica Twojego LCP — żaden inny zabieg tego nie nadrobi. Sprawdź, gdzie stoi Twój hosting i czy strona korzysta z CDN, np. Cloudflare, który skraca drogę plików do użytkownika.

3. Fonty. Ładuj tylko te kroje, których faktycznie używasz, i ustaw sposób ich wyświetlania tak, żeby tekst nie znikał w trakcie ładowania. To poprawia jednocześnie LCP i CLS.

4. Skrypty. Przejdź po liście wszystko, co strona ładuje z zewnątrz: liczniki, czaty, piksele, osadzone mapy. Usuń to, czego nie używasz, a resztę opóźnij tak, żeby nie blokowała interakcji. To główna dźwignia dla INP.

Jeśli Twoja strona powstaje od zera, warto od początku wybrać technologię, która domyślnie wysyła do przeglądarki mało kodu — np. Astro, w którym buduję strony internetowe dla firm. Poprawianie Core Web Vitals w przeciążonym szablonie bywa upierdliwe; strona z małym, uporządkowanym kodem zaczyna z dobrym wynikiem i go nie traci.

Test laboratoryjny a dane z realnych użytkowników

PageSpeed Insights pokazuje dwie różne rzeczy i warto je rozróżnić. Wynik laboratoryjny to symulacja: narzędzie ładuje stronę w sztucznych warunkach i zgłasza problemy, które mogą wystąpić. Dane polowe to pomiary od realnych użytkowników — wolniejsze, ale prawdziwe. Na małej stronie firmowej danych polowych może brakować i wtedy laboratoryjny test jest jedynym punktem zaczepienia — traktuj go jako listę podejrzanych, nie jako wyrok.

I jedna zasada, która oszczędza mnóstwo nerwów: nie gonisz za wynikiem 100/100. Znaczenie ma to, czy realny klient na telefonie szybko widzi treść, sprawnie klika menu i wysyła formularz. Strona, która spełnia te trzy warunki, broni się także w Google — a to narzędzie, nie cel.

Checklista: przegląd Core Web Vitals strony firmowej

• Test w PageSpeed Insights wykonany osobno dla wersji mobilnej i desktopowej.
• Zidentyfikowany element LCP — wiesz, który to obraz lub nagłówek i skąd się ładuje.
• Zdjęcia zmniejszone do rozmiarów wyświetlania, lazy loading włączony poniżej pierwszego ekranu.
• Wszystkie obrazki i osadzenia mają zadeklarowane wymiary (CLS).
• Lista zewnętrznych skryptów przejrzana, nieużywane usunięte (INP).
• Fonty ograniczone do używanych krojów, z ustawionym sposobem wyświetlania.
• Czas odpowiedzi serwera sprawdzony, rozważony CDN.
• Raport „Core Web Vitals" w Search Console sprawdzany po każdej większej zmianie na stronie.
• Test ręczny na telefonie w trybie prywatnym wykonany po wdrożeniu poprawek.

Kiedy oddać to komuś, kto robi to na co dzień

Powyższe kroki wykonasz sam, jeśli masz dostęp do plików strony i trochę cierpliwości. Jeśli jednak strona stoi na przeciążonym szablonie, a każda poprawka psuje coś innego, szybciej będzie zacząć od diagnozy: w analizie strony i planie działania sprawdzam m.in. wydajność i wskazuję, co opłaca się poprawić, a co można zostawić w spokoju. A gdy strona wymaga gruntownej przebudowy — tworzę witryny kodowane od zera, zoptymalizowane pod Google i pod klientów z Bytomia, Śląska i całej Polski.