Core Web Vitals: jak osiągnąć 100/100

Core Web Vitals to kluczowe wskaźniki doświadczenia użytkownika, które Google wykorzystuje jako czynnik rankingowy od 2021 roku. Osiągnięcie wyników 100/100 w PageSpeed Insights to nie tylko prestiż - to realny wpływ na pozycje w wyszukiwarce, konwersję i zadowolenie użytkowników.

W tym przewodniku przedstawimy praktyczne metody optymalizacji Core Web Vitals, oparte na doświadczeniu z dziesiątek projektów. Pokazujemy, jak przejść z wyników "potrzebuje poprawy" do "dobrze" i osiągnąć maksymalne oceny.

Co to są Core Web Vitals?

Core Web Vitals to trzy konkretne metryki, które Google uznaje za kluczowe dla doświadczenia użytkownika:

• LCP (Largest Contentful Paint) - czas załadowania największego elementu widocznego na stronie
• FID (First Input Delay) / INP (Interaction to Next Paint) - czas reakcji na pierwsze działanie użytkownika
• CLS (Cumulative Layout Shift) - stabilność wizualna strony podczas ładowania

Od maja 2024 roku Google zastępuje FID nową metryką INP (Interaction to Next Paint), która mierzy responsywność strony na wszystkie interakcje użytkownika, nie tylko pierwszą.

1. LCP (Largest Contentful Paint) - optymalizacja ładowania

LCP mierzy, jak szybko użytkownik widzi główną zawartość strony. Cel: poniżej 2.5 sekundy (dobrze), powyżej 4 sekundy (słabo).

Najczęstszym elementem LCP jest duże zdjęcie hero, obrazek na górze strony lub blok tekstu. Optymalizacja LCP to przede wszystkim optymalizacja tych elementów.

Sposoby poprawy LCP:

• Optymalizacja obrazów: kompresja (WebP, AVIF), lazy loading, właściwe rozmiary (srcset), preload dla obrazu LCP
• Usunięcie render-blocking resources: przenieś CSS i JS, które nie są krytyczne, na koniec
• Wczesne łączenie z domenami: dodaj rel="preconnect" dla zewnętrznych domen (Google Fonts, CDN)
• CDN: używaj Content Delivery Network do szybkiego dostarczania zasobów
• Server-side rendering (SSR): dla aplikacji React/Vue rozważ Next.js lub Nuxt.js
• Optymalizacja serwera: szybki hosting, kompresja Gzip/Brotli, caching

W projekcie dla firmy budowlanej zmniejszyliśmy LCP z 5.2s do 1.8s poprzez optymalizację obrazu hero (WebP zamiast JPEG, preload, właściwy rozmiar) oraz przeniesienie niekrytycznego CSS. Konwersja wzrosła o 23%.

2. INP (Interaction to Next Paint) - optymalizacja responsywności

INP mierzy, jak szybko strona reaguje na interakcje użytkownika (kliknięcia, naciśnięcia klawiszy, dotknięcia). Cel: poniżej 200ms (dobrze), powyżej 500ms (słabo). To nowa metryka, która od maja 2024 zastępuje FID w Core Web Vitals.

Sposoby poprawy INP:

• Optymalizacja JavaScript: code splitting, tree shaking, usunięcie nieużywanych bibliotek
• Debouncing i throttling: ogranicz częstotliwość wykonywania kosztownych funkcji
• Web Workers: przenieś ciężkie obliczenia do osobnego wątku
• Optymalizacja event listenerów: używaj event delegation, usuwaj nieaktywne listenery
• Lazy loading komponentów: ładuj ciężkie komponenty dopiero gdy są potrzebne
• Unikanie długich zadań: dziel długie operacje na mniejsze części (50ms lub mniej)

Dla sklepu e-commerce zoptymalizowaliśmy filtry produktów - przenieśliśmy filtrowanie do Web Worker i dodaliśmy debouncing. INP poprawił się z 420ms do 180ms.

3. CLS (Cumulative Layout Shift) - stabilność wizualna

CLS mierzy, jak bardzo elementy strony przesuwają się podczas ładowania. Nagłe przesunięcia są frustrujące dla użytkowników (np. kliknięcie w przycisk, który nagle się przesunął). Cel: poniżej 0.1 (dobrze), powyżej 0.25 (słabo).

Główne przyczyny layout shift:

• Obrazy bez określonych wymiarów (width/height)
• Reklamy, embedy, iframe bez zarezerwowanego miejsca
• Fonty ładowane dynamicznie (FOUT/FOIT)
• Treści wstawiane dynamicznie przez JavaScript
• Bannerowe elementy pojawiające się później (cookie consent, newsletter popup)

Sposoby poprawy CLS:

• Zawsze określaj wymiary obrazów: width i height w HTML lub aspect-ratio w CSS
• Zarezerwuj miejsce na reklamy: użyj kontenera o stałym rozmiarze
• Optymalizacja fontów: font-display: swap, preload krytycznych fontów, użyj font-face z font-display
• Unikaj wstawiania treści powyżej istniejącej zawartości: reklamy, banery dodawaj na dole lub w zarezerwowanym miejscu
• Użyj skeleton screens: pokaż szkielet strony podczas ładowania zamiast pustej przestrzeni

W projekcie dla bloga poprawiliśmy CLS z 0.35 do 0.05 poprzez określenie wymiarów wszystkich obrazów i optymalizację ładowania fontów. Użytkownicy przestali zgłaszać problemy z przesuwaniem się treści.

4. Optymalizacja obrazów - klucz do szybkich wyników

Obrazy to często największe pliki na stronie. Ich optymalizacja ma ogromny wpływ na wszystkie Core Web Vitals, szczególnie LCP i CLS.

Kompleksowa strategia optymalizacji obrazów:

• Formaty nowej generacji: WebP (85% mniejszy niż JPEG), AVIF (50% mniejszy niż WebP) z fallback na JPEG
• Kompresja: optymalizuj każdy obraz (TinyPNG, ImageOptim, Sharp w Node.js)
• Responsywne obrazy: użyj srcset i sizes, aby serwować różne rozmiary dla różnych urządzeń
• Lazy loading: loading="lazy" dla obrazów poniżej linii przewijania
• Preload: <link rel="preload"> dla obrazu LCP
• Wymiary: zawsze określ width i height lub użyj aspect-ratio
• CDN: używaj CDN z automatyczną optymalizacją obrazów (Cloudinary, Imgix)

5. Optymalizacja CSS i JavaScript

Render-blocking CSS i JavaScript opóźniają renderowanie strony, co negatywnie wpływa na LCP i INP.

Strategie optymalizacji:

• Critical CSS: inline dla CSS powyżej linii przewijania, resztę ładuj asynchronicznie
• Minifikacja: usuń białe znaki, komentarze, nieużywany kod
• Code splitting: dziel JavaScript na mniejsze chunk'i, ładuj tylko to, co potrzebne
• Tree shaking: usuń nieużywany kod z bibliotek
• Defer/Async: użyj defer dla skryptów niekrytycznych, async dla niezależnych
• Preload/Preconnect: wcześnie łącz z zewnętrznymi zasobami

6. Optymalizacja hostingu i serwera

Nawet najlepiej zoptymalizowana strona będzie wolna, jeśli serwer jest powolny. Wybór hostingu i konfiguracja serwera mają kluczowe znaczenie.

Najważniejsze elementy:

• Szybki hosting: VPS lub dedykowany serwer z SSD, niski TTFB (Time To First Byte)
• CDN: Cloudflare, CloudFront lub inne - dostarczaj zasoby z najbliższego serwera
• Kompresja: Gzip lub Brotli na serwerze (Brotli jest o 15-20% lepszy)
• HTTP/2 lub HTTP/3: szybsze ładowanie wielu zasobów równolegle
• Caching: Cache-Control headers, ETags, serwer-side caching (Redis, Memcached)
• TTFB: cel poniżej 200ms (Time To First Byte)

7. Narzędzia do analizy Core Web Vitals

Nie można optymalizować bez pomiarów. Oto narzędzia, które pomogą Ci analizować Core Web Vitals:

• Google PageSpeed Insights: najważniejsze narzędzie, pokazuje wyniki Lab i Field Data
• Chrome DevTools: Performance tab, Lighthouse, Core Web Vitals overlay
• Google Search Console: Core Web Vitals report z rzeczywistych danych użytkowników
• WebPageTest: szczegółowa analiza z różnych lokalizacji i urządzeń
• GTmetrix: kompleksowy raport wydajności
• Chrome User Experience Report: dane z prawdziwych użytkowników Chrome

8. Najczęstsze błędy obniżające Core Web Vitals

• Nieoptymalizowane obrazy (zbyt duże, zły format, bez lazy loading)
• Render-blocking CSS i JavaScript
• Obrazy bez określonych wymiarów (zły CLS)
• Zbyt wiele zewnętrznych skryptów (Google Analytics, tagi marketingowe)
• Fonty ładowane bezpośrednio z Google Fonts bez optymalizacji
• Wolny serwer lub brak CDN
• Brak kompresji zasobów
• Długie zadania JavaScript blokujące główny wątek

Case study: z 32/100 do 98/100 w PageSpeed

Dla strony firmowej z wynikiem 32/100 przeprowadziliśmy kompleksową optymalizację. Punkt wyjścia: LCP 6.2s, CLS 0.42, FID 380ms.

Wprowadzone zmiany: konwersja obrazów do WebP z fallback, określenie wymiarów wszystkich obrazów, przeniesienie niekrytycznego CSS do końca, code splitting JavaScript, optymalizacja fontów (preload, font-display), wdrożenie CDN, kompresja Brotli na serwerze, optymalizacja TTFB.

Wynik: LCP 1.6s, CLS 0.03, INP 150ms. Ocena PageSpeed: 98/100 na desktop, 95/100 na mobile. Organiczny ruch wzrósł o 28% w ciągu 3 miesięcy, konwersja o 19%.

Podsumowanie: checklist optymalizacji Core Web Vitals

1. Zoptymalizuj obrazy: WebP/AVIF, kompresja, lazy loading, preload dla LCP
2. Określ wymiary obrazów (width/height lub aspect-ratio)
3. Przenieś niekrytyczny CSS i JS na koniec lub użyj defer/async
4. Zoptymalizuj fonty: preload krytycznych, font-display: swap
5. Wdrażaj code splitting i tree shaking w JavaScript
6. Używaj CDN do dostarczania zasobów
7. Włącz kompresję Gzip/Brotli na serwerze
8. Optymalizuj TTFB (szybki hosting, caching)
9. Unikaj długich zadań JavaScript (dziel na mniejsze części)
10. Regularnie mierz wyniki w PageSpeed Insights i Search Console

Optymalizacja Core Web Vitals to proces ciągły. Każda nowa funkcja, obraz czy skrypt może wpłynąć na wyniki. Kluczowe jest regularne monitorowanie i szybkie reagowanie na problemy.

Pamiętaj: celem nie jest osiągnięcie 100/100 za wszelką cenę, ale zapewnienie doskonałego doświadczenia użytkownikom. Często małe poprawki dają duże efekty.

Jeśli chcesz dowiedzieć się więcej o optymalizacji stron, sprawdź nasze artykuły o zwiększaniu konwersji oraz landing pages pod reklamy.