Core Web Vitals - jak poprawić LCP, INP i CLS? Praktyczny poradnik | Axperts

Core Web Vitals - co to jest i dlaczego ma znaczenie?

Core Web Vitals to zestaw metryk wydajności strony internetowej zdefiniowanych przez Google, które mierzą rzeczywiste doświadczenie użytkownika. Od 2021 roku są oficjalnym czynnikiem rankingowym Google - strony z lepszymi wynikami CWV mają przewagę w wynikach wyszukiwania.

W 2024 roku Google zastąpił metrykę FID (First Input Delay) nową metryką INP (Interaction to Next Paint), co podwyższyło wymagania wobec interaktywności stron. W 2026 roku optymalizacja Core Web Vitals to standard - nie opcja. Jeśli Twoja strona „świeci na czerwono" w PageSpeed Insights, tracisz pozycje w Google i klientów, którzy nie chcą czekać.

Trzy metryki Core Web Vitals

Trzy filary doświadczenia użytkownika mierzone przez Core Web Vitals.

LCP - Largest Contentful Paint

LCP mierzy czas ładowania największego widocznego elementu na stronie - zwykle hero image, banner lub nagłówek H1. To wskaźnik postrzeganej prędkości ładowania.

Dobrze: ≤ 2.5 sekundy
Wymaga poprawy: 2.5 - 4.0 sekundy
Źle: > 4.0 sekundy

Najczęstsze przyczyny słabego LCP:

Duże, niezoptymalizowane obrazy w hero section
Wolny serwer (TTFB > 600ms)
Blokujący render CSS/JS
Brak preloadowania kluczowych zasobów
Zbyt wiele zewnętrznych skryptów (analytics, chatboty, reklamy)

INP - Interaction to Next Paint (następca FID)

INP mierzy responsywność strony na interakcje użytkownika - kliknięcia, tapnięcia, wpisywanie tekstu. Różnica vs. FID: FID mierzył tylko pierwsze kliknięcie, INP mierzy WSZYSTKIE interakcje i raportuje najgorszą z nich (p75). To znacznie trudniejsza metryka do optymalizacji.

Dobrze: ≤ 200 milisekund
Wymaga poprawy: 200 - 500 milisekund
Źle: > 500 milisekund

Najczęstsze przyczyny słabego INP:

Ciężkie JavaScript blokujące main thread
Long Tasks (> 50ms) podczas obsługi eventów
Zbyt wiele event listenerów
Rerendery frameworków JS (React, Vue) przy każdej interakcji
Synchroniczne operacje DOM

CLS - Cumulative Layout Shift

CLS mierzy stabilność wizualną strony - ile elementów przesuwa się niespodziewanie podczas ładowania. Każdy z nas zna frustrację, gdy chcesz kliknąć przycisk, a strona nagle przeskoczy i klikasz coś innego.

Dobrze: ≤ 0.1
Wymaga poprawy: 0.1 - 0.25
Źle: > 0.25

Najczęstsze przyczyny słabego CLS:

Obrazy bez zdefiniowanych wymiarów (width/height)
Reklamy i embedy bez zarezerwowanego miejsca
Dynamicznie ładowane fonty (FOUT/FOIT)
Elementy wstawiane do DOM po załadowaniu (cookie banery, popupy)
Lazy loaded content bez placeholderów

Jak poprawić LCP - praktyczne techniki

Proces skracania czasu wyświetlenia najważniejszego elementu strony.

Optymalizacja obrazów

Obrazy to najczęstsza przyczyna słabego LCP. Oto co zrobić:

Format WebP/AVIF - 25-50% mniejsze niż JPEG przy tej samej jakości
Responsywne obrazy - srcset i sizes, żeby mobile nie pobierał obrazu 2000px
Lazy loading - loading="lazy" na obrazach poniżej folda, ale NIE na hero image
Preload hero image - <link rel="preload" as="image" href="hero.webp">
CDN - serwuj obrazy z Cloudflare CDN, blisko użytkownika

Optymalizacja serwera (TTFB)

Szybki hosting - LiteSpeed, Nginx z PHP 8.2+, HTTP/3
Cache na serwerze - Redis / Memcached, Varnish
CDN - Cloudflare, AWS CloudFront
Baza danych - optymalizacja zapytań, indeksy, connection pooling

Eliminacja blokującego CSS/JS

Critical CSS inline - CSS potrzebny do renderowania above-the-fold wstawiaj inline w <head>
Defer / async skrypty - nie blokuj renderowania JS-em, który nie jest potrzebny od razu
Usuń nieużywany CSS/JS - audyt z Coverage w Chrome DevTools

Jak poprawić INP - praktyczne techniki

Optymalizacja JavaScript

Code splitting - ładuj tylko JS potrzebny na danej stronie (dynamic import)
Break up long tasks - rozbij operacje > 50ms na mniejsze chunki z yield (scheduler.yield)
Debounce i throttle - ograniczaj częstotliwość obsługi eventów (scroll, input, resize)
Web Workers - przenoś ciężkie obliczenia poza main thread
Lazy load third-party scripts - chatboty, analytics, mapy ładuj po interakcji użytkownika

Optymalizacja frameworków

React, Vue i inne frameworkki mogą powodować problem z INP przez nadmierne rerendery:

React.memo i useMemo - zapobieganie niepotrzebnym rerendy
Virtual scrolling - dla długich list (react-window, react-virtualized)
Server Components (Next.js 14) - zero JS po stronie klienta dla statycznych komponentów
startTransition - oznaczanie aktualizacji o niskim priorytecie

Jak poprawić CLS - praktyczne techniki

Zawsze definiuj width i height na obrazach - lub użyj aspect-ratio w CSS
Rezerwuj miejsce na reklamy i embedy - stała wysokość kontenera min-height
Font display: swap + preload fontów - <link rel="preload" as="font" crossorigin>
Cookie baner na dole strony - nie na górze, gdzie przesuwa content
Unikaj insertBefore na widocznym content - dynamiczne elementy dodawaj poniżej viewport

Narzędzia do mierzenia Core Web Vitals

PageSpeed Insights - dane laboratoryjne + field data (dane od prawdziwych użytkowników)
Chrome DevTools → Performance - szczegółowa analiza osi czasu
web.dev/measure - Lighthouse audit online
Search Console → Core Web Vitals - raport z danymi field dla Twojej strony
CrUX Dashboard - Chrome UX Report w Data Studio
web-vitals library - zbieranie metryk CWV w real-time z Twojej strony

Checklist - Core Web Vitals optimization

☐ Obrazy w formacie WebP/AVIF z srcset
☐ Hero image preloaded
☐ TTFB < 600ms (hosting + CDN + cache)
☐ Critical CSS inline, reszta async
☐ JS defer/async, code splitting
☐ No long tasks > 50ms na interakcjach
☐ Explicit width/height na wszystkich obrazach
☐ Font preloaded, font-display: swap
☐ Brak layout shifts na cookie banerach
☐ Testy na prawdziwych urządzeniach (nie tylko localhost)

Optymalizacja Core Web Vitals to proces ciągły - nie jednorazowa akcja. Regularnie monitoruj metryki w Search Console, testuj zmiany w PageSpeed Insights i iteruj. Jeśli potrzebujesz pomocy z optymalizacją, sprawdź naszą ofertę stron internetowych w Szczecinie - każdą stronę budujemy z myślą o perfekcyjnych Core Web Vitals.

Przeczytaj także

Opublikowano 7 marca 2026 przez Dariusz Zalewski

← Wróć do wszystkich artykułów