Core Web Vitals. Jak poprawić LCP, INP i CLS i przyspieszyć stronę?

Wolna strona traci klientów, zanim ci zdążą przeczytać pierwszy nagłówek. Google mierzy to zjawisko za pomocą Core Web Vitals, czyli trzech wskaźników opisujących, jak szybko pojawia się główna treść, jak strona reaguje na kliknięcia i czy elementy nie skaczą podczas ładowania. Wyniki trafiają do Search Console i są jednym z sygnałów doświadczenia strony w wyszukiwarce.

Poniżej wyjaśniamy, co oznacza każdy wskaźnik, skąd brać wiarygodne dane i jakie poprawki wdrażamy najczęściej przy optymalizacji stron firmowych.

Czym są Core Web Vitals i jakie są progi?

Core Web Vitals to trzy metryki:

• LCP (Largest Contentful Paint): czas, po którym wyświetla się największy element w widocznej części ekranu, zwykle zdjęcie w sekcji hero albo duży nagłówek,
• INP (Interaction to Next Paint): czas od interakcji użytkownika (kliknięcie, dotknięcie, klawisz) do wyrenderowania kolejnej klatki; w marcu 2024 roku INP zastąpił FID,
• CLS (Cumulative Layout Shift): miara nieoczekiwanych przesunięć układu, np. gdy tekst nagle zjeżdża w dół, bo doładował się baner.

Ważny szczegół: Google ocenia wynik na 75. percentylu wizyt, osobno dla urządzeń mobilnych i komputerów. Strona przechodzi ocenę, gdy co najmniej 75% wizyt mieści się w progu „dobry”. Nie wystarczy więc, że na Twoim szybkim laptopie wszystko działa płynnie.

Skąd brać dane: terenowe czy laboratoryjne?

Dane terenowe (field data)

To pomiary od prawdziwych użytkowników Chrome, zbierane w raporcie CrUX (Chrome User Experience Report). Obejmują ostatnie 28 dni i to one decydują o ocenie w Google. Zobaczysz je w:

• PageSpeed Insights w sekcji „Sprawdź, jakie wrażenia mają prawdziwi użytkownicy”,
• Search Console w raporcie Podstawowe wskaźniki internetowe, gdzie adresy są pogrupowane według podobieństwa.

Mniejsze strony często nie mają wystarczającej liczby wizyt, żeby CrUX pokazał dane dla pojedynczego adresu. Wtedy widzisz dane dla całej domeny albo brak danych.

Dane laboratoryjne (lab data)

To symulacja w kontrolowanych warunkach, np. test Lighthouse w PageSpeed Insights albo w Chrome DevTools. Świetnie nadaje się do diagnozy i sprawdzania poprawek przed wdrożeniem. Pamiętaj jednak, że test laboratoryjny nie mierzy INP, bo nie ma prawdziwych interakcji. Zamiast niego pokazuje TBT (Total Blocking Time), który dobrze wskazuje problemy z długimi zadaniami JavaScript.

Jak poprawić LCP?

LCP najczęściej psują ciężkie obrazy, wolny serwer i zasoby blokujące renderowanie.

Lżejsze obrazy

Zapisuj zdjęcia w AVIF lub WebP, w rozmiarze dopasowanym do miejsca na stronie. Użyj atrybutów srcset i sizes, żeby telefon nie pobierał grafiki przygotowanej na monitor 4K. Zdjęcie z sekcji hero to zwykle element LCP, więc poświęć mu najwięcej uwagi.

Priorytet dla elementu LCP

• nie ustawiaj loading="lazy" na obrazie widocznym od razu po wejściu na stronę,
• dodaj mu fetchpriority="high", żeby przeglądarka pobrała go w pierwszej kolejności,
• jeśli obraz jest tłem w CSS, rozważ <link rel="preload"> albo zamianę na zwykły znacznik <img>.

Szybszy serwer i mniej blokad

Długi czas odpowiedzi serwera (TTFB) przesuwa wszystko w czasie. Pomaga cache stron, CDN i dobry hosting, o którego wyborze piszemy w poradniku jak wybrać hosting. Ogranicz też CSS i JavaScript ładowane w <head>: krytyczne style wstaw w pierwszej kolejności, a resztę ładuj później.

Jak poprawić INP?

INP rośnie, gdy główny wątek przeglądarki jest zajęty wykonywaniem JavaScriptu i nie może od razu odpowiedzieć na kliknięcie.

Ogranicz skrypty zewnętrzne

Czaty, mapy, widżety społecznościowe, piksele reklamowe i narzędzia do nagrywania sesji potrafią zająć procesor na długo. Zrób przegląd i usuń to, z czego nikt nie korzysta. Resztę ładuj z opóźnieniem: z atrybutem defer, dopiero po interakcji (np. czat po kliknięciu ikony) albo przez fasadę, czyli lekki podgląd zamiast pełnego osadzenia (np. miniatura filmu zamiast od razu ładowanego odtwarzacza YouTube).

Dziel długie zadania

Zadanie dłuższe niż 50 ms blokuje stronę. Rozbijaj ciężką logikę na mniejsze kawałki i oddawaj sterowanie przeglądarce między nimi, np. przez await scheduler.yield() tam, gdzie przeglądarka to obsługuje, albo setTimeout. W obsłudze kliknięcia najpierw pokaż reakcję wizualną (np. stan przycisku), a ciężkie obliczenia zrób w kolejnym kroku.

Mniej pracy przy renderowaniu

Bardzo rozbudowany DOM i ciężkie page buildery wydłużają każde przerysowanie. Lżejszy motyw i mniejsza liczba wtyczek to często najprostsza droga do dobrego INP.

Jak poprawić CLS?

CLS to zwykle najłatwiejsza metryka do naprawy, bo przyczyny są dobrze znane.

1. Podawaj wymiary obrazów i filmów: atrybuty width i height (albo aspect-ratio w CSS) pozwalają przeglądarce zarezerwować miejsce, zanim plik się pobierze.
2. Rezerwuj miejsce na reklamy, banery i osadzenia: kontener powinien mieć minimalną wysokość, zanim treść się doładuje.
3. Nie wstawiaj treści nad istniejącą zawartością: komunikaty o promocji czy zgody na cookies pokazuj jako nakładkę, a nie spychając stronę w dół.
4. Opanuj fonty: ustaw font-display: swap lub optional, wczytuj z wyprzedzeniem tylko 1–2 kluczowe pliki fontów i dobierz font zastępczy o podobnych proporcjach. Więcej o wyborze krojów piszemy w poradniku jak dobrać czcionkę na stronę.
5. Animuj transform zamiast top czy height: takie animacje nie przesuwają układu.

Jakie problemy spotykamy najczęściej na stronach firmowych?

Przy audytach stron firmowych wciąż wracają te same przyczyny słabych wyników. Zebraliśmy je w jednym miejscu, razem z metryką, której dotyczą:

Jak utrzymać dobre wyniki?

Optymalizacja to nie jednorazowa akcja. Każda nowa wtyczka, kampania z kolejnym pikselem czy wielkie zdjęcie wrzucone przez redaktora mogą zepsuć wynik. Dlatego warto:

• raz w miesiącu zajrzeć do raportu Podstawowe wskaźniki internetowe w Search Console,
• testować w PageSpeed Insights każdą większą zmianę szablonu przed publikacją,
• ustalić w zespole proste zasady: maksymalny rozmiar zdjęć, zgoda na nowe skrypty tylko po sprawdzeniu wpływu na szybkość.

Od czego zacząć optymalizację?

Najpierw sprawdź dane terenowe w Search Console i ustal, która metryka i który typ urządzeń mają problem. Zwykle to telefony, bo mają słabsze procesory i wolniejsze łącza, dlatego responsywność i lekkość wersji mobilnej są tak ważne. Potem w PageSpeed Insights i DevTools znajdź konkretne przyczyny i wdrażaj poprawki od tych o największym wpływie.

Jeśli strona jest zbudowana na ciężkim motywie z kilkunastoma wtyczkami, łatanie pojedynczych problemów bywa droższe niż przebudowa. Wtedy warto przeczytać, kiedy modernizacja strony ma sens.

Potrzebujesz pomocy z szybkością strony?

Przy tworzeniu stron internetowych projektujemy je od początku z myślą o Core Web Vitals: lekki kod, zoptymalizowane obrazy, rozsądne ładowanie fontów i skryptów. Optymalizujemy też istniejące serwisy. Napisz, a sprawdzimy dane Twojej strony i wskażemy poprawki, które dadzą największy efekt.