Core Web Vitals na WordPress: jak zbić LCP/INP/CLS (praktyczny poradnik)

Core Web Vitals to trzy wskaźniki od Google, które opisują jak szybko użytkownik odczuwa Twoją stronę: kiedy widzi główny element (LCP), jak szybko strona reaguje (INP) i czy układ nie skacze (CLS). Poniżej — bez technicznego żargonu — dostajesz gotowe ustawienia dla WordPress, które zbijają LCP/INP/CLS w ciągu jednego popołudnia.

Co mierzy LCP/INP/CLS (w skrócie dla właściciela firmy)

• LCP (Largest Contentful Paint): największy element nad foldem (zwykle obraz HERO). Cel: ≤ 2,5 s.
• INP (Interaction to Next Paint): szybkość reakcji po kliknięciu. Cel: ≤ 200 ms.
• CLS (Cumulative Layout Shift): „skakanie” treści w trakcie ładowania. Cel: ≤ 0,10.

Szybkie wygrane (15–30 min)

1. Obraz HERO jako <img>, format WebP ≤ 150 KB, ustaw w bloku Loading: Eager (wyłącz lazy) i dodaj klasę fp-lcp.
2. Reszta obrazów: WebP, rozmiar ≤ 100 KB, lazy-load ON, ustaw width/height (eliminuje CLS).
3. Czcionki lokalnie: Astra → Performance → Load Google Fonts locally + Preload local fonts, zostaw tylko potrzebne grubości (np. 400/600/700).
4. LiteSpeed Cache (bezpieczny zestaw):
   • CSS: Minify ON, Critical CSS ON (Per URL), Load CSS Async ON
   • JS: Minify ON, Defer ON
   • Cache: Page Cache ON, Browser Cache ON
   • Media: Image WebP Replacement ON, Lazy Load Images ON (wyklucz fp-lcp i logo)

Dalsze kroki (gdy chcesz jeszcze szybciej)

• UCSS (Unused CSS): usuń nieużywany CSS w LSCache (Per Page), jeśli coś „miga”, dodaj wyjątki.
• Delay JS: opóźnij JS niekrytyczny; jeśli coś przestanie działać (np. slider), dodaj wyjątki.
• CDN/QUIC.cloud + Redis (jeśli hosting pozwala) – mniejszy TTFB.
• Wyłącz zbędne bloki w Spectrze i usuń wtyczki, których nie używasz.

Sprawdź naszą ofertę!

Jak testować i czytać wyniki

• PageSpeed (Mobile) – sprawdź LCP/INP/CLS „na żywo”.
• Search Console → Core Web Vitals – dane z prawdziwych użytkowników (najważniejsze).
• Testuj po purge cache i w oknie prywatnym.

Podsumowanie

Zbij LCP obrazem HERO bez lazy, lokalnymi fontami i sensownym cache. Dołóż lazy-load, rozmiary obrazów i porządek w CSS/JS — i masz CWV w zielonej strefie, co wspiera SEO i konwersję.