Core Web Vitals — jak przyspieszyć sklep i poprawić pozycje w Google

Core Web Vitals to trzy wskaźniki, którymi Google mierzy realne doświadczenie użytkownika na stronie: szybkość ładowania (LCP), responsywność (INP) i stabilność wizualną (CLS). Od 2021 roku są oficjalnym czynnikiem rankingowym. Dla sklepu internetowego to podwójna stawka: wyższe pozycje w Google oraz wyższa konwersja — badania pokazują, że każda dodatkowa sekunda ładowania obniża konwersję o 7%.

Co to są Core Web Vitals

Trzy wskaźniki, które Google raportuje w PageSpeed Insights i Search Console:

• LCP (Largest Contentful Paint) — czas ładowania największego elementu widocznego obszaru.
• INP (Interaction to Next Paint) — opóźnienie reakcji na interakcje użytkownika (zastąpił FID w 2024 r.).
• CLS (Cumulative Layout Shift) — łączna „skoczność” elementów podczas ładowania.

LCP — Largest Contentful Paint

LCP mierzy, jak szybko użytkownik widzi główną treść strony (zwykle obraz hero lub nagłówek). Celem jest poniżej 2,5 s. Najczęstsze przyczyny wolnego LCP:

1. Kompresuj obrazy — konwertuj JPG/PNG do WebP lub AVIF (nawet 30–50% mniejsze). Używaj `loading=lazy` dla obrazów poniżej pierwszego ekranu.
2. Obniż TTFB — włącz cache po stronie serwera (Redis, page cache), użyj hostingu z SSD i HTTP/2. Cel: TTFB poniżej 600 ms.
3. Odrocz JS — oznacz niekrytyczne skrypty `defer` lub `async`. Usuń nieużywane wtyczki (często główny winowajca w WooCommerce).
4. Preload kluczowych zasobów — `` dla fontu i obrazu hero.

Szczegóły dla WordPressa znajdziesz w WooCommerce — optymalizacja wydajności.

INP — Interaction to Next Paint

INP (zastąpił FID w marcu 2024 r.) mierzy opóźnienie reakcji strony na interakcję — kliknięcie, tapnięcie, naciśnięcie klawisza. Cel: poniżej 200 ms. Wolny INP objawia się „zacinaniem” menu, koszyka i filtrów.

Przyczyny i naprawa:

• Długie zadania JavaScript (long tasks) — podziel na mniejsze, użyj requestIdleCallback.
• Ciężkie biblioteki (slidery, animacje) — zastąp lżejszymi lub CSS.
• Zbyt wiele event listenerów — delegacja zdarzeń.
• Nieużywany kod JS — code splitting, tree shaking.

CLS — Cumulative Layout Shift

CLS mierzy, jak bardzo elementy „skaczą” podczas ładowania. Cel: poniżej 0,1. Typowe winowajce w e-commerce: obrazy bez wymiarów, reklamy, banery cookie, fonty powodujące reflow.

Rozwiązania:

• Zawsze ustawiaj width i height dla obrazów i aspect-ratio w CSS.
• Zarezerwuj miejsce na reklamy i banery (stałe wymiary).
• Używaj font-display: swap i preload fontów.
• Unikaj dynamicznego wstrzykiwania treści powyżej istniejącej.

Audyt wydajności — narzędzia

• PageSpeed Insights — łączony raport laboratoryjny + terenowy.
• Chrome UX Report — realne dane z terenu (CrUX).
• Search Console — zakładka Core Web Vitals dla Twoich URL.
• Skaner SEO eChecklista — szybki audyt wydajności i 90+ innych czynników.
• GTmetrix — wodospad żądań i waga zasobów.

Połącz wyniki z SEO dla sklepu, by zamknąć pełny obraz techniczny.

Optymalizacja obrazów

Obrazy to zwykle 50–70% wagi strony e-commerce. Optymalizacja:

1. Formaty nowej generacji: WebP (wsparcie 96% przeglądarek) i AVIF (najmniejsze).
2. loading=lazy dla obrazów poniżej foldu, fetchpriority=high dla hero.
3. Zawsze width/height (redukuje CLS).
4. srcset dla wersji responsywnych (mniejsze na mobile).
5. Kompresja bezstratna narzędziami: Squoosh, TinyPNG, Imagify.

Więcej o fotografii produktowej w Zdjęcia produktów — przewodnik.

Cache, CDN i hosting

• Cache strony — wtyczki WP Rocket, LiteSpeed Cache (WooCommerce) lub wbudowane cache (Shopify, Shoper).
• CDN — Cloudflare (darmowy plan) serwuje obrazy i CSS z lokalizacji blisko klienta.
• Hosting — SSD, HTTP/2, PHP 8+, dedykowany dla e-commerce (np. w chmurze). Współdzielony hosting to częsta przyczyna wolnego TTFB.
• Cache obiektów — Redis/Memcached dla bazy danych WooCommerce.

Pomiar efektów

Po wdrożeniu poprawek zmierz ponownie w PageSpeed Insights i Search Console. Dane z terenu (CrUX) aktualizują się z 28-dniowym oknem — bądź cierpliwy. Skoreluj poprawę z konwersją w Google Analytics 4.

1. Zmierz baseline — zapisz obecne LCP/INP/CLS dla 5 kluczowych URL (strona główna, kategoria, produkt, koszyk, checkout).
2. Optymalizuj obrazy — konwersja do WebP, lazy loading, wymiary. Najwyższy ROI.
3. Cache + CDN — włącz cache strony i Cloudflare.
4. Oczyść JS — usuń nieużywane wtyczki, odrocz skrypty.
5. Zmierz ponownie — po 2–4 tygodniach porównaj CrUX i konwersję.

Podsumowanie

Core Web Vitals to rzadki przypadek, gdzie to, co dobre dla Google, jest też dobre dla sprzedaży. Szybszy sklep rankuje wyżej i konwertuje lepiej. Zacznij od darmowego audytu w skanerze SEO, popraw obrazy i cache, a efekty zobaczysz w pozycjach i przychodach. Jeśli potrzebujesz wdrożenia — zobacz nasze usługi e-commerce i realizacje.

Najczęstsze pytania