Core Web Vitals dla e-commerce: poprawki LCP, INP i CLS
Wolne strony produktów kosztują konwersje. Oto, co LCP, INP i CLS naprawdę oznaczają dla e-sklepów i poprawki o największym wpływie dla każdej metryki.
Uruchomiłeś PageSpeed Insights na swojej stronie produktu. Trzy czerwone wskaźniki patrzą na Ciebie. Wynik to 41. Strona ładuje się powoli także na Twoim telefonie testowym, ale nie jesteś pewien, która z trzech metryk faktycznie kosztuje Cię sprzedaż — ani którą naprawić jako pierwszą.
Core Web Vitals to trzy metryki ładowania i interakcji, które Google publikuje dla każdej witryny. Wpływają na ranking na marginesie. Wpływają na konwersję znacznie bardziej. Dla e-sklepu, w którym każda sekunda opóźnienia ścina zaufanie do przycisku „Kup”, sam wpływ na konwersję uzasadnia ich naprawę, jeszcze przed uwzględnieniem SEO.
Trzy metryki w skrócie
- LCP (Largest Contentful Paint) mierzy, ile czasu zajmuje wczytanie największego widocznego elementu — zwykle Twojego hero image produktu. Dobry: poniżej 2,5 sekundy. Słaby: powyżej 4 sekund.
- INP (Interaction to Next Paint) mierzy, jak responsywna jest Twoja strona na tapnięcia i kliknięcia. Zastąpił FID w marcu 2024. Dobry: poniżej 200 ms. Słaby: powyżej 500 ms.
- CLS (Cumulative Layout Shift) mierzy, jak bardzo elementy skaczą podczas ładowania strony. Dobry: poniżej 0,1. Słaby: powyżej 0,25.
Przewodnik Google web.dev o Core Web Vitals zawiera formalne definicje; reszta tego artykułu skupia się na tym, co z tym zrobić w prawdziwym sklepie.
Dlaczego e-commerce obrywa mocniej niż blogi
Wpis blogowy to tekst, może jeden hero image, może osadzony fragment. Strona produktu to hero image, galeria miniatur, widget recenzji, karuzela rekomendacji, dymek czatu, popup upsell, szuflada koszyka, analityka trzech platform, rejestrator heatmap i framework testów A/B. Każdy z nich dostarcza JavaScript. Każdy z nich konkuruje o główny wątek.
Typowy sklep Shopify w 2026 dostarcza jakąś kombinację:
- Klaviyo (przechwytywanie e-maili, popupy)
- Privy lub OptinMonster (exit-intent)
- Smile.io lub Loyalty Lion (widget nagród)
- Yotpo lub Judge.me (recenzje)
- Tidio lub Gorgias (czat)
- Hotjar lub Microsoft Clarity (rejestrowanie sesji)
- GA4, Meta Pixel, TikTok Pixel (analityka)
Każdy z nich wydaje się darmowy, gdy go instalujesz. Żaden z nich nie jest darmowy. Koszt pojawia się najpierw w INP, potem w LCP, a potem w Twoim współczynniku konwersji.
Poprawki LCP dla stron produktów
LCP na stronie produktu to prawie zawsze hero image. Trzy zmiany w kolejności wpływu:
1. Serwuj odpowiedni format i rozmiar. PNG 4000×4000 prosto od Twojego fotografa produktowego ma 6 MB. Ten sam obraz jako odpowiednio rozmiarowane WebP lub AVIF w wymiarach faktycznie renderowanych często ma poniżej 150 KB. Shopify i WooCommerce oba potrafią to zrobić, jeśli przestaniesz nadpisywać ich resizing.
2. Preloaduj hero image. Dodaj wskazówkę preload w <head>, aby przeglądarka zaczęła go pobierać przed parsowaniem reszty strony:
<link rel="preload" as="image"
href="/products/wallet-hero.webp"
imagesrcset="/products/wallet-hero-400.webp 400w,
/products/wallet-hero-800.webp 800w,
/products/wallet-hero-1200.webp 1200w"
imagesizes="(max-width: 768px) 100vw, 50vw">
3. Nie lazy-loaduj obrazów above-the-fold. loading="lazy" na Twoim hero to najczęstszy zabójca LCP na stronach produktów. Lazy-loaduj miniatury i kadry galerii poniżej linii zawijania; nigdy pierwszego widocznego obrazu.
Odniesienie: Optimize LCP na web.dev.
Poprawki INP dla stron produktów
INP to miejsce, w którym większość sklepów ma najtrudniej. Wzorzec jest konsekwentny: strona wygląda na wczytaną, użytkownik klika „Dodaj do koszyka” i jest 600 ms zamrożenia, zanim cokolwiek się stanie. To zamrożenie to JavaScript działający w głównym wątku.
1. Odraczaj nie-krytyczne skrypty. Dodaj defer lub ładuj przez async wszystko, co nie jest potrzebne do renderowania przycisku zakupu. Widgety recenzji, dymki czatu, silniki rekomendacji — wszystko powinno ładować się po tym, jak strona jest interaktywna, a nie w jej trakcie.
2. Audytuj widgety trzecich stron bezlitośnie. Większość sklepów nosi dwa widgety, które wykonują tę samą pracę (dwa narzędzia analityczne, dwa dostawców popupów). Wybierz jeden. Usuń drugi. Każdy dodatkowy widget kumuluje koszty.
3. Zastąp ciężkie widgety recenzji ocenami renderowanymi po stronie serwera. Widget recenzji, który hydratuje 500 recenzji do DOM po stronie klienta, to top-3 przestępca INP. Renderuj zagregowaną ocenę i trzy najlepsze recenzje po stronie serwera; ładuj pełną listę recenzji leniwie, gdy użytkownik do niej dotrze.
Dla sklepów opartych na Next.js / React, dokumentacja React na temat ciężkiej hydracji i strumieniowy SSR Next.js to właściwe króliczy nory.
Poprawki CLS dla stron produktów
Przesunięcie układu jest najtańsze z trzech do naprawienia i najbardziej żenujące do pozostawienia zepsutego. Trzy zmiany:
1. Ustaw wyraźne wymiary dla każdego obrazu. Zawsze dodawaj atrybuty width i height (lub CSS aspect-ratio), aby przeglądarka zarezerwowała miejsce przed wczytaniem obrazu:
<img src="/products/wallet.webp"
width="800" height="800"
alt="Ręcznie zszywany skórzany portfel, widok z przodu">
2. Używaj font-display: swap ostrożnie. Flash niezdefiniowanego stylem tekstu przesuwa układ, gdy wczytuje się niestandardowa czcionka. Albo preloaduj czcionkę, albo użyj font-display: optional, aby zapobiec późnym zamianom.
3. Rezerwuj miejsce dla embedów. Widgety recenzji, karuzele rekomendacji i sloty reklamowe wstrzykujące się nad istniejącą treść powodują kaskadowe przesunięcia. Zawiń je w kontener o stałej wysokości na czas ładowania.
Odniesienie: Optimize CLS.
Jak EshopAuditor pokazuje te problemy
Wynik CWV EshopAuditor odzwierciedla wydajność Twojej strony głównej, mierzoną przez Google PageSpeed Insights w strategiach Mobile i Desktop. Pozostałe zaindeksowane strony są analizowane pod kątem struktury HTML, schematów, metadanych i problemów SEO on-page — ale bez uruchamiania Lighthouse per strona. Per-strona Lighthouse jest obliczeniowo kosztowne w skali; CWV strony głównej jest sygnałem wskazującym typowy profil wydajności całej witryny.
CWV strony głównej jest wskazujące, nie wyczerpujące: jeśli Twoja strona główna jest wolna, strony Twoich produktów prawie zawsze są wolniejsze (ten sam szablon, te same widgety, to samo ładowanie skryptów). Dla dokładnych CWV per strona w całym katalogu sparuj ten raport z widokiem Core Web Vitals w Google Search Console, który używa rzeczywistych danych użytkowników CrUX dla każdego URL-u, dla którego Google ma odsłony.
Niesprawiedliwa prawda o CWV i rankingu
Google był jasny: Core Web Vitals są sygnałem rankingowym, ale drobnym. Dwie strony o porównywalnej jakości treści, na zapytaniu, w którym CWV są zbliżone, zobaczą CWV jako rozstrzygnik. Tyle.
To, na co Core Web Vitals wpływają dramatycznie, to współczynnik konwersji. 1-sekundowe opóźnienie LCP nie spycha Cię z pierwszej na drugą stronę Google. Ale wymiernie szkodzi współczynnikowi checkoutu — a w ruchu e-commerce ten spadek konwersji zwykle przyćmiewa każdy plus lub minus SEO. W skali kwartału ruchu różnica opłaca Twoje narzędzia, wydatki reklamowe i Twój czas wielokrotnie.
Napraw Core Web Vitals, ponieważ czynią one Twój sklep bardziej dochodowym, a nie dlatego, że Google tak każe. Wygrana SEO to bonus.
Uruchom darmowy audyt swojego sklepu na eshopaudit.io — pierwszy skan nie wymaga rejestracji.