📖 Spis treści
1. Czym są Core Web Vitals (CWV)?
Core Web Vitals (Podstawowe Wskaźniki Internetowe) to zestaw ustandaryzowanych przez Google metryk, które oceniają jakość doświadczenia użytkownika (UX) na stronie internetowej. Nie mierzą one po prostu "czasu ładowania w sekundach", lecz skupiają się na tym, jak użytkownik realnie odbiera szybkość i stabilność strony.
Od momentu wprowadzenia ich jako czynnika rankingowego, właściciele stron opartych na WordPressie toczą ciągłą walkę w PageSpeed Insights, aby pozbyć się czerwonych błędów. W 2024 roku nastąpiła kluczowa zmiana: przestarzały wskaźnik FID (First Input Delay) został zastąpiony znacznie trudniejszym do zoptymalizowania INP (Interaction to Next Paint).
Samo osiągnięcie zielonych wyników CWV nie wywinduje Twojej strony automatycznie na 1. miejsce. Jest to jednak "tie-breaker". Jeśli Twoja strona i strona konkurencji mają podobne linki i treści, Google umieści wyżej tę, która ma lepsze Core Web Vitals.
2. Progi Core Web Vitals (Wymagania 2026)
Aby strona została oceniona przez Google jako "Dobra" w raportach Search Console, musi przejść pozytywnie test na 75. percentylu użytkowników (czyli dla 75% odwiedzających) dla wszystkich trzech wskaźników jednocześnie.
(Szybkość ładowania)
(Stabilność wizualna)
(Responsywność)
3. LCP (Largest Contentful Paint) – Jak naprawić w WordPress?
LCP mierzy czas, w jakim renderuje się największy element tekstowy lub graficzny widoczny na ekranie (tzw. "above the fold"). Najczęściej jest to baner hero (Hero Image), główny nagłówek H1 lub duże wideo w tle.
Jeśli Twój LCP jest powolny, użytkownik patrzy na pusty ekran przez kilka sekund. Przyczyny w WordPressie to zazwyczaj wolny hosting (wysokie TTFB), ciężkie niezoptymalizowane obrazki lub blokowanie renderowania przez pliki JavaScript.
Jak zoptymalizować LCP:
- Zoptymalizuj główny obraz (Hero Image): Element, który jest Twoim LCP, powinien być jak najlżejszy. Użyj formatu WebP lub AVIF. Unikaj ładowania sliderów (np. Slider Revolution) powyżej linii przewijania.
- Wyłącz Lazy Loading dla obrazu LCP: To najczęstszy błąd! Obrazki w polu widzenia (na samej górze) NIE MOGĄ mieć atrybutu
loading="lazy", ponieważ opóźnia to ich pobieranie. - Użyj Preload i Fetchpriority: Powiedz przeglądarce, aby pobrała ten konkretny zasób jako pierwszy, zanim w ogóle zacznie analizować CSS.
- Skróć TTFB: Skorzystaj z porządnego hostingu lub wdrożenia wtyczki cache (np. WP Rocket, LiteSpeed Cache), która serwuje statyczny HTML.
// W nowszych wersjach WP można w ten sposób modyfikować atrybuty
add_filter( 'wp_get_attachment_image_attributes', function( $attr, $attachment, $size ) {
// Sprawdź, czy to pierwszy/główny obraz w pętli (pseudokod do dostosowania)
if ( is_main_hero_image() ) {
unset( $attr['loading'] ); // Usuń lazy load
$attr['fetchpriority'] = 'high';
}
return $attr;
}, 10, 3 );4. CLS (Cumulative Layout Shift) – Jak naprawić w WordPress?
CLS mierzy stabilność wizualną strony. Wyobraź sobie sytuację: chcesz kliknąć przycisk "Anuluj", ale ułamek sekundy wcześniej ładuje się reklama, tekst zjeżdża w dół, a Ty klikasz "Kup". To właśnie przesunięcie układu (Layout Shift).
Wynik jest kumulatywny (od 0.0 w górę) – każda niespodziewana zmiana rozmiaru lub pozycji elementów sumuje się do końcowego wyniku CLS.
Jak zoptymalizować CLS:
- Zdefiniuj wymiary (Width/Height) dla obrazów: W WordPressie edytor Gutenberg robi to w większości automatycznie, ale jeśli kodujesz własny motyw, upewnij się, że tagi
<img>posiadają atrybutywidthiheight. Przeglądarka zarezerwuje miejsce zanim obraz się pobierze. - Rezerwuj miejsce dla Iframe'ów i Reklam: Wstawiasz embed z YouTube lub baner AdSense? Opakuj go w div, który ma zdefiniowaną wysokość (np.
min-heightw CSS), by uniknąć zsuwania treści. - Problem FOIT/FOUT z fontami: Gdy strona ładuje czcionkę systemową, a ułamek sekundy później zamienia ją na Google Font (który ma inne odstępy i rozmiar), tekst "skacze". Zawsze ładuj czcionki preaktywnie i z atrybutem
font-display: swap;.
.ad-container {
/* Rezerwuje miejsce, zanim skrypt reklamy załaduje baner */
min-height: 250px;
width: 100%;
display: flex;
justify-content: center;
}Strony budowane na starszych, nieoptymalnych wersjach Elementora lub WPBakery są bardzo podatne na wysoki CLS. Dzieje się tak, gdy style dla widoków mobilnych są aplikowane zbyt późno przez pliki JS zamiast z bezpośrednio wywołanego arkusza CSS w `head`.
5. INP (Interaction to Next Paint) – Jak naprawić w WordPress?
To nowość, z którą zmaga się wielu deweloperów WordPressa w 2026 roku. Wskaźnik INP zastąpił FID i jest od niego znacznie bardziej rygorystyczny. Podczas gdy FID mierzył tylko opóźnienie pierwszego kliknięcia, INP mierzy opóźnienia i responsywność w trakcie całego cyklu życia strony na każdą interakcję użytkownika (klik, tapnięcie, wciśnięcie klawisza).
Jeśli klikasz przycisk na stronie, a ona "zawiesza się" (nic się nie dzieje przez pół sekundy), Twój INP jest tragiczny (powyżej 500ms). Powodem jest zablokowany główny wątek (Main Thread) przeglądarki przez zbyt obciążający JavaScript.
Jak zoptymalizować INP:
- Odłóż ładowanie nieważnych skryptów (Defer/Delay JS): Wtyczki takie jak WP Rocket lub Flying Scripts potrafią opóźnić wykonanie skryptów (np. Google Tag Manager, czaty, widgety społecznościowe) do momentu, gdy użytkownik zacznie przewijać stronę lub poruszy myszką. Zwolni to główny wątek podczas ładowania.
- Redukcja zagnieżdżeń DOM: Im więcej elementów HTML na stronie, tym więcej pracy ma przeglądarka przy każdym przeliczaniu stylu, gdy ktoś coś kliknie. Zmniejsz ilość zagnieżdżonych "divów" (np. używając flexbox kontenerów w Elementorze zamiast wielopiętrowych kolumn i sekcji). Zbyt duży DOM (powyżej 1500 węzłów) to zabójca dla INP na słabych smartfonach.
- Minimalizuj skrypty 3rd party: Kody śledzące Hotjar, Pixel Meta, czy Live Chat pożerają zasoby CPU urządzenia. Spróbuj przenieść je do Google Tag Managera i ładuj je z opóźnieniem.
6. Narzędzia do diagnozy CWV
Pamiętaj, że optymalizacja Core Web Vitals to proces oparty na twardych danych, nie przypuszczeniach.
- Google Search Console (Raport Core Web Vitals): To najważniejsze miejsce. Znajdziesz tu dane z "pola" (CrUX - Chrome User Experience Report), czyli to, co realnie doświadczają Twoi użytkownicy. Zbiera dane z ostatnich 28 dni.
- PageSpeed Insights (zakładka Mobile): Pokazuje zarówno dane rzeczywiste (jeśli masz odpowiednio duży ruch), jak i symulowane z laboratorium (Lighthouse). Diagnozuj błędy na symulacji laboratoryjnej poniżej wyników u samej góry.
- Wtyczka Web Vitals Chrome Extension: Znakomite narzędzie deweloperskie do bieżącego testowania. Podczas nawigacji po własnej stronie na żywo podświetli Ci się wartość LCP, CLS i wyłapie interakcje INP.
7. Podsumowanie
Optymalizacja Core Web Vitals na WordPressie to inwestycja, która zawsze się zwraca. W 2026 roku, gdy algorytmy rygorystycznie traktują wydajność mobile (INP!), nie ma już wymówek dla stron, które "skaczą" i długo się wczytują.
Zacznij od prostych rzeczy: optymalizacji rozmiaru obrazów, wdrażania cache serwerowego (WP Rocket lub LiteSpeed) oraz minimalizacji zbędnych wtyczek ładowanych we frontendzie. Pamiętaj, że zielone Vitalsy to po prostu lepsza konwersja w Twoim biznesie.
