W marcu 2024 Google zamienił FID (First Input Delay) na INP (Interaction to Next Paint) jako jeden z trzech mierników Core Web Vitals. To miało większe konsekwencje, niż się wydawało — strony, które miały zielone wyniki, nagle pokazywały czerwone. Co się stało i jak to naprawić — bez przepisywania całego kodu.
Trzy mierniki w 2026#
- LCP (Largest Contentful Paint) — największy widoczny element pokazany w X sekund. Cel: poniżej 2.5s.
- INP (Interaction to Next Paint) — opóźnienie między klikiem a reakcją strony. Cel: poniżej 200ms.
- CLS (Cumulative Layout Shift) — przesunięcia layoutu po załadowaniu. Cel: poniżej 0.1.
Dlaczego INP zabija strony WordPress#
FID mierzył tylko PIERWSZE kliknięcie — często wynik był zaniżony. INP mierzy WSZYSTKIE interakcje (kliki, ruchy myszką, scrolle) i bierze pod uwagę 98 percentyl (czyli najgorszy). Każde menu, każdy popup, każdy slider jest pod lupą.
Tymczasem strony WordPress zwykle mają 15–30 wtyczek, z których każda dodaje JavaScript blokujący wątek główny. Efekt: kliki w menu reagują po 400–600ms = czerwony INP.
Jak naprawić LCP (największy element)#
Optymalizuj hero image
Największy element to zwykle obraz tła hero. Sprawdź, czy jest:
- W formacie WebP/AVIF (nie JPG/PNG) — 30–50% mniejszy plik.
- Dostosowany rozmiarem (1920×1080 dla desktop, 800×600 dla mobile).
- Preloadowany — `<link rel="preload" as="image" href="...">` w head.
- Bez `lazy loading` (lazy zwiększa LCP — używaj `loading="eager"`).
Hostingowa szybkość TTFB
Time To First Byte (czas do pierwszego bajtu) wpływa na LCP. Tani hosting daje TTFB 800–1500ms. Cel: poniżej 200ms. Rozwiązania: dobry hosting (LH.pl Master, OVH SSD), CDN (Cloudflare za darmo), caching (LiteSpeed Cache, WP Rocket).
Jak naprawić INP (reaktywność)#
Mniej wtyczek = lepszy INP
Każda wtyczka JS dodaje obciążenie. Audyt:
- Otwórz Chrome DevTools → Performance → Record interakcji.
- Zobacz, które skrypty blokują wątek (długie żółte/czerwone bloki).
- Wyłącz wtyczki po kolei i mierz ponownie.
- Usuwaj te, których naprawdę nie potrzebujesz (chat widget, social share, popup builder).
Defer JavaScript
Wszystkie skrypty inne niż krytyczne — daj `defer` lub `async`. WordPress: wtyczka Async JavaScript albo WP Rocket robi to automatycznie. Efekt: wątek główny się odblokuje, INP spada.
Wyłącz animacje na hover
CSS animacje 60fps na każdym elemencie zabijają INP. Sprawdź, czy hovery na kartach, menu, przyciskach nie wywołują re-renderów całego komponentu. `will-change: transform` i `transform: translate` zamiast `top/left` to podstawa.
Jak naprawić CLS (przesunięcia)#
- Obrazom dawaj zawsze `width` i `height` w HTML — przeglądarka rezerwuje miejsce.
- Reklamom, embedom YouTube, iframe-om dawaj fixed `min-height`.
- Czcionki: ładuj z `font-display: swap`, ALE dodaj `size-adjust`, żeby nie skakały po podmianie.
- Banner cookies — ładuj go na samym końcu, po `onload` strony.
Narzędzia do mierzenia#
- PageSpeed Insights (pagespeed.web.dev) — Google data, dane real-user.
- Chrome DevTools → Lighthouse — szybki test w przeglądarce.
- Web Vitals Extension Chrome — pokazuje wartości na żywo na każdej stronie.
- Search Console → Core Web Vitals — raport z prawdziwych użytkowników.