Performance sklepu — wydajność i Core Web Vitals

Szybkość sklepu internetowego to nie „miły dodatek”, tylko twardy czynnik rankingowy Google i bezpośredni stymulator sprzedaży. Każde 100 ms opóźnienia w czasie ładowania to średnio -1% konwersji (dane z raportów Amazon i Walmart). Dla sklepu z obrotem 1 mln zł miesięcznie oznacza to stratę 10 000 zł na każde 0,1 sekundy. Core Web Vitals (CWV) to obecnie oficjalny sygnał rankingowy w Google Search – jeśli Twoje LCP, CLS lub INP są w czerwonej strefie, nie licz na wysokie pozycje w organicu, niezależnie od jakości treści.

Dlaczego szybkość to SEO i konwersja?

Google od 2021 roku używa CWV jako czynnika rankingowego w ramach aktualizacji Page Experience. Wolny sklep = niższe pozycje, szczególnie w wynikach mobilnych. Ale to nie tylko SEO – użytkownik, który czeka dłużej niż 3 sekundy na załadowanie strony produktu, ma 53% szans na porzucenie (dane Google/SOASTA). Szybkość wpływa bezpośrednio na:

• Współczynnik odrzuceń (bounce rate) – im dłużej ładuje się strona, tym więcej osób wychodzi.
• Głębokość sesji – szybkie strony zachęcają do przeglądania kolejnych kategorii.
• Wartość koszyka – wolne procesy (dodawanie do koszyka, przejście do kasy) zabijają impuls zakupowy.

Core Web Vitals: LCP, CLS, INP – co musisz wiedzieć

LCP (Largest Contentful Paint) – czas ładowania głównego elementu

• Cel: poniżej 2,5 s.
• Problem: najczęściej wina ciężkich obrazów, wolnego serwera (TTFB) lub blokującego renderowanie CSS/JS.
• Przykład: baner główny o wadze 2 MB w formacie PNG – LCP leci na 6-8 s.

CLS (Cumulative Layout Shift) – stabilność układu

• Cel: poniżej 0,1.
• Problem: dynamicznie wczytywane reklamy, obrazki bez atrybutów width/height, wstrzykiwane skrypty (np. czat, banery).
• Przykład: użytkownik klika w „Dodaj do koszyka”, a w tym momencie ładuje się baner promocyjny i przesuwa przycisk – klika w reklamę, złość, wyjście.

INP (Interaction to Next Paint) – responsywność interakcji

• Cel: poniżej 200 ms.
• Problem: ciężki JavaScript blokujący główny wątek, zbyt wiele skryptów analitycznych, nieoptymalne eventy.
• Przykład: kliknięcie w filtr kategorii – strona zamiera na 1,5 s, bo skrypt przelicza setki produktów w jednym wątku.

Najczęstsze problemy w sklepach e-commerce

1. Obrazy bez optymalizacji – zdjęcia produktów w oryginalnej rozdzielczości (4000x3000 px) w formacie JPEG, bez WebP/AVIF.
2. Nadmiar skryptów zewnętrznych – 10+ skryptów: Google Analytics, Facebook Pixel, Hotjar, czat, newsletter pop-up, reklamy – każdy blokuje renderowanie.
3. Brak lazy loadingu – wszystkie obrazki ładują się od razu, nawet te poniżej folda.
4. Ciężki motyw/premium builder – szablony z wbudowanymi sliderami, animacjami i niepotrzebnym CSS.
5. Wolny hosting – współdzielone serwery, brak CDN, brak cache Redis/Varnish.
6. Nieoptymalne czcionki – wczytywanie 4-5 wag czcionek Google Fonts bez font-display: swap.

Jak mierzyć i poprawiać – konkretne kroki

Pomiar

• Google PageSpeed Insights – daje konkretne wartości LCP, CLS, INP dla urządzeń mobilnych i desktop.
• CrUX (Chrome User Experience Report) – rzeczywiste dane od użytkowników, a nie tylko test laboratoryjny.
• Lighthouse w DevTools – audyt lokalny, przydatny do debugowania.
• GTmetrix / WebPageTest – szczegółowe wykresy wodospadu (waterfall) – widzisz, który zasób blokuje ładowanie.

Poprawa – realne działania

• Obrazy: konwertuj do WebP/AVIF, ustaw wymiary w HTML (width i height), wdróż lazy loading (loading="lazy").
• Serwer i CDN: przejdź na hosting VPS lub dedykowany, włącz Cloudflare (lub inny CDN), skonfiguruj cache przeglądarki i Redis.
• JavaScript: odrocz (defer) lub dodaj async do skryptów, pozbądź się nieużywanych wtyczek, zminifikuj JS i CSS.
• Czcionki: używaj font-display: swap, ogranicz do 2-3 wag, hostuj lokalnie zamiast z Google.
• CLS: ustaw stałe wymiary dla wszystkich obrazków, iframe i reklam. Unikaj wstrzykiwania dynamicznych elementów nad treścią.
• INP: przenieś ciężkie obliczenia do Web Workerów, ogranicz liczbę listenerów, unikaj długich zadań w głównym wątku.

Realne efekty – case study

Sklep z odzieżą (Magento 2): przed optymalizacją LCP 5,2 s, CLS 0,35, INP 450 ms. Po wdrożeniu WebP, CDN, defer JS i cache Redis: LCP 1,8 s, CLS 0,05, INP 180 ms. Efekt: wzrost konwersji o 22% w ciągu 4 tygodni, spadek bounce rate z 68% na 51%, wzrost pozycji w Google o 3-5 miejsc dla fraz produktowych.

Sklep z elektroniką (Shopify): problemem był ciężki motyw i 8 skryptów zewnętrznych. Po zmianie motywu na lekki (Dawn) i agregacji skryptów: LCP spadł z 4,1 s do 2,2 s. Efekt: wzrost przychodu o 15% miesiąc do miesiąca, bez dodatkowych wydatków na reklamę.

Performance to nie projekt IT – to ciągły proces. Mierz co tydzień, optymalizuj iteracyjnie, a efekty zobaczysz w Google Analytics i na koncie bankowym.

To działa najlepiej nie w pojedynkę, lecz jako element przegląd techniczny sklepu — bo w e-commerce pojedyncza poprawka rzadko przesuwa wynik, a system poprawek owszem.