Core Web Vitals WordPress - optymalizacja LCP, FID, CLS

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)

Co to:
- FID: czas od kliknięcia do reakcji
- INP (nowy, 2026): ś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

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

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ą