Twój sklep Shopify jest za wolny: jak zoptymalizować szybkość i Core Web Vitals
Każda sekunda opóźnienia ładowania strony kosztuje Cię 7% konwersji. Przy obrocie 100 000 PLN/mies. to 7 000 PLN stracone co miesiąc — bo strona ładuje się sekundę za długo.
Google potwierdza: Core Web Vitals są czynnikiem rankingowym. Wolny sklep = niższe pozycje w Google = mniej organicznego ruchu. A na mobile (72% ruchu w Polsce) problem jest jeszcze większy.
W Polar Commerce optymalizujemy szybkość Shopify co tydzień. Większość sklepów ma wynik Lighthouse 40-60 na mobile. Po optymalizacji osiągamy 75-90. W tym artykule pokażemy jak.
Jak zmierzyć szybkość
Google Lighthouse Narzędzie wbudowane w Chrome DevTools. F12 → Lighthouse → Generate report. Mierzy: Performance, Accessibility, Best Practices, SEO.
Cel: Mobile Performance 75+ (dobrze), 90+ (świetnie)
PageSpeed Insights pagespeed.web.dev — narzędzie Google testujące realną szybkość na danych z Chrome UX Report.
Core Web Vitals Trzy kluczowe metryki: - LCP (Largest Contentful Paint) — kiedy główny element strony się załaduje. Cel: < 2.5s - INP (Interaction to Next Paint) — jak szybko strona reaguje na klik. Cel: < 200ms - CLS (Cumulative Layout Shift) — czy elementy strony skaczą podczas ładowania. Cel: < 0.1
Największe problemy szybkości na Shopify
1. Nieoptymalizowane obrazy (60% przypadków) Najczęstsza przyczyna wolnego sklepu. Zdjęcia produktów w formacie PNG 5 MB zamiast WebP 200 KB.
Rozwiązanie:
- Shopify automatycznie konwertuje obrazy do WebP — ale musisz używać img_url z parametrem rozmiaru
- Nie uploaduj zdjęć większych niż 2000x2000px
- Używaj responsive images (srcset) — motyw powinien to robić automatycznie
- Lazy loading dla obrazów poniżej fold — atrybut loading="lazy"
Quick win: W Theme Editor sprawdź hero image na stronie głównej. Jeśli to plik 3 MB+ — zmniejsz do 1000px szerokości i skompresuj.
2. App bloat (30% przypadków) Każda zainstalowana aplikacja dodaje JavaScript i CSS do Twojego sklepu. 15 aplikacji? To może być 500 KB+ dodatkowego kodu na każdej stronie.
Rozwiązanie:
- Odinstaluj aplikacje, których nie używasz (nie wyłącz — odinstaluj!)
- Sprawdź: Apps → zainstalowane aplikacje. Każda z nich, nawet wyłączona, może ładować swój kod.
- Po odinstalowaniu sprawdź theme code — niektóre aplikacje zostawiają "zombie kod" w theme files. Szukaj snippetów z nazwą aplikacji.
- Cel: max 5-8 aktywnych aplikacji
Quick win: Odinstaluj 3 aplikacje, których nie używasz aktywnie. Zmierz Lighthouse przed i po.
3. Ciężki motyw (20% przypadków) Premium motywy z 50+ funkcjami ładują kod dla WSZYSTKICH funkcji, nawet wyłączonych.
Rozwiązanie:
- W ustawieniach motywu wyłącz funkcje, których nie używasz (countdown timer, popup, Instagram feed, etc.)
- Dawn i inne darmowe motywy są szybsze niż premium — jeśli nie potrzebujesz zaawansowanych funkcji
- Rozważ custom motyw — ładuje tylko to, co potrzebne
4. Zewnętrzne skrypty Google Analytics, Facebook Pixel, Hotjar, czat na żywo, Trustpilot widget — każdy dodaje 50-200 KB JS.
Rozwiązanie:
- Załaduj skrypty asynchronicznie (async/defer)
- Użyj Google Tag Manager zamiast osobnych skryptów — jeden kontener zamiast 5 osobnych
- Rozważ server-side tracking (Shopify Customer Events) zamiast client-side pikseli
- Czat na żywo — załaduj lazy (po scrollu lub po 5 sekundach)
5. Fonty Custom fonty (Google Fonts, Adobe Fonts) mogą blokować renderowanie strony.
Rozwiązanie:
- Używaj font-display: swap — tekst wyświetla się od razu, font ładuje się w tle
- Ogranicz do 1-2 fontów, 2-3 wariantów (regular, bold)
- Preload kluczowych fontów: link rel="preload" href="font.woff2"
- Rozważ system fonts (system-ui, -apple-system) — zero dodatkowego ładowania
Optymalizacja krok po kroku
Krok 1: Audyt (30 min) 1. Zmierz Lighthouse na mobile dla: strona główna, strona kolekcji, strona produktu 2. Zanotuj wyniki LCP, INP, CLS 3. Sprawdź listę zainstalowanych aplikacji 4. Sprawdź rozmiar obrazów (DevTools → Network → Img)
Krok 2: Quick wins (1-2h) 1. Odinstaluj nieużywane aplikacje 2. Skompresuj hero image na stronie głównej 3. Wyłącz nieużywane funkcje motywu 4. Dodaj lazy loading do obrazów (jeśli motyw nie robi tego automatycznie)
Krok 3: Zaawansowana optymalizacja (4-8h) 1. Audyt theme code — usunięcie zombie kodu z odinstalowanych aplikacji 2. Optymalizacja fontów — preload, font-display: swap 3. Konsolidacja skryptów w GTM 4. Optymalizacja Critical CSS (powyżej fold) 5. Preconnect do zewnętrznych domen (CDN, fonts, analytics)
Krok 4: Monitoring Sprawdzaj szybkość co miesiąc. Każda nowa aplikacja, każda zmiana motywu może wpłynąć na wynik.
Czego NIE robić
1. Nie usuwaj tracking pikseli — Google Analytics i Facebook Pixel są potrzebne do marketingu. Załaduj je poprawnie (async), ale nie usuwaj. 2. Nie kompresuj obrazów do pixelacji — jakość zdjęć produktowych jest ważniejsza niż 50ms szybkości. 3. Nie obsesyjnie goniaj za Lighthouse 100 — 75-85 na mobile to realistyczny i wystarczający cel dla sklepu Shopify z aplikacjami. 4. Nie wyłączaj ważnych funkcji — Klaviyo popup, Judge.me widget — te elementy konwertują. Lepiej wolniejsza strona z reviews niż szybka bez nich.
Podsumowanie
Optymalizacja szybkości to nie jednorazowa akcja — to ciągły proces. Zacznij od quick wins (odinstaluj niepotrzebne aplikacje, skompresuj obrazy), zmierz efekt, i stopniowo wdrażaj zaawansowane optymalizacje.
W Polar Commerce przeprowadzamy audyty szybkości i optymalizację polskich sklepów Shopify. Od quick wins po zaawansowane zmiany w theme code. Napisz do nas na polar-commerce.com/kontakt — zmierzymy Twój sklep i pokażemy co poprawić.