Praktyczny przewodnik po metrykach Google, które bezpośrednio wpływają na pozycję w wyszukiwarce. LCP, INP, CLS - jak osiągnąć Excellent.
Marcin Ledwolorz
CEO, APTURN
W marcu 2021 Google oficjalnie włączyło Core Web Vitals do algorytmu rankingowego. Od tamtej pory wydajność strony jest czynnikiem SEO - nie tylko metryką techniczną. W 2024 roku INP (Interaction to Next Paint) zastąpiło FID jako trzecia metryka. Wiele stron wciąż nie przeszło tej zmiany bez szwanku. Ten artykuł to praktyczny przewodnik - bez teorii, z konkretnymi actionable fixes.
LCP - Largest Contentful Paint
LCP mierzy czas renderowania największego elementu widocznego w viewporcie - zazwyczaj hero image lub główny nagłówek. Próg: Good ≤ 2,5s, Needs Improvement 2,5–4s, Poor >4s. Najczęstsze przyczyny złego LCP: nieoptymalizowane obrazy (brak WebP/AVIF, brak lazy loading z priority hint), wolny TTFB serwera, blokujące zasoby CSS/JS, brak preconnect dla fontów zewnętrznych. Quick wins: dodaj `priority` do hero image w Next.js Image, skonfiguruj CDN dla zasobów statycznych, włącz kompresję gzip/brotli na serwerze.
Next.js tip
W Next.js Image dodaj `priority` do pierwszego obrazu na stronie. To dodaje `<link rel='preload'>` i eliminuje jeden z najczęstszych powodów złego LCP.
INP - Interaction to Next Paint (nowe!)
INP zastąpiło FID w marcu 2024. Podczas gdy FID mierzyło tylko pierwszą interakcję, INP mierzy responsywność przez całe życie strony - każde kliknięcie, tapnięcie, naciśnięcie klawisza. Próg: Good ≤200ms, Needs Improvement 200–500ms, Poor >500ms. Główne przyczyny złego INP: długie zadania JavaScript na głównym wątku, nadmierne re-rendery komponentów React, synchroniczne operacje w event handlerach. Fix: rozbij długie zadania za pomocą `setTimeout(fn, 0)` lub `scheduler.postTask()`, użyj React.memo i useMemo agresywniej, defer non-critical JS.
CLS - Cumulative Layout Shift
CLS mierzy niestabilność layoutu - ile elementów 'skacze' podczas ładowania strony. Próg: Good ≤0.1. Najczęstsze przyczyny: obrazy bez width/height (przeglądarka nie rezerwuje miejsca), dynamicznie wstrzykiwane bannery/reklamy, web fonty powodujące FOUT/FOIT. Fix: zawsze podawaj width i height dla obrazów, używaj `font-display: optional` lub `font-display: swap` z `size-adjust`, rezerwuj miejsce dla reklam i dynamicznych elementów za pomocą min-height.
Narzędzia do audytu i monitoringu
- PageSpeed Insights - szybki audyt z danymi z Chrome User Experience Report
- Google Search Console → Core Web Vitals - dane z prawdziwych użytkowników
- Lighthouse w DevTools - szczegółowa diagnoza z sugestiami
- WebPageTest - zaawansowane testy z waterfallem i filmem ładowania
- Sentry Performance / Datadog RUM - monitoring produkcyjny INP
“Core Web Vitals to nie jednorazowy sprint - to maraton. Każdy deploy może pogorszyć wyniki. Wbuduj monitoring CWV w swój pipeline CI/CD.”
- Marcin Ledwolorz, APTURN
Jak pilnujemy tego w ramach opieki
Najczęstszy powód, dla którego wyniki Core Web Vitals psują się po miesiącach dobrej pracy, to zwykła aktualizacja: nowa wersja motywu dokłada skrypt, wtyczka zmienia sposób ładowania obrazów i LCP rośnie po cichu. Dlatego w opiece serwisowej aktualizacje robimy najpierw na stagingu, a dopiero po testach na produkcji. Dostępność strony sprawdzamy co 5 minut, a wydajność regularnie mierzymy w GTmetrix i PageSpeed Insights, żeby pogorszenie wyłapać przy pierwszym wdrożeniu, a nie przy kwartalnym spadku ruchu z Google.
Strona ma trzymać wyniki, nie tylko je raz osiągnąć
Szczegóły pakietów, w tym testy na stagingu, monitoring i testy wydajności, znajdziesz na stronie opieki serwisowej. Napisz, jaką masz stronę, a doradzimy, który pakiet ma sens.
Potrzebujesz pomocy z tym tematem?
Wdrażamy to, o czym piszemy. Porozmawiaj z nami o swoim projekcie - bezpłatna konsultacja bez zobowiązań.