Core Web Vitals 2025 — jak poprawić wyniki i wskoczyć na szczyt Google?

Od 2021 roku Google oficjalnie uwzględnia Core Web Vitals w rankingach wyszukiwania. Strona wolna = gorsza pozycja. Ale co dokładnie mierzyć i jak to naprawić? Oto kompletny przewodnik.

Czym są Core Web Vitals?

Core Web Vitals (CWV) to zestaw wskaźników mierzących doświadczenie użytkownika na stronie internetowej. Google używa ich jako sygnału rankingowego w ramach Page Experience.

Trzy główne wskaźniki:

1. LCP (Largest Contentful Paint) — czas do wyświetlenia największego elementu na stronie
2. INP (Interaction to Next Paint) — responsywność na interakcje użytkownika
3. CLS (Cumulative Layout Shift) — stabilność layoutu (czy elementy nie „skaczą")

LCP — Largest Contentful Paint

Co mierzy?

Czas od załadowania strony do renderowania największego widocznego elementu (zazwyczaj hero image, hero text lub baner).

Progi:

• ✅ Dobre: < 2,5 sekundy
• ⚠️ Wymaga poprawy: 2,5 – 4 sekundy
• ❌ Słabe: > 4 sekundy

Jak poprawić LCP?

1. Preloaduj zasoby krytyczne

<link rel="preload" href="/pl/hero.webp" as="image" fetchpriority="high">

2. Optymalizuj obrazy

• Konwertuj do AVIF lub WebP (50–80% mniejszy plik)
• Używaj odpowiednich rozmiarów (srcset, sizes)
• Nigdy nie ładuj obrazów 2000px wide gdy wyświetlają się na 400px

3. Eliminuj render-blocking resources

• CSS krytyczny inline, reszta asynchronicznie
• JavaScript asynchroniczny (async, defer)
• Fonty preloaded i font-display: swap

4. Preconnect do zewnętrznych domen

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://www.googletagmanager.com">

5. Używaj CDN Serwuj statyczne zasoby z sieci CDN bliskiej użytkownikowi. Dla Polski — serwer w Europie Zachodniej.

INP — Interaction to Next Paint

Co mierzy?

Czas od interakcji użytkownika (kliknięcie, dotyk, klawiatura) do wymalowania odpowiedzi na ekranie.

Zastąpił FID (First Input Delay) w marcu 2024.

Progi:

• ✅ Dobre: < 200 ms
• ⚠️ Wymaga poprawy: 200 – 500 ms
• ❌ Słabe: > 500 ms

Jak poprawić INP?

1. Redukuj długie zadania JavaScript Zadania blokujące main thread przez > 50ms to główny winowajca. Rozbij je na mniejsze kawałki używając scheduler.yield() lub setTimeout(0).

2. Odkładaj nieważny JavaScript Google Analytics, czaty, widgety social media — ładuj je po interakcji lub przy idle:

window.addEventListener('load', () => {
  requestIdleCallback(() => loadThirdParty())
})

3. Używaj web workers Ciężkie obliczenia (sorting, filtering dużych list) przenoś do web worker — nie blokuje UI.

4. Wirtualizuj długie listy Lista 10 000 produktów w DOM to katastrofa. Renderuj tylko widoczne elementy (react-window, tanstack-virtual).

CLS — Cumulative Layout Shift

Co mierzy?

Sumę wszystkich nieoczekiwanych przesunięć layoutu podczas ładowania strony.

Progi:

• ✅ Dobre: < 0,1
• ⚠️ Wymaga poprawy: 0,1 – 0,25
• ❌ Słabe: > 0,25

Jak poprawić CLS?

1. Zawsze ustawiaj width i height na obrazach

<!-- Złe -->
<img src="hero.jpg" alt="Hero">

<!-- Dobre -->
<img src="hero.jpg" alt="Hero" width="800" height="600">

Przeglądarka rezerwuje miejsce zanim obraz się załaduje.

2. Rezerwuj miejsce dla reklam i embedów

.ad-container { min-height: 250px; }

3. Unikaj dynamicznego wstawiania treści ponad fold'em Bannery cookies, notyfikacje, bannery promocyjne — powinny pojawiać się na dole lub pushować treść w dół z góry.

4. Używaj font-display: optional lub preloaduj fonty Swap fontu może powodować CLS gdy font ładuje się późno i zmienia metryki tekstu.

Narzędzia do mierzenia Core Web Vitals

1. PageSpeed Insights (PSI)

pagespeed.web.dev — darmowe, daje zarówno dane laboratoryjne jak i dane z rzeczywistych użytkowników Chrome (CrUX).

2. Google Search Console

Raport „Core Web Vitals" pokazuje dane z prawdziwych użytkowników Twojej strony. Ważne: PSI to jedno URL, Search Console to cała strona.

3. Lighthouse

Wbudowany w Chrome DevTools (F12 → Lighthouse). Świetny do szybkiej analizy.

4. WebPageTest

webpagetest.org — bardziej szczegółowy waterfall, filmstrip nagrania, różne lokalizacje serwerów.

5. CrUX Dashboard (Looker Studio)

Darmowy template Google do śledzenia trendów CWV w czasie dla swojej domeny.

Typowe wyniki przed i po optymalizacji

Przykładowy projekt e-commerce (WooCommerce):

Czas optymalizacji: 3 tygodnie.

Core Web Vitals a SEO — co mówią dane?

Badania Ahrefs i Semrush wskazują, że:

• Strony z „dobrymi" CWV mają o 24% wyższy CTR niż ze „słabymi"
• Poprawa LCP o 0,1s = wzrost konwersji o 1% (wg Google)
• 53% użytkowników mobilnych opuszcza stronę ładującą się > 3 sekundy

Podsumowanie: priorytetyzacja poprawek

Jeśli nie wiesz od czego zacząć:

1. Najpierw LCP — najsilniejszy wpływ na SEO i konwersję
2. Potem CLS — frustruje użytkowników, łatwo naprawić
3. Na końcu INP — wymaga analizy kodu, ale poprawia UX

Optymalizacja Core Web Vitals to inwestycja z bezpośrednim przełożeniem na widoczność w Google i konwersję. W Soft Synergy każda strona wychodzi od razu z wynikiem 90+ w PSI — to nasz standard, nie opcja.