Core Web Vitals WordPress - optymalizacja LCP, FID, CLS
Core Web Vitals to metryki Google mierzące doświadczenie użytkownika: szybkość ładowania (LCP), interaktywność (FID/INP), stabilność wizualną (CLS). Od 2021 wpływają na pozycje w Google. Pokażę jak je poprawić w WordPress.
Krótka odpowiedź
LCP - Largest Contentful Paint
Co to:
- Czas do wyrenderowania największego elementu (above the fold)
- Zwykle: hero image, nagłówek H1
- Cel: < 2.5 sekundy
Jak poprawić w WordPress:
Obrazki:
- WebP format (30% mniejszy)
- Preload hero image: add_action('wp_head', fn() => echo '');
- Nie lazy-loaduj above the fold!
- Responsive images (srcset)
Hosting/Server:
- Dobry hosting (TTFB < 500ms)
- Cache (WP Rocket, LiteSpeed Cache)
- CDN dla obrazków
Fonty:
- font-display: swap
- Preload krytycznych fontów
- Lub system fonts (najszybsze)
FID/INP - First Input Delay / Interaction to Next Paint
Co to:
- FID: czas od kliknięcia do reakcji
- INP (nowy, 2024): średnia interaktywność
- Cel: < 100ms
Problem: JavaScript
- Duże skrypty blokują main thread
- Użytkownik klika, strona nie reaguje
Jak poprawić:
Delay JavaScript:
- WP Rocket: Delay JavaScript execution
- Flying Scripts: opóźnij konkretne skrypty
- Skrypty ładują się po interakcji
Remove unused JS:
- Asset CleanUp: wyłącz wtyczki na stronach gdzie nie potrzebne
- Perfmatters: podobne funkcje
Code splitting:
- Nie ładuj wszystkiego na raz
- Async/defer dla non-critical JS
CLS - Cumulative Layout Shift
Co to:
- Przesunięcia elementów podczas ładowania
- Irytujące gdy klikasz i coś się przesuwa
- Cel: < 0.1
Najczęstsze przyczyny:
- Obrazki bez wymiarów
- Dynamiczne reklamy/banery
- Web fonts (FOUT/FOIT)
- Lazy loaded content bez placeholdera
Jak naprawić:
Obrazki:
- Zawsze width i height
- Lub CSS aspect-ratio
- WordPress od 5.5 dodaje automatycznie
Reklamy:
- Zarezerwuj miejsce (min-height)
- Kontener o stałych wymiarach
Fonty:
- font-display: optional (najlepsze dla CLS)
- Lub swap z zbliżonym fallback
Embeds:
- Placeholder o wymiarach docelowych
- YouTube: lite-youtube-embed
Narzędzia do pomiaru i monitoring
PageSpeed Insights:
- pagespeed.web.dev
- Dane laboratoryjne + field data
- Konkretne zalecenia
Google Search Console:
- Core Web Vitals raport
- Dane z realnych użytkowników
- Grupowanie URL po problemach
Chrome DevTools:
- Performance tab
- Lighthouse audit
- Szczegółowa analiza
Web Vitals Extension:
- Rozszerzenie Chrome
- Real-time metryki podczas przeglądania
CrUX Dashboard:
- lookerstudio.google.com/u/0/reporting/...
- Dane historyczne
- Porównanie z konkurencją