Core Web Vitals w praktyce: jak osiągnąć zielone wyniki w Lighthouse

Znasz to uczucie? Stworzyłeś stronę, która wygląda obłędnie, animacje płyną gładko, a design powala na kolana. Ale jest jedno „ale”… działa jakoś tak… ociężale. Użytkownicy narzekają, a Google w raporcie Search Console świeci na czerwono. Spokojnie, to nie koniec świata. To znak, że czas zaprzyjaźnić się z trzema muszkieterami internetu: Core Web Vitals.

Pogadajmy o tym, jak przejść od frustracji do satysfakcji i zamienić czerwone wskaźniki w Lighthouse na satysfakcjonującą zieleń. Bez zbędnej teorii, sama praktyka.

1. Czym są Core Web Vitals i dlaczego powinny Cię obchodzić?
2. Largest Contentful Paint (LCP) – walka o każdą milisekundę.
3. Cumulative Layout Shift (CLS) – jak powstrzymać tańczące elementy.
4. Interaction to Next Paint (INP) – nowy gracz na boisku responsywności.
5. Narzędzia, które Ci pomogą.

Czym są Core Web Vitals i dlaczego powinny Cię obchodzić?

W dużym skrócie, Core Web Vitals (CWV) to zestaw metryk, za pomocą których Google mierzy realne odczucia użytkownika związane z korzystaniem ze strony. To nie jest kolejny suchy algorytm, ale próba kwantyfikacji tego, czy Twoja strona jest „przyjemna” w obsłudze. Google stawia na jakość, a od 2021 roku CWV stały się jednym z oficjalnych czynników rankingowych. Prościej mówiąc: szybsze i stabilniejsze strony mają łatwiej w wynikach wyszukiwania.

Google nie lubi, gdy użytkownicy się denerwują. A wolne, niestabilne strony właśnie to robią. Pamiętaj, że optymalizujesz nie dla robotów, a dla ludzi.

Trzy główne metryki, na których się skupimy, to LCP, CLS i najnowszy dodatek, INP, który zastąpił FID.

Jak okiełznać metryki? Praktyczne porady.

Przejdźmy do mięsa. Co konkretnie możesz zrobić, aby Twoje wskaźniki zaświeciły na zielono? Rozbijmy każdą metrykę na czynniki pierwsze.

Largest Contentful Paint (LCP) – walka o każdą milisekundę

LCP mierzy, jak szybko na ekranie pojawia się największy element (obrazek, blok tekstu, wideo) w widocznym obszarze strony. Idealny wynik to poniżej 2.5 sekundy. Jeśli Twój główny baner ładuje się wieki, to właśnie LCP na tym cierpi.

Co możesz zrobić?

• Optymalizacja obrazów to podstawa. Kompresuj grafiki bez utraty jakości (użyj narzędzi jak Squoosh), stosuj nowoczesne formaty (WebP, AVIF) i serwuj obrazki w odpowiednich rozmiarach dla różnych ekranów (srcset).
• Wskaż przeglądarce priorytet. Dla kluczowego obrazka, który jest Twoim elementem LCP, dodaj atrybut fetchpriority=”high”. To powie przeglądarce: „hej, to jest super ważne, załaduj to w pierwszej kolejności!”.
• Leniwe ładowanie? Tak, ale z głową. Używaj `loading=”lazy”` dla obrazków, które znajdują się poniżej pierwszego ekranu. Nigdy nie stosuj tego dla elementu LCP!
• Zadbaj o szybki serwer. Długi czas odpowiedzi serwera (TTFB – Time To First Byte) zabija LCP. Dobry hosting i ewentualnie sieć CDN (Content Delivery Network) potrafią zdziałać cuda.

Cumulative Layout Shift (CLS) – jak powstrzymać tańczące elementy

CLS mierzy wizualną stabilność strony. Chodzi o to, czy podczas ładowania elementy nie „skaczą”, przesuwając treść i powodując, że użytkownik klika nie tam, gdzie chciał. Idealny wynik to poniżej 0.1.

Nic tak nie irytuje, jak próba kliknięcia w przycisk „Kup teraz”, który w ostatniej chwili ucieka spod kursora, bo nad nim załadowała się reklama.

Jak to naprawić?

• Zawsze określaj wymiary mediów. Dodawaj atrybuty `width` i `height` do tagów `` i `
• Rezerwuj miejsce na dynamiczną treść. Jeśli masz reklamy, banery czy inne elementy ładowane przez JavaScript, z góry zarezerwuj dla nich kontener o stałej wysokości w CSS (np. za pomocą `min-height`).
• Uważaj na fonty. Niestandardowe fonty mogą powodować przesunięcia (FOUT/FOIT). Używaj `font-display: swap;` oraz postaraj się dopasować font systemowy jako fallback.

Interaction to Next Paint (INP) – nowy gracz na boisku responsywności

INP to metryka, która mierzy, jak szybko strona reaguje na interakcję użytkownika (kliknięcie, dotknięcie, wpisanie tekstu). Mówi o ogólnej „płynności” działania strony po załadowaniu. Dobry wynik to poniżej 200 milisekund.

Jak poprawić INP?

• Zoptymalizuj JavaScript. To główny winowajca. Długie, blokujące zadania JS (long tasks) zamrażają stronę i opóźniają reakcję na kliknięcia. Dziel kod na mniejsze części i wykonuj tylko to, co jest absolutnie konieczne.
• Używaj Web Workers. Do skomplikowanych obliczeń, które nie muszą być wykonane w głównym wątku, użyj Web Workers. Dzięki temu interfejs pozostanie w pełni responsywny.
• Opóźniaj wykonanie niekrytycznego kodu. Skrypty analityczne, widgety social media – wszystko to może poczekać. Użyj `requestIdleCallback` lub prostego `setTimeout`, aby odpalić je, gdy przeglądarka będzie miała chwilę oddechu.

Osiągnięcie zielonych wyników w Core Web Vitals to nie jednorazowy sprint, ale maraton. To proces ciągłej optymalizacji i dbania o doświadczenia użytkowników. Zacznij od analizy w PageSpeed Insights, zidentyfikuj największe problemy i krok po kroku wdrażaj poprawki. Efekty – w postaci zadowolonych użytkowników i lepszej widoczności w Google – z pewnością wynagrodzą Ci włożony wysiłek.