Core Web Vitals — wydajność strony a SEO i konwersje w 2025

Dlaczego szybkość strony ma znaczenie?

Google od lat sygnalizuje, że doświadczenie użytkownika (w tym szybkość ładowania) wpływa na ranking. W 2021 roku w życie weszły Core Web Vitals — zestaw metryk, które Google używa bezpośrednio przy ocenie stron. W 2025 nadal są jednym z czynników rankingowych i elementem raportów w Google Search Console.

Wpływ na biznes

• Wolna strona = wyższy współczynnik odrzuceń i mniej konwersji. Każda sekunda opóźnienia może obniżyć konwersje o kilka procent.
• Szybka strona = lepsza pozycja w Google (w ramach innych czynników) i wyższa satysfakcja użytkowników.
• Mobile-first — Google indeksuje głównie wersję mobilną. Metryki na mobile są kluczowe.

Trzy Core Web Vitals

1. LCP (Largest Contentful Paint)

Co mierzy: Czas, w którym ładuje się największy element treści w viewport (np. hero image, nagłówek, blok tekstu).

Cel: LCP poniżej 2,5 s — "good". Powyżej 4 s — "poor".

Typowe przyczyny słabego LCP:

• Wolny serwer lub CDN
• Zbyt duże obrazy (brak kompresji, brak responsywności)
• Blokujący JavaScript/CSS (renderowanie)
• Brak preload dla kluczowych zasobów

Jak poprawić:

• Hosting i CDN blisko użytkownika (np. Vercel, Cloudflare)
• Obrazy: WebP/AVIF, responsywne rozmiary (srcset), lazy load poniżej fold
• Optymalizacja fontów (font-display: swap, preload)
• Server-side rendering (SSR) lub static generation dla pierwszej treści

2. INP (Interaction to Next Paint)

Co mierzy: Opóźnienie między interakcją użytkownika (klik, naciśnięcie) a wizualną odpowiedzią strony. Zastąpiło wcześniejsze FID (First Input Delay).

Cel: INP poniżej 200 ms — "good". Powyżej 500 ms — "poor".

Typowe przyczyny słabego INP:

• Ciężki JavaScript blokujący wątek główny
• Długie zadania (long tasks) przy reakcji na klik
• Zbyt duże komponenty React / duża ilość re-renderów

Jak poprawić:

• Dzielenie kodu (code splitting), ładowanie niekrytycznego JS później
• Optymalizacja logiki przy zdarzeniach (debounce, throttle, web workers)
• Unikanie nadmiarowych aktualizacji DOM
• Użycie nowoczesnych frameworków z wirtualnym DOM i optymalizacjami (React 18+, Next.js)

3. CLS (Cumulative Layout Shift)

Co mierzy: "Skakanie" treści — jak bardzo elementy przesuwają się podczas ładowania (np. przez dopisujące się obrazy lub reklamy).

Cel: CLS poniżej 0,1 — "good". Powyżej 0,25 — "poor".

Typowe przyczyny słabego CLS:

• Obrazy i iframe'y bez zadeklarowanych wymiarów (width/height lub aspect-ratio)
• Treści wstrzykiwane dynamicznie nad już wyświetlonym contentem (np. banery)
• Fonty ładujące się z opóźnieniem (FOIT/FOUT) i zmieniające układ

Jak poprawić:

• Zawsze podawaj wymiary obrazów (atrybuty width/height lub style aspect-ratio)
• Zarezerwuj miejsce na reklamy i dynamiczne bloki (skeleton, min-height)
• font-display: swap + preload dla kluczowych fontów; fallback font o podobnych metrykach

Gdzie mierzyć Core Web Vitals?

• Google PageSpeed Insights — wyniki dla URL (mobile/desktop), z sugestiami
• Google Search Console — raport "Doświadczenie" → "Core Web Vitals" (dane z pola, rzeczywiste urządzenia użytkowników)
• Chrome DevTools — zakładka Lighthouse (symulacja)
• Narzędzia RUM (Real User Monitoring) — np. Vercel Analytics, Cloudflare Web Analytics, aby śledzić CWV w czasie rzeczywistym

Technologie przyjazne CWV

• Next.js — SSR, static generation, Image Optimization, code splitting out of the box
• Vercel / Netlify — globalny CDN, edge functions
• Obrazy — Next/Image, odpowiednie formaty i rozmiary
• Fonty — next/font (Next.js) lub optymalizacja przez preload i font-display

Podsumowanie

Core Web Vitals w 2025 to standard, nie opcja. Poprawa LCP, INP i CLS przekłada się na lepsze SEO, niższy bounce rate i wyższe konwersje. Zacznij od pomiaru (PageSpeed Insights + Search Console), zidentyfikuj najsłabsze strony i zasoby, a następnie systematycznie optymalizuj — hosting, obrazy, JavaScript i układ strony.