Optymalizacja szybkości sklepu Shopify: Co naprawdę przynosi efekty (Case Study)
Wynik PageSpeed 23 na urządzeniach mobilnych. Współczynnik porzuconych koszyków wynoszący 81%. Przychody na tym samym poziomie przez trzy kolejne miesiące, pomimo rosnących wydatków na reklamy.
Takie były liczby, gdy marka odzieżowa z Warszawy zgłosiła się do Step-Media pod koniec 2025 roku. Ich sklep Shopify został zbudowany dwa lata wcześniej przez freelancera, który priorytetyzował efekty wizualne ponad wydajność. Kiedy się z nami skontaktowali, każdy dodatkowy dolar wydany na reklamy przepadał z powodu zbyt wolnego sklepu, który nie konwertował.
To studium przypadku dokumentuje dokładnie to, co znaleźliśmy, co naprawiliśmy i jakie były wyniki 60 dni po ponownym uruchomieniu.
Dlaczego szybkość sklepu Shopify ma większe znaczenie, niż myślisz
Najpierw podam liczby.
Według badań Google, gdy czas ładowania strony wzrasta z 1 sekundy do 3 sekund, prawdopodobieństwo odrzucenia strony przez użytkownika mobilnego wzrasta o 32%. Od 1 do 5 sekund wynosi 90%. Od 1 do 10 sekund 123%.
Badanie Deloitte dotyczące wydajności mobilnej wykazało, że poprawa szybkości witryny o 0,1 sekundy skutkuje 8,4% wzrostem konwersji dla witryn handlowych i 9,2% wzrostem średniej wartości zamówienia.
Dla sklepu generującego 20 000 euro/miesiąc przychodu, poprawa konwersji o 10% oznacza 2 000 euro więcej miesięcznie — co miesiąc, bez zwiększania nawet jednego euro na wydatki reklamowe.
Szybkość to nie techniczny wskaźnik próżności. To bezpośredni, mierzalny przychód.
Audyt: Co znaleźliśmy
Kiedy przeprowadziliśmy pełny audyt techniczny sklepu, oto co pokazała diagnoza:
Problem 1: 14 aplikacji uruchamiających JavaScript na każdej stronie
Sklep miał zainstalowane łącznie 23 aplikacje. Spośród nich, 14 wstrzykiwało skrypty na każdą stronę — w tym aplikacje, które były używane tylko na konkretnych stronach (aplikacja z tabelą rozmiarów działająca na stronie głównej, aplikacja do cen hurtowych działająca na każdej stronie produktu, niezależnie od tego, czy klient był hurtownikiem, czy nie).
Wpływ: Każdy skrypt aplikacji dodawał 50–400 ms do czasu ładowania strony. Skumulowany efekt: ponad 3 sekundy niepotrzebnego JavaScriptu, zanim wyświetlono choćby jeden piksel.
Problem 2: Niezoptymalizowane obrazy (średni rozmiar: 2,8 MB)
Zdjęcia produktów były przesyłane w oryginalnej rozdzielczości aparatu — średnio 2,8 MB na obraz. Na stronie produktu z 6 zdjęciami, to prawie 17 MB danych obrazu ładowanych, zanim klient mógł ocenić produkt.
Shopify automatycznie serwuje obrazy WebP poprzez swój CDN, ale tylko jeśli oryginalne pliki są odpowiednio rozmiarowane. Pliki większe niż 4096 pikseli w którymkolwiek wymiarze omijają optymalizację Shopify.
Wpływ: Obrazy były największym pojedynczym czynnikiem spowalniającym ładowanie, odpowiadając za około 60% całkowitej wagi strony.
Problem 3: Niestandardowe pliki czcionek ładowane bez preładowania
Sklep używał trzech niestandardowych rodzin czcionek, każda ładowana jako oddzielne pliki woff2 z CDN Shopify. Żadna z nich nie była preładowana w <head>, co powodowało przesunięcia układu i opóźnione renderowanie tekstu.
Wpływ: Wynik CLS (Cumulative Layout Shift) Google wynosił 0,31 — znacznie powyżej progu 0,1 dla „dobrego”. Bezpośrednio wpłynęło to na rankingi SEO i tworzyło nieprzyjemne wrażenie wizualne, gdy tekst przesuwał się podczas ładowania.
Problem 4: Blokujące renderowanie skrypty stron trzecich
Skrypt Google Analytics 4, Meta Pixel i TikTok Pixel były ładowane synchronicznie w <head>. Te skrypty muszą zostać wykonane, zanim przeglądarka będzie mogła wyrenderować jakąkolwiek widoczną zawartość.
Wpływ: Każdy skrypt śledzący dodawał około 200–400 ms do Time to First Byte (TTFB). Łącznie były odpowiedzialne za ponad 1 sekundę blokowania renderowania, zanim jakakwiek zawartość się pojawiła.
Problem 5: Niewykorzystane aplikacje Shopify z aktywnym kodem
Trzy aplikacje zostały odinstalowane przez właściciela sklepu miesiące wcześniej — ale ich pliki JavaScript i CSS nadal się ładowały, ponieważ kod aplikacji został wstrzyknięty do szablonów motywu i nigdy nie został usunięty.
Wpływ: Kod-duch z trzech odinstalowanych aplikacji dodawał około 800 KB niepotrzebnych danych do każdego ładowania strony.
Naprawa: Co zrobiliśmy
Krok 1: Audyt i konsolidacja aplikacji
Przeanalizowaliśmy wszystkie 23 aplikacje i skategoryzowaliśmy je:
- Pozostawić bez zmian: 6 aplikacji o rzeczywistej funkcjonalności (opinie, marketing e-mailowy, subskrypcje)
- Zastąpić niestandardowym kodem: 5 aplikacji, których funkcjonalność była na tyle prosta, by zbudować ją natywnie (przyklejony przycisk dodawania do koszyka, ostatnio przeglądane produkty, pasek odliczający do ogłoszeń)
- Usunąć całkowicie: 8 aplikacji, które albo duplikowały funkcjonalność, albo nie były już potrzebne
- Usunąć kod-duch: Ręcznie usunięto pozostały kod z 3 odinstalowanych aplikacji
Wynik: 23 aplikacje zredukowane do 6. JavaScript stron trzecich zredukowany o 71%.
Krok 2: Optymalizacja obrazów
Przetworzyliśmy wszystkie 847 zdjęć produktów przez potok optymalizacji wsadowej:
- Zmieniono rozmiar do maksymalnie 2048 pikseli na dłuższym boku
- Skompresowano przy użyciu kompresji stratnej przy jakości 80% (wizualnie nierozróżnialne od oryginału)
- Średni rozmiar pliku zredukowano z 2,8 MB do 180 KB — 94% redukcji
Dla nowych obrazów ustaliliśmy prostą wytyczną dotyczącą przesyłania: maksymalna szerokość 2000 pikseli, eksportowane w jakości 80% z Lightrooma lub Photoshopa.
Krok 3: Optymalizacja ładowania czcionek
Dodaliśmy tagi preload dla wszystkich trzech rodzin czcionek w <head> motywu i zaimplementowaliśmy font-display: swap w CSS, aby zapobiec niewidzialnemu tekstowi podczas ładowania czcionek.
Zmniejszyliśmy również liczbę ładowanych wariantów czcionek z 5 do 3 (usunięto rzadko używane warianty cienkie i bardzo pogrubione, które pojawiały się w mniej niż 5% widocznego tekstu).
Krok 4: Odłożone ładowanie analityki
Przenieśliśmy wszystkie skrypty śledzące (GA4, Meta Pixel, TikTok Pixel) z synchronicznego ładowania w <head> na odłożone ładowanie po wyrenderowaniu głównej zawartości strony.
Jest to standardowa praktyka i nie wpływa na gromadzenie danych — zdarzenia analityczne uruchamiają się poprawnie, niezależnie od tego, kiedy skrypt się ładuje.
Krok 5: Inlining krytycznego CSS
Dla zawartości powyżej linii zgięcia (sekcja hero, nawigacja, pierwszy wiersz produktów) wyodrębniliśmy krytyczny CSS i wstawiliśmy go bezpośrednio w <head>. Dzięki temu przeglądarka może natychmiast wyrenderować widoczną część strony bez czekania na załadowanie zewnętrznych arkuszy stylów.
Wyniki: 60 dni po ponownym uruchomieniu
| Wskaźnik | Przed | Po | Zmiana |
|---|---|---|---|
| Wynik PageSpeed na urządzeniach mobilnych | 23 | 87 | +278% |
| Wynik PageSpeed na komputerach stacjonarnych | 41 | 94 | +129% |
| LCP (mobilny) | 6.8s | 1.9s | -72% |
| CLS | 0.31 | 0.04 | -87% |
| Całkowita waga strony (strona główna) | 8.4MB | 1.1MB | -87% |
| Współczynnik konwersji na urządzeniach mobilnych | 0.8% | 1.6% | +100% |
| Współczynnik porzuconych koszyków | 81% | 67% | -14pp |
| Miesięczne przychody | 18 200 € | 31 400 € | +73% |
Wzrost przychodów o 73% nie jest wyłącznie zasługą optymalizacji szybkości — ponowne uruchomienie obejmowało również ulepszenia układu strony produktu i dodanie opinii klientów. Jednak same usprawnienia szybkości odpowiadają za mierzalną część wzrostu współczynnika konwersji, co zostało zweryfikowane poprzez analizę segmentów w Google Analytics 4 porównującą zachowanie przed i po zmianach technicznych.
Co możesz zrobić już teraz
Nie każda poprawa wymaga dewelopera. Oto trzy rzeczy, które możesz sprawdzić i naprawić samodzielnie już dziś:
1. Sprawdź swój aktualny wynik szybkości. Przejdź do pagespeed.web.dev, wprowadź adres URL swojego sklepu i uruchom test. Skup się na wyniku mobilnym — tego używa Google do rankingu.
2. Przeprowadź audyt zainstalowanych aplikacji. W panelu administracyjnym Shopify → Aplikacje, przyjrzyj się każdej zainstalowanej aplikacji i zadaj pytanie: „Czy aktywnie jej używam?” Usuń wszystko, czego nie używasz. Następnie sprawdź kod swojego motywu pod kątem pozostałych skryptów z wcześniej odinstalowanych aplikacji.
3. Sprawdź rozmiary obrazów. W panelu administracyjnym Shopify → Zawartość → Pliki, posortuj według rozmiaru pliku. Jeśli widzisz obrazy produktów większe niż 500 KB, wyeksportuj je ponownie i prześlij w mniejszym rozmiarze.
Kiedy zadzwonić do dewelopera
Jeśli Twój mobilny wynik PageSpeed jest poniżej 50, a Ty wydajesz pieniądze na reklamy, problem z szybkością prawdopodobnie kosztuje Cię więcej w utraconych konwersjach, niż kosztowałaby profesjonalna optymalizacja.
Pełny projekt optymalizacji szybkości w Step-Media trwa zazwyczaj 1–2 tygodnie i kosztuje 800–2000 € w zależności od rozmiaru sklepu i liczby zaangażowanych aplikacji.
Poproś o bezpłatny audyt szybkości — przeprowadzimy pełną diagnostykę i powiemy Ci dokładnie, co spowalnia Twój sklep, zanim zobowiążesz się do czegokolwiek.
Często Zadawane Pytania
Czy optymalizacja szybkości wpłynie na wygląd wizualny mojego sklepu?
Nie. Optymalizacja szybkości działa na warstwie technicznej — kompresja obrazów, kolejność ładowania skryptów, dostarczanie CSS. Projekt wizualny pozostaje identyczny.
Jak długo utrzymują się poprawy szybkości?
Poprawy szybkości są stabilne, o ile nie dodajesz nowych, ciężkich aplikacji ani nie przesyłasz niezoptymalizowanych obrazów. Po każdym projekcie optymalizacyjnym dostarczamy wytyczne, które pomogą Ci utrzymać wydajność.
Czy Shopify automatycznie optymalizuje mój sklep pod kątem szybkości?
Shopify zapewnia solidną infrastrukturę (globalny CDN, automatyczna konwersja WebP), ale nie optymalizuje kodu Twojego motywu ani nie zarządza skryptami Twoich aplikacji. Wymaga to uwagi dewelopera.
Jaki wynik PageSpeed powinienem dążyć?
Powyżej 70 na urządzeniach mobilnych to praktyczny próg dla akceptowalnej wydajności. Powyżej 85 stawia Cię przed większością konkurentów. Powyżej 90 to wynik doskonały i jest związany z najlepszymi współczynnikami konwersji.
Jak szybkość strony wpływa na moje rankingi w Google?
Google używa Core Web Vitals (LCP, CLS, INP) jako czynnika rankingowego. Sklepy ze słabymi wynikami Core Web Vitals mogą zajmować niższe pozycje niż konkurenci o równoważnej jakości treści, ale szybszym czasie ładowania.
Leanid Liabetski jest deweloperem Shopify i założycielem Step-Media, z siedzibą w Warszawie w Polsce. Budował i optymalizował sklepy Shopify dla marek z branży odzieżowej, spożywczej, witamin, motoryzacyjnej, medycznej i artykułów gospodarstwa domowego.
