Core Web Vitals - praktyczny przewodnik optymalizacji
Core Web Vitals to metryki doświadczenia użytkownika, które Google oficjalnie uwzględnia w rankingu. Wolna, niestabilna strona traci pozycje i użytkowników. W tym przewodniku dowiesz się jak zmierzyć i poprawić każdą metrykę.
Krótka odpowiedź
LCP - Largest Contentful Paint
LCP mierzy czas ładowania największego widocznego elementu (zwykle obrazu lub nagłówka).
Cel: poniżej 2.5 sekundy
Najczęstsze przyczyny wolnego LCP:
- Duże, nieskompresowane obrazy
- Wolny czas odpowiedzi serwera (TTFB)
- Blokujący CSS i JavaScript
- Brak lazy loading
Jak poprawić LCP:
1. Optymalizuj obrazy:
- Format WebP (30-50% mniejszy)
- Kompresja (TinyPNG, ShortPixel)
- Responsive images (srcset)
- Preload hero image
2. Przyspiesz serwer:
- Włącz cache (Redis, Varnish)
- Użyj CDN (Cloudflare, Bunny)
- Zoptymalizuj bazę danych
3. Optymalizuj CSS:
- Critical CSS inline
- Reszta CSS asynchronicznie
- Usuń nieużywany CSS
INP - Interaction to Next Paint
INP zastąpił FID i mierzy responsywność strony na interakcje użytkownika (kliknięcia, tapnięcia).
Cel: poniżej 200 milisekund
Przyczyny złego INP:
- Długie zadania JavaScript blokujące main thread
- Zbyt dużo third-party scripts
- Nieefektywne event handlery
Jak poprawić INP:
1. Zoptymalizuj JavaScript:
- Dziel długie zadania na mniejsze (yield to main thread)
- Lazy load nieistotnych skryptów
- Usuwaj nieużywany kod (tree shaking)
2. Ogranicz third-party:
- Audyt tagów i skryptów zewnętrznych
- Ładuj asynchronicznie
- Rozważ usunięcie zbędnych
3. Optymalizuj event handlery:
- Debouncing i throttling
- Nie wykonuj ciężkich operacji w event listenerach
Testuj w Chrome DevTools - zakładka Performance.
CLS - Cumulative Layout Shift
CLS mierzy jak bardzo elementy strony przesuwają się podczas ładowania. Irytujące "skoki" to zły UX.
Cel: poniżej 0.1
Przyczyny złego CLS:
- Obrazy bez określonych wymiarów
- Reklamy i embeddy ładujące się później
- Dynamicznie wstrzykiwana treść
- Fonty powodujące FOIT/FOUT
Jak poprawić CLS:
1. Obrazy i wideo:
- Zawsze określaj width i height
- Używaj aspect-ratio w CSS
- Placeholder dla lazy loaded images
2. Reklamy:
- Rezerwuj miejsce na reklamy (min-height)
- Unikaj reklam nad treścią
3. Fonty:
- font-display: optional lub swap
- Preload ważnych fontów
- Fallback font o podobnych wymiarach
4. Dynamiczna treść:
- Wstawiaj pod istniejącą treść, nie nad
- Rezerwuj miejsce na elementy ładowane później
Narzędzia do mierzenia Core Web Vitals
Mierz i monitoruj regularnie.
Dane laboratoryjne (syntetyczne):
- PageSpeed Insights - szybki test
- Lighthouse (w Chrome DevTools)
- WebPageTest - zaawansowane testy
- GTmetrix
Dane terenowe (od prawdziwych użytkowników):
- Google Search Console - raport Core Web Vitals
- Chrome UX Report (CrUX)
- Google Analytics (Web Vitals library)
Ważne: Dane terenowe są ważniejsze dla Google, bo odzwierciedlają rzeczywiste doświadczenia. Laboratoryjne testy mogą pokazywać inne wyniki.
Priorytetyzacja:
1. Najpierw sprawdź dane terenowe w GSC
2. Zidentyfikuj problematyczne strony
3. Debuguj w Lighthouse/DevTools
4. Testuj poprawki w laboratorium
5. Czekaj na aktualizację danych terenowych (28 dni)
WordPress i Core Web Vitals
WordPress często ma problemy z CWV. Oto sprawdzone rozwiązania.
Wtyczki optymalizacyjne:
- WP Rocket (płatna) - kompleksowa optymalizacja
- LiteSpeed Cache (darmowa dla hostingu LiteSpeed)
- Perfmatters - usuwanie zbędnego kodu
Optymalizacja obrazów:
- ShortPixel lub Imagify - automatyczna kompresja + WebP
- Lazy loading - wbudowane w WP od 5.5
Usuwanie bloatu:
- Wyłącz nieużywane wtyczki
- Usuń emoji script, embed, dashicons
- Ogranicz rewizje i auto-save
Hosting:
- Szybki hosting z SSD, PHP 8+, HTTP/2
- LiteSpeed > Apache
- Object cache (Redis)
Motyw:
- Lekki motyw (GeneratePress, Kadence, Astra)
- Unikaj page builderów dla szybkości