Core Web Vitals 2026 — jak poprawić LCP, CLS i INP na WordPress

Core Web Vitals to trzy wskaźniki UX mierzone przez Google (LCP, CLS, INP), które bezpośrednio wpływają na pozycje w wynikach wyszukiwania od 2021 roku. Aby je poprawić na WordPress, skup się na optymalizacji serwera i obrazów (LCP), stabilności layoutu (CLS) i responsywności JavaScript (INP).

Czym są Core Web Vitals i dlaczego wpływają na SEO?

Core Web Vitals (CWV) to zestaw mierników wydajności użytkownika, który Google wbudował w swój algorytm rankingowy jako część Page Experience signals. Od marca 2024 roku INP (Interaction to Next Paint) zastąpił FID (First Input Delay), uzupełniając trójkę wskaźników:

• LCP (Largest Contentful Paint) — czas do wyrenderowania największego elementu widocznego w viewport. Cel: ≤ 2,5 s.
• CLS (Cumulative Layout Shift) — suma nieoczekiwanych przesunięć layoutu. Cel: ≤ 0,1.
• INP (Interaction to Next Paint) — czas odpowiedzi strony na interakcje użytkownika. Cel: ≤ 200 ms.

Google zbiera dane CWV z Chrome w ramach Chrome User Experience Report (CrUX) i używa ich do oceny jakości strony. Strony z dobrymi wynikami CWV mogą liczyć na lekką premię rankingową w wynikach mobilnych i desktopowych.

Ważne: CWV to jeden z setek sygnałów rankingowych — treść i linki nadal dominują. Ale dla stron konkurujących w ciasnych niszach, poprawa CWV może być czynnikiem przechylającym szalę.

LCP (Largest Contentful Paint) — co to i jak poprawić

LCP mierzy jak szybko ładuje się główna treść strony — najczęściej to baner hero, featured image posta lub największy nagłówek H1. Google uważa LCP powyżej 4 sekund za słabe, między 2,5 a 4 s za wymagające poprawy, a poniżej 2,5 s za dobre.

Najczęstsze przyczyny słabego LCP na WordPress

• Obrazy nie są kompresowane ani konwertowane do WebP/AVIF.
• Brak atrybutu fetchpriority="high" na obrazie LCP.
• Hosting współdzielony z wolnym TTFB (Time to First Byte).
• Brak cache'owania pełnych stron (page cache).
• Duże pliki CSS/JS blokujące renderowanie.

Jak poprawić LCP krok po kroku

1. Dodaj preload na obraz LCP:

<link rel="preload" as="image" href="/wp-content/uploads/baner-hero.webp"
      fetchpriority="high"
      imagesrcset="/wp-content/uploads/baner-hero-400.webp 400w,
                   /wp-content/uploads/baner-hero-800.webp 800w"
      imagesizes="100vw">

2. Konwertuj obrazy do WebP: WordPress 5.8+ generuje WebP automatycznie. Możesz też użyć wtyczki Imagify lub ShortPixel, albo przekonwertować masowo przez CLI:

find /var/www/html/wp-content/uploads -name "*.jpg" -exec cwebp {} -o {}.webp \;

3. Skróć TTFB — włącz page cache:

# LiteSpeed Cache (dla hostingów LiteSpeed/OpenLiteSpeed)
wp ls-cache flush

4. Użyj CDN: Cloudflare (bezpłatny) lub BunnyCDN znacząco redukują TTFB dla użytkowników z różnych lokalizacji.

5. Usuń render-blocking resources — defer dla nieistotnych skryptów:

// functions.php
add_filter( 'script_loader_tag', function( $tag, $handle, $src ) {
    $defer = [ 'google-analytics', 'facebook-pixel' ];
    if ( in_array( $handle, $defer ) ) {
        return str_replace( ' src', ' defer src', $tag );
    }
    return $tag;
}, 10, 3 );

CLS (Cumulative Layout Shift) — przyczyny i metody naprawy

CLS mierzy jak bardzo treść "skacze" podczas ładowania strony. Wynik 0 oznacza brak przesunięć. Typowe winowajce na WordPress to reklamy bez zarezerwowanej przestrzeni, obrazy bez atrybutów width i height, czcionki webowe powodujące FOUT/FOIT i elementy wstrzykiwane przez JavaScript.

Najczęstsze przyczyny CLS i poprawki

• Obrazy bez wymiarów — przeglądarka nie może zarezerwować miejsca:

  <!-- Źle -->
  <img src="foto.jpg" alt="Opis">
  
  <!-- Dobrze -->
  <img src="foto.jpg" alt="Opis" width="800" height="600">

• Reklamy bez min-height:

  .ad-wrapper {
      min-height: 250px;
      background: #f5f5f5;
  }

• Czcionki webowe — FOUT:

  @font-face {
      font-family: 'MojFont';
      src: url('mojfont.woff2') format('woff2');
      font-display: swap;
  }

• Elementy wstrzykiwane po załadowaniu strony — bannery cookie, pasy powiadomień. Umieszczaj je zawsze na dole strony lub używaj position: fixed żeby nie przesuwały treści.

INP (Interaction to Next Paint) — nowy wskaźnik od 2024

INP zastąpił FID w marcu 2024 roku i jest znacznie surowszym miernikiem responsywności. O ile FID mierzył tylko czas do pierwszej interakcji, INP mierzy wszystkie interakcje podczas wizyty i raportuje najgorszą z 75. percentyla. Cel: INP ≤ 200 ms.

Co powoduje wysoki INP na WordPress?

• Ciężkie skrypty JS blokujące główny wątek — Elementor, WooCommerce JavaScript, analytics.
• Długie zadania (Long Tasks) — zadania zajmujące main thread powyżej 50 ms.
• Nadmiar event listenerów dodawanych przez wtyczki.

Jak poprawić INP

// Defer non-critical JavaScript — functions.php
add_filter( 'script_loader_tag', function( $tag, $handle ) {
    $no_defer = ['jquery-core', 'jquery-migrate'];
    if ( in_array( $handle, $no_defer ) ) return $tag;
    return str_replace( ' src=', ' defer src=', $tag );
}, 10, 2 );

Użyj Interaction to Next Paint debugger w Chrome DevTools (zakładka Performance → Interactions) aby zlokalizować konkretne interakcje z wysokim INP.

Narzędzia do pomiaru Core Web Vitals

• PageSpeed Insights (pagespeed.web.dev) — dane lab (Lighthouse) + dane field z CrUX. Startuj tutaj.
• Google Search Console → raport Core Web Vitals — dane field dla całej domeny, podział na mobile/desktop.
• Chrome DevTools → Lighthouse, Performance, INP debugger.
• WebPageTest.org — szczegółowy waterfall, filmstrip, porównania A/B.
• web-vitals.js — zbieranie CWV z prawdziwych sesji i wysyłanie do GA4:

<script type="module">
import { onCLS, onINP, onLCP } from 'https://unpkg.com/web-vitals@4/dist/web-vitals.attribution.js';
function sendToGA(metric) {
    gtag('event', metric.name, {
        value: Math.round(metric.name === 'CLS' ? metric.value * 1000 : metric.value),
        metric_id: metric.id,
    });
}
onCLS(sendToGA); onINP(sendToGA); onLCP(sendToGA);
</script>

WordPress-specyficzne optymalizacje (wtyczki, kod, hosting)

Wtyczki do optymalizacji CWV

• WP Rocket — kompleksowe rozwiązanie: page cache, minifikacja CSS/JS, defer JS, lazy load, CDN. Płatna, ~60 USD/rok.
• LiteSpeed Cache — darmowa, bardzo wydajna na hostingach z LiteSpeed. Oferuje QUIC.cloud CDN.
• Imagify / ShortPixel / Smush — automatyczna kompresja obrazów do WebP przy wgrywaniu.
• Flying Scripts — opóźnianie ładowania skryptów po interakcji użytkownika.

Konfiguracja krytycznego CSS (Critical Path CSS)

<!-- Krytyczny CSS wbudowany inline w <head> -->
<style>
body { font-family: system-ui, sans-serif; margin: 0; }
.hero { min-height: 60vh; background: #0d47a1; }
.hero h1 { color: #fff; font-size: clamp(1.5rem, 4vw, 3rem); }
</style>

<!-- Pozostałe style ładowane asynchronicznie -->
<link rel="preload" href="/style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

Hosting a Core Web Vitals

Słaby hosting to częsta przyczyna słabego LCP i wysokiego TTFB. Minimalne wymagania dla dobrego TTFB na WordPress w 2026 roku: VPS z NVMe SSD, PHP 8.2+, Redis/Memcached dla object cache, OPcache włączony. Na hostingu współdzielonym TTFB powyżej 600 ms jest normą — VPS redukuje go często do 100-200 ms.

# Sprawdź TTFB za pomocą curl
curl -o /dev/null -s -w "%{time_starttransfer}" https://twojadomena.pl/

Potrzebujesz profesjonalnej optymalizacji Core Web Vitals na swojej stronie WordPress? Skontaktuj się z nami — audytujemy i optymalizujemy CWV, często osiągając wynik Dobry już po pierwszej sesji pracy.