Blog · 5 listopada 2026 · 7 min czytania

Core Web Vitals po ludzku: LCP, INP i CLS

Google ocenia wygodę Twojej strony trzema liczbami. Nie trzeba być programistą, żeby je zrozumieć – i żeby wiedzieć, komu i co zlecić do poprawy. Ten tekst tłumaczy każdą z nich na przykładach z typowej firmowej strony.

Skąd w ogóle te trzy liczby

Core Web Vitals (po polsku „podstawowe wskaźniki internetowe”) to zestaw pomiarów, które Google zbiera z prawdziwych przeglądarek Chrome użytkowników odwiedzających Twoją stronę. Nie są to opinie, tylko czasy i odległości zmierzone na telefonach i komputerach ludzi, którzy naprawdę u Ciebie byli. Google publikuje je w PageSpeed Insights i w Search Console, w raporcie „Podstawowe wskaźniki internetowe”.

Dlaczego warto się tym przejmować? Z dwóch powodów. Po pierwsze, od 2021 r. wskaźniki są jednym z sygnałów rankingowych Google. Sam w sobie to sygnał słaby – dobra treść nadal wygrywa z szybką pustą stroną – ale przy podobnej treści konkurentów robi różnicę. Po drugie, i ważniejsze: te same rzeczy, które psują wskaźniki, psują sprzedaż. Strona, która ładuje się 6 sekund na telefonie, traci dużą część odwiedzających, zanim cokolwiek zobaczą.

Trzy wskaźniki w jednym zdaniu każdy

Między „dobrze” a „źle” jest strefa „wymaga poprawy”. Google patrzy na 75. percentyl: strona zalicza próg, jeśli co najmniej trzy czwarte wizyt mieści się w zielonym. Jedna wolna wizyta z pociągu niczego nie psuje; stale wolny telefon przeciętnego klienta – tak.

LCP – „ile czekam, zanim coś zobaczę”

LCP to moment, w którym pojawia się największy widoczny element. Na firmowej stronie to prawie zawsze duże zdjęcie w górnej części strony albo tło sekcji powitalnej. Typowe przyczyny złego LCP:

• Za ciężkie zdjęcie nagłówkowe. Zdjęcie 4000 × 3000 px prosto z aparatu, 3 MB, wyświetlane w okienku o szerokości 400 px na telefonie. Powinno ważyć 100–200 KB, w formacie WebP lub AVIF, w kilku rozmiarach (srcset).
• Wolny serwer. Jeśli pierwszy bajt strony przychodzi po 1,5 s (TTFB), nic nie wyświetli się przed 2,5 s. Najtańszy hosting współdzielony, brak cache w WordPressie, brak CDN – to zwykle tu.
• Blokujące skrypty i style. Przeglądarka nie namaluje nic, dopóki nie pobierze wszystkich plików CSS z nagłówka i skryptów bez atrybutu defer. Motywy i wtyczki potrafią ich dołożyć kilkadziesiąt.
• Zdjęcie nagłówkowe ładowane leniwie. Paradoks: loading="lazy" jest świetny dla zdjęć na dole, ale ustawiony na zdjęciu głównym opóźnia je o kilkaset milisekund.

Co zlecić: skompresować i zmniejszyć obrazy (narzędzia: Squoosh, wtyczki typu ShortPixel), włączyć cache strony i CDN, oznaczyć główny obraz fetchpriority="high", usunąć loading="lazy" z elementów nad linią zgięcia.

INP – „czy strona reaguje, gdy klikam”

INP zastąpił w 2024 r. starszy wskaźnik FID i jest bardziej wymagający: mierzy nie tylko pierwsze kliknięcie, ale całą wizytę, i bierze pod uwagę najgorszą reakcję. Jeśli po dotknięciu „Dodaj do koszyka” przez pół sekundy nic się nie dzieje, użytkownik klika drugi raz, a Twoje INP ląduje na czerwono.

Przyczyna jest prawie zawsze jedna: za dużo JavaScriptu. Konkretnie:

• Kreatory stron (page buildery) i motywy „wszystko w jednym”, które ładują kod wszystkich funkcji, także nieużywanych.
• Skrypty zewnętrzne: czat, mapy, piksele reklamowe, narzędzia do nagrywania sesji, kilka systemów analityki naraz. Każdy z nich zajmuje główny wątek przeglądarki, który jest jeden i obsługuje też Twoje kliknięcia.
• Suwaki (slidery) i animacje działające w tle na każdej podstronie.

Co zlecić: przegląd wtyczek i skryptów – wyłączyć nieużywane, pozostałe ładować z defer albo po pierwszej interakcji; zrezygnować z duplikatów (dwa systemy analityki, dwa czaty). Na telefonie z niższej półki efekt jest wielokrotnie większy niż na komputerze dewelopera, dlatego INP trzeba oceniać po danych z terenu, nie po własnym laptopie.

CLS – „dlaczego kliknąłem nie to, co chciałem”

CLS nie ma jednostki czasu, bo mierzy ruch: jak dużą część ekranu i jak daleko przesunęła się treść już po tym, jak się pojawiła. Znasz to: czytasz akapit, nagle nad nim doładowuje się baner i tekst zjeżdża o 300 pikseli. Albo celujesz w „Wyślij”, a w ostatniej chwili pojawia się pasek o ciasteczkach i trafiasz w reklamę.

Typowe przyczyny:

• Obrazy bez wymiarów. Przeglądarka nie wie, ile miejsca zostawić, więc najpierw układa tekst, a potem wpycha zdjęcie. Rozwiązanie jest banalne: atrybuty width i height na każdym <img>.
• Wstawki ładowane później – reklamy, osadzone mapy, filmy, widżety opinii – bez zarezerwowanego miejsca.
• Fonty internetowe, które po pobraniu podmieniają tekst na inny krój o innej szerokości, więc wszystko się przesuwa.
• Paski i powiadomienia wsuwane od góry (zgody na ciasteczka, promocje), które spychają resztę strony w dół zamiast nachodzić na nią.

Co zlecić: wymiary dla obrazów i osadzeń, font-display: swap z dopasowanym fontem zastępczym (albo po prostu font systemowy), paski informacyjne jako warstwa nad treścią, nie nad nią „w dokumencie”.

Jak to sprawdzić samemu w 2 minuty

1. Wejdź na pagespeed.web.dev, wpisz adres swojej strony, wybierz zakładkę „Telefon”.
2. Sekcja u góry, „Sprawdź, jak radzą sobie prawdziwi użytkownicy”, to dane z terenu. Jeśli jej nie ma, strona ma za mało ruchu, żeby Google zebrało próbkę – wtedy liczy się tylko dolna część, czyli pomiar laboratoryjny.
3. Dolna część („Zdiagnozuj problemy z wydajnością”) to symulacja na wolniejszym telefonie i wolniejszej sieci. Wyniki są surowsze niż w terenie, ale za to pokazują konkretne przyczyny i pliki.

Jeśli masz Search Console, zajrzyj do raportu „Podstawowe wskaźniki internetowe” – pokazuje, które grupy podstron zawodzą, a nie tylko stronę główną. Często okazuje się, że strona główna jest w porządku, a problem mają wszystkie wpisy na blogu, bo mają ten sam ciężki szablon.

Od czego zacząć, gdy wszystko jest na czerwono

Kolejność, która w praktyce daje najwięcej za najmniej pracy:

1. Obrazy – kompresja, właściwe rozmiary, wymiary w HTML. Jedna popołudniowa robota, poprawia LCP i CLS naraz.
2. Cache i hosting – wtyczka cache (WordPress) albo zmiana hostingu, do tego CDN. Poprawia LCP na każdej podstronie.
3. Porządek w skryptach – usunięcie nieużywanych wtyczek i podwójnych narzędzi. Poprawia INP i często LCP.
4. Fonty i paski – ostatnie dziesiąte CLS.

Czego nie robić: nie instalować trzech wtyczek „optymalizujących” naraz w nadziei, że któraś pomoże. Każda z nich dokłada własny kod, a konflikty między nimi to klasyczny sposób, żeby strona przestała działać na telefonie w piątek wieczorem.