Core Web Vitals dla firmy usługowej — jak LCP, INP i CLS wpływają na zapytania z Google

Czym są Core Web Vitals i dlaczego nie są tylko technicznym detaltem

Core Web Vitals to trzy wskaźniki — LCP, INP i CLS — które Google zbiera z prawdziwych sesji użytkowników przeglądarki Chrome. Dla firmy usługowej mają znaczenie, bo wolna lub skacząca strona obniża jakość sygnałów, które Google bierze pod uwagę w wynikach lokalnych. Nie musisz być programistą, żeby wiedzieć, co sprawdzać i o co pytać wykonawcę.

W przeciwieństwie do testów laboratoryjnych, dane Core Web Vitals pochodzą od osób, które faktycznie odwiedziły Twoją stronę. Google używa ich jako jednego z sygnałów rankingowych — nie jedynego, ale wystarczająco ważnego, żeby zignorowanie go kosztowało pozycje w wynikach. Jeśli dwie strony mają podobną treść i podobny Profil Firmy Google, ta z lepszymi wskaźnikami ma przewagę w widoczności.

LCP — Largest Contentful Paint: ile trwa załadowanie głównego elementu

LCP mierzy czas od rozpoczęcia ładowania strony do wyrenderowania największego elementu w widocznym obszarze ekranu. Najczęściej to zdjęcie w nagłówku, duży nagłówek tekstowy lub blok hero. PageSpeed Insights oznacza wynik na zielono (dobry), pomarańczowo (wymaga poprawy) lub czerwono (słaby) — sprawdź, w jakiej strefie jest Twoja strona.

Co najczęściej psuje LCP

• Zdjęcia o dużym rozmiarze bez kompresji, ładowane w oryginalnym formacie
• Brak lazy loadingu dla obrazów poniżej pierwszego ekranu
• Czcionki ładowane synchronicznie, blokujące renderowanie tekstu
• Duże pliki JavaScript z niepotrzebnych bibliotek (slidery, animacje), które blokują główny wątek przeglądarki
• Brak cache po stronie przeglądarki lub CDN — każdy odwiedzający pobiera zasoby z serwera origin

Jak sprawdzić LCP

Wpisz adres strony w PageSpeed Insights. Narzędzie wskaże konkretny element, który jest LCP, i oszacuje czas jego renderowania. Jeśli LCP to zdjęcie — sprawdź jego rozmiar i format. Jeśli to blok tekstu — problemem są prawdopodobnie czcionki lub skrypty blokujące renderowanie.

INP — Interaction to Next Paint: jak szybko strona reaguje na kliknięcie

INP mierzy czas od interakcji użytkownika (kliknięcie, tapnięcie, naciśnięcie klawisza) do momentu, w którym przeglądarka wyrenderuje zmianę na ekranie. W przeciwieństwie do dawnego FID, INP mierzy najwolniejszą interakcję w całej sesji, nie tylko pierwszą. PageSpeed Insights pokazuje wynik w trzech strefach kolorystycznych — zielony oznacza responsywność wystarczającą dla komfortowej obsługi.

Co najczęściej psuje INP

• Duże skrypty JavaScript zajmujące główny wątek w momencie interakcji
• Skrypty stron trzecich (czatboty, piksele analityczne, skrypty śledzące) ładowane bez odroczenia
• Rozbudowane animacje uruchamiane przy scrollowaniu
• Formularze kontaktowe z ciężkimi skryptami walidacji ładowanymi synchronicznie

Jak sprawdzić INP

PageSpeed Insights pokazuje INP w sekcji laboratoryjnej, ale dane z prawdziwych użytkowników znajdziesz w sekcji polowej (field data). Jeśli laboratoryjny wynik jest dobry, ale dane polowe pokazują problemy, oznacza to, że realni użytkownicy na słabszych urządzeniach mają gorsze doświadczenie niż symulacja.

CLS — Cumulative Layout Shift: czy strona skacze podczas ładowania

CLS mierzy przesunięcia elementów na stronie — to, co użytkownik widzi jako „skakanie" treści. Najczęstszy scenariusz: użytkownik chce kliknąć przycisk, ale w ostatniej chwili przycisk przesuwa się, bo załadował się obrazek lub baner wyżej. PageSpeed Insights oznacza CLS w tych samych trzech strefach co pozostałe wskaźniki.

Co najczęściej psuje CLS

• Obrazy i embedy (filmy, mapy) bez zadeklarowanych wymiarów width i height
• Czcionki webowe ładowane asynchronicznie, powodujące przeskok tekstu przy podmianie fontu
• Banery i powiadomienia ładowane asynchronicznie, które przesuwają treść po załadowaniu
• Elementy dynamiczne bez zarezerwowanej przestrzeni (placeholder)

Jak sprawdzić CLS

PageSpeed Insights wskaże konkretne elementy powodujące przesunięcia. Najczęstszym rozwiązaniem jest dodanie atrybutów wymiarów do obrazów i zarezerwowanie miejsca na elementy ładowane asynchronicznie.

PageSpeed Insights: dane laboratoryjne vs dane z prawdziwych użytkowników

PageSpeed Insights łączy dwa źródła danych: test laboratoryjny (Lighthouse) i dane z prawdziwych sesji Chrome. Test laboratoryjny symuluje jedno urządzenie i jedno połączenie — traktuj go jako diagnozę, nie jako ostateczny werdykt. Dane z prawdziwych użytkowników są bardziej reprezentatywne, ale pojawiają się tylko wtedy, gdy strona ma wystarczający ruch.

Jeśli strona jest nowa lub mało odwiedzana, dane polowe mogą być niedostępne. Wtedy polegaj na teście laboratoryjnym, ale pamiętaj, że realni użytkownicy z telefonami na słabszym połączeniu mogą mieć gorsze wyniki niż symulacja.

Co naprawić najpierw przy ograniczonym budżecie

Jeśli nie możesz naprawić wszystkiego naraz, ustal priorytety według wpływu na doświadczenie użytkownika:

1. LCP jako pierwsze — to wskaźnik, który użytkownik odczuwa najsilniej. Jeśli strona ładuje się kilka sekund, użytkownik może opuścić ją przed zobaczeniem czegokolwiek.
2. CLS jako drugie — przesunięcia elementów są irytujące i często łatwe do naprawienia: wymiarowanie obrazów i rezerwowanie miejsca na embedy to zmiana w kodzie, nie przebudowa.
3. INP jako trzecie — ważny, ale często wymaga głębszej przebudowy JavaScriptu, co bywa kosztowniejsze w wykonaniu.

Kiedy optymalizować, a kiedy przebudować stronę

Jeśli strona jest oparta na gotowym szablonie lub modelu wynajmu, niektóre problemy Core Web Vitals nie da się naprawić bez przebudowy. Szablony ładują dziesiątki skryptów, bibliotek i stylów, których nie wykorzystujesz, ale które blokują renderowanie. Optymalizacja takiej strony to doraźne łatanie, które nie rozwiązuje przyczyny.

Rozważ przebudowę, jeśli:

• LCP jest w strefie czerwonej mimo kompresji obrazów i włączenia cache
• INP jest w strefie czerwonej i nie da się odroczyć ładowania skryptów bez psucia funkcjonalności
• Strona wymaga serwera z backendem dla treści, które mogłyby być statyczne (np. WordPress z wieloma wtyczkami)
• Wykonawca nie daje dostępu do kodu źródłowego lub strona jest wynajmowana (vendor lock-in)

Strona kodowana od zera, np. w Astro, generuje pliki statyczne, które nie wymagają serwera z backendem. Brak zbędnego JavaScriptu na stronie statycznej oznacza, że INP jest bliski zera, a LCP zależy głównie od rozmiaru obrazów i konfiguracji CDN, np. Cloudflare.

Checklista weryfikacji Core Web Vitals przed zleceniem strony

Zanim zlecisz nową stronę lub przebudowę istniejącej, sprawdź:

• Czy wykonawca deklaruje konkretne wskaźniki LCP, INP i CLS, czy mówi ogólnie o „szybkości"?
• Czy strona będzie kodowana od zera, czy na gotowym szablonie?
• Czy obrazy będą podawane w nowoczesnych formatach z kompresją i lazy loadingiem?
• Czy czcionki będą ładowane asynchronicznie, bez blokowania renderowania tekstu?
• Czy strona będzie hostowana z CDN, czy na współdzielonym hostingu?
• Czy wykonawca mierzy Core Web Vitals po wdrożeniu i dostarcza raport?
• Czy masz dostęp do kodu źródłowego i możesz przenieść stronę do innego wykonawcy bez utraty danych?

Jeśli odpowiedź na którekolwiek z tych pytań brzmi „nie" lub „nie wiem", dopytaj przed podpisaniem umowy. Core Web Vitals to nie jednorazowy test — to ciągły sygnał, który Google zbiera od każdego odwiedzającego Twoją stronę.

Jeśli chcesz sprawdzić, gdzie Twoja strona stoi pod kątem Core Web Vitals i co warto poprawić pierwsze, umów bezpłatną konsultację — przejdziemy przez wyniki PageSpeed Insights i powiem, co da się naprawić, a co wymaga przebudowy.