Google podniósł poprzeczkę. INP zastąpiło FID w 2024. W 2026 Core Web Vitals to jeden z TOP-10 czynników rankingowych. Jak osiągnąć zielone pasy w PageSpeed Insights bez przebudowy strony.

3 metryki, które się liczą

LCP (Largest Contentful Paint) — najważniejszy element widoczny < 2.5s. INP (Interaction to Next Paint) — reakcja na klik < 200ms. CLS (Cumulative Layout Shift) — przesunięcia layoutu < 0.1.

LCP — quick wins

1) Hero image: width/height attributes + preload + WebP. 2) Hosting z CDN (Cloudflare free). 3) Render-blocking CSS minimalizuj (defer non-critical). 4) Fonty: font-display:swap, preload główne.

INP — najczęstsze problemy

Heavy JS na onClick (analytics, third-party). Rozwiązanie: debounce, defer non-critical, requestIdleCallback. Unika ciężkich operacji syncronicznie podczas interakcji.

CLS — layout shifts to easy fix

1) Image dimensions zawsze (width/height). 2) Reserve space dla ads/embeds (min-height). 3) Web fonts: font-display:optional lub size-adjust. 4) Insertowanie nowych elementów na DOM tylko nad fold lub po user interaction.

Narzędzia diagnostyczne

PageSpeed Insights (Google) — start. WebPageTest.org — głębsza analiza. Chrome DevTools → Performance → Web Vitals. Real User Monitoring: CrUX Dashboard, SpeedCurve.

Magic bullets — jeśli masz WordPressa

Pluginy: WP Rocket (płatny), Litespeed Cache (darmowy jeśli LiteSpeed serwer), Perfmatters (płatny). Cache + minification + lazy load + image optimization w jednym.

Kluczowe wnioski

  • LCP < 2.5s, INP < 200ms, CLS < 0.1 = zielone pasy.
  • Hero image z preload + WebP = największy zysk LCP.
  • Heavy JS na onClick = najczęstszy zabójca INP.
  • Image dimensions + reserved space = CLS fix.
  • PageSpeed Insights → WebPageTest → Real User Monitoring.

Potrzebujesz wsparcia z tematu tego artykułu?

Zobacz: Projektowanie Stron