Wydajność · SEO

Core Web Vitals w sklepie Shoper — LCP, INP i CLS krok po kroku

Co to są Core Web Vitals i jakie są progi Google

Core Web Vitals to trzy metryki, którymi Google ocenia jakość doświadczenia na stronie: LCP (Largest Contentful Paint — jak szybko widać największy element treści), INP (Interaction to Next Paint — jak szybko strona reaguje na kliknięcia i tapnięcia) oraz CLS (Cumulative Layout Shift — czy układ „skacze” podczas ładowania). Progi „dobry” według dokumentacji Google to: LCP do 2,5 s, INP do 200 ms, CLS do 0,1. Wynik punktowy PageSpeed to tylko skrót; rankingowo i sprzedażowo liczą się te trzy wskaźniki na telefonie.

W sklepie na Shoperze wynik zależy od platformy, szablonu, obrazów, fontów, aplikacji i — najczęściej — od tagów marketingowych w GTM. Samo przejście na Storefront nie gwarantuje zielonych CWV. Ten przewodnik pokazuje, jak zmierzyć sklep, co poprawiać w jakiej kolejności i gdzie leżą typowe hamulce. Szerszy plan PageSpeed z realnych audytów: jak przyspieszyć sklep na Shoperze. Warstwa CDN i cache: Cloudflare dla Shopera.

Jak mierzyć: PageSpeed Insights, CrUX i Search Console

Zacznij od PageSpeed Insights w trybie mobile dla czterech typów stron: strony głównej, kategorii, karty produktu i koszyka. To różne profile obciążenia — hero na startowej nie mówi nic o filtrach w kategorii ani o wariantach na produkcie.

• Dane laboratoryjne (Lighthouse) pomagają znaleźć waterfall, długie zadania JavaScript i element LCP. Nie zastępują danych użytkowników.
• Dane polowe (CrUX) pojawiają się, gdy Google ma wystarczającą próbkę ruchu Chrome dla adresu lub źródła. To one bliżej pokazują, co widzą klienci.
• Raport Core Web Vitals w Google Search Console grupuje podobne adresy (np. wszystkie produkty) i pokazuje skalę problemów „URL-e wymagające poprawy”.

Zapisuj wyniki tabelarycznie: adres, LCP/INP/CLS (lab + field jeśli jest), element LCP, największe skrypty, źródła CLS. Bez pomiaru „przed” nie ocenisz, czy zmiana pomogła.

LCP poniżej 2,5 s: hero, obrazy i priorytet

LCP to zwykle baner na stronie głównej albo główne zdjęcie produktu. W Shoperze najczęstsze błędy to: zbyt ciężki hero (pełna szerokość JPEG bez WebP), brak wymiarów w HTML, leniwe ładowanie obrazu LCP oraz konkurencja wielu zasobów o pasmo na starcie.

1. Zidentyfikuj element LCP w raporcie PSI / DevTools Performance. Nie zgaduj — to czasem nie jest to, co myślisz.
2. WebP/AVIF i właściwy rozmiar. Obraz LCP powinien mieć wariant dopasowany do viewportu, a nie pełną galerię w najwyższej rozdzielczości.
3. width/height lub aspect-ratio w HTML, żeby przeglądarka zarezerwowała miejsce.
4. fetchpriority="high" tylko dla potwierdzonego elementu LCP. Nadanie wysokiego priorytetu całej galerii pogarsza wynik.
5. Nie stosuj lazy loading na LCP. Lazy zostaw dla obrazów poniżej foldu.

W dobrych szablonach Modern część optymalizacji obrazów dzieje się automatycznie, ale hero wstawiony ręcznie albo widget zewnętrzny potrafi to zepsuć. Porównanie generacji frontu: Shoper RWD vs Storefront.

INP poniżej 200 ms: GTM, widgety i główny wątek

INP mierzy opóźnienie od interakcji (klik „do koszyka”, filtr, otwarcie menu) do kolejnego malowania odpowiedzi. W laboratorium przybliżeniem jest Total Blocking Time, ale prawdziwy rozkład interakcji widać dopiero w danych polowych.

W praktyce Shoperowej największy wpływ mają:

• Google Tag Manager — martwe tagi, skrypty reklamowe ładowane na każdej podstronie, wielokrotne nasłuchiwacze.
• Widgety czatu, opinii, map, porównywarek cen uruchamiane od razu po wejściu.
• Ciężka obsługa wariantów i filtrów w szablonie lub aplikacji, jeśli każdy klik przelicza duży DOM synchronicznie.

Kolejność działań: zinwentaryzuj GTM, wyłącz martwe tagi, ogranicz triggery do stron, gdzie są potrzebne, opóźnij niekrytyczne skrypty do pierwszej interakcji. W realnych audytach GrowCommerce bywało, że po poprawie szablonu i obrazów nadal blokował ~1,5 MB JS z tagów — wtedy sufit wyznacza marketing, nie Shoper. Gdy potrzebujesz e-mail marketingu i odzysku koszyka, wybieraj rozwiązania z natywną integracją zamiast dokładać kolejne zewnętrzne skrypty „uniwersalne”. GrowMail łączy się ze sklepem Shoper pod kątem koszyków, zamówień i zgód — bez osobnego „doklejania” pełnego ESP jako kolejnej warstwy widgetów na froncie.

CLS poniżej 0,1: rezerwacja miejsca

CLS rośnie, gdy elementy pojawiają się lub zmieniają rozmiar po starcie renderowania: obrazy bez wymiarów, banery cookie, paski dostawy, widgety opinii, web-fonty, galerie. Lekarstwo jest proste w zasadzie, trudniejsze w utrzymaniu:

• Każdy obraz i iframe z width/height albo stabilnym kontenerem aspect-ratio.
• Fonty z font-display: swap i rozsądną liczbą rodzin/grubości — unikaj „skoku” tekstu po doładowaniu.
• Komunikaty i banery (dostawa, promocja, cookie) w zarezerwowanym miejscu, nie „wypychające” treść z góry.
• Widgety opinii i czatu ładuj tak, by nie przesuwały produktu i przycisku koszyka.

Kolejność prac w sklepie Shoper

Nie optymalizuj wszystkiego naraz. Sensowna kolejność dla właściciela sklepu:

1. Pomiar mobile strony głównej, kategorii, produktu, koszyka + zapis do tabeli.
2. GTM i tagi — zwykle największy zysk przy najmniejszej ingerencji w szablon.
3. Obrazy LCP i wymiary wszystkich obrazów powyżej foldu.
4. Fonty i banery pod CLS.
5. Szablon / Storefront — jeśli lab nadal pokazuje ciężki JS frontu; porównaj RWD i Storefront uczciwie na tych samych URL-ach.
6. Cloudflare — cache statyków, kompresja, ochrona; konfiguruj ostrożnie wokół koszyka i API. Przewodnik: Cloudflare dla sklepu Shoper.

Storefront a Core Web Vitals

Nowa warstwa prezentacji może ułatwić kontrolę komponentów, ale nie jest automatyczną optymalizacją. Na wynik wpływają obrazy, fonty, liczba modułów, kod własny, aplikacje i kolejność ładowania. Przed i po migracji porównaj te same typy stron na mobile: status, canonical, H1, element LCP, INP/CLS, waterfall. URL-e w Shoperze przy migracji RWD→Storefront zwykle zostają — to duża zaleta SEO, o ile nie popsujesz treści i danych produktu. Więcej: RWD vs Storefront oraz szablony Storefront.

Checklista Core Web Vitals dla właściciela sklepu

• Zmierz mobile: strona główna, kategoria, produkt, koszyk (PSI + GSC).
• Zapisałeś LCP/INP/CLS przed zmianami (lab i field, jeśli jest próbka).
• Znasz element LCP na każdej z czterech stron.
• Obraz LCP ma WebP/właściwy rozmiar, wymiary w HTML i nie jest lazy.
• fetchpriority="high" tylko na LCP, nie na całej galerii.
• GTM: usunięte martwe tagi, triggery ograniczone, niekrytyczne skrypty opóźnione.
• Widgety czatu/opinii/map nie ładują się „na wszelki wypadek” na każdej podstronie.
• Obrazy i banery mają zarezerwowane miejsce (CLS).
• Fonty: ograniczona liczba rodzin i grubości.
• Cloudflare ustawiony bez psucia koszyka i API (jeśli używasz).
• Po zmianach ponowny pomiar i porównanie z tabelą „przed”.

Co dalej

Gdy metryki są pod kontrolą, wróć do treści i konwersji: opisy produktów, dane strukturalne, odzysk koszyka. Szybki sklep bez czytelnej oferty i komunikacji po zakupie i tak nie sprzeda. Jeśli potrzebujesz pomocy przy audycie szablonu Modern albo Cloudflare, napisz przez formularz na growcommerce.pl.

Najczęstsze pytania

Adrian Zblewski

GrowCommerce — Platynowy Partner Shoper

Przy audytach sklepów Shoper najczęściej widać ten sam układ: po porządkach w obrazach i szablonie sufit wyznaczają tagi marketingowe. Ten wpis zbiera kolejność pomiaru i napraw pod Core Web Vitals.