Core Web Vitals 2026 — co się zmieniło i jak naprawić
INP zastąpił FID, LCP wymaga 2.5s, a CLS musi być pod 0.1. Praktyczny przewodnik po Core Web Vitals 2026 z metodami naprawy każdej metryki.
Trzy metryki, które decydują o pozycjach
Core Web Vitals to zestaw trzech metryk Google mierzących doświadczenie użytkownika. LCP (Largest Contentful Paint) — czas pojawienia się największego elementu na ekranie. Cel: ≤ 2.5 sekundy. INP (Interaction to Next Paint) — opóźnienie reakcji strony na interakcję użytkownika (od marca 2024 zastąpił FID). Cel: ≤ 200 ms. CLS (Cumulative Layout Shift) — przesuwanie się elementów podczas ładowania. Cel: ≤ 0.1. Strony, które nie spełniają progów, dostają obniżkę pozycji w Google — mierzalna od 2 do 8 pozycji w zależności od konkurencji w niszy.
Jak naprawić LCP (najczęstsze winowajcy)
LCP najczęściej psują trzy rzeczy. Niezoptymalizowane obrazy — używaj next/image z formatem AVIF lub WebP (3-5× mniejsze niż JPG). Wolny serwer — TTFB powyżej 600 ms = problem; rozwiązanie to lepszy hosting (zobacz jak wybrać hosting) lub CDN (Cloudflare, Vercel). Render-blocking resources — duże pliki CSS/JS ładowane synchronicznie. Rozwiązanie: critical CSS inline, defer/async dla JS, code splitting. Cel po optymalizacji: LCP < 1.5s na desktop, < 2.0s na mobile. Test: PageSpeed Insights (real user data, nie tylko lab).
INP — nowa metryka, nowe wyzwanie
INP mierzy opóźnienie między kliknięciem/dotykiem a wizualną reakcją strony — i to tutaj większość stron poległa po marcu 2024. Główni winowajcy: ciężki JavaScript blokujący main thread, długie task-i (>50 ms), nieoptymalne event listenery, frameworki bez optymalizacji (np. nieaktualizowany WordPress z dziesiątkami pluginów). Naprawa: code splitting (ładuj tylko to, co potrzebne na danej stronie), web workers dla ciężkich obliczeń, debouncing input handlerów, requestIdleCallback dla niskopriorytetowych zadań. Strony na Next.js z React Server Components mają INP zwykle <100 ms out-of-the-box.
CLS — układ strony nie może 'skakać'
CLS rośnie głównie przez 4 błędy. Obrazy bez zarezerwowanych wymiarów — zawsze podawaj width i height (lub aspect-ratio w CSS). Fonty webfont ładowane bez fallbacku — używaj font-display: swap z dopasowanym fallbackiem. Reklamy i embedy bez zarezerwowanego miejsca — zawsze rezerwuj kontener o znanej wysokości. Dynamicznie wstawiane treści (banery cookies, popupy) — wstawiaj je nad fold lub poza fold, nie w środku artykułu. Cel: CLS < 0.05. Pełen audyt techniczny strony oraz pomoc z optymalizacją — zobacz pakiety SEO lub pisz na kontakt.