Jak zoptymalizować szybkość ładowania sklepu na Shopify?

Szybkość ładowania liczy się w Google od 2021 roku, i to coraz bardziej. Jedna sekunda opóźnienia potrafi obniżyć konwersję nawet o 7 procent. Większość sklepów na Shopify ładuje się między 3,2 a 4,5 sekundy, a powinna poniżej 2,5. Sama szybkość nie wystarczy, dobra treść wciąż ma znaczenie, ale bez szybkiej strony nawet najlepsza treść traci szansę na wysoką pozycję. Zebraliśmy tutaj wszystko, co realnie wpływa na szybkość sklepu Shopify: jak ją zmierzyć, co najczęściej ją psuje i jak to naprawić krok po kroku.

Czym są Core Web Vitals

To trzy metryki Google, które pokazują, jak strona zachowuje się dla prawdziwego użytkownika. LCP to czas, po którym widać główny element strony, najczęściej zdjęcie produktu albo nagłówek. Dobry wynik to poniżej 2,5 sekundy. INP mierzy, jak szybko strona reaguje na kliknięcie. Dobry wynik to poniżej 200 milisekund. CLS pokazuje, jak bardzo elementy skaczą podczas ładowania. Dobry wynik to poniżej 0,1. Jest jeszcze TTFB, czyli czas odpowiedzi serwera, zanim przeglądarka w ogóle zacznie coś pokazywać.

Jak sprawdzić szybkość swojego sklepu

Najszybciej sprawdzisz to w Google PageSpeed Insights. Wpisujesz adres i po kilku sekundach masz wynik od 0 do 100 razem z listą problemów. To dane z jednego testu, więc traktuj je jako laboratoryjne, nie realne. W panelu Shopify, w Online Store i Themes, znajdziesz Web Performance Dashboard, czyli wynik liczony na podstawie ruchu w Twoim sklepie. Najbardziej wiarygodne dane są w Google Search Console, w sekcji Core Web Vitals. To dane prawdziwych użytkowników z ostatnich 28 dni. Dlatego jeśli poprawisz coś dzisiaj, w Search Console zobaczysz efekt dopiero za kilka tygodni. PageSpeed pokaże zmianę od razu, Search Console potrzebuje czasu. To normalne.

Co naprawdę spowalnia sklepy na Shopify

Motyw

Motywy z marketów często mają mnóstwo funkcji, których nikt nie używa. A każda z nich to kawałek kodu, który i tak się ładuje. Lepiej zacząć od czegoś lekkiego, jak Dawn albo Refresh, i dobudować tylko to, czego naprawdę potrzebujesz.

Aplikacje

Każda aplikacja dokłada swój kod JavaScript i CSS. Część zostawia go nawet po odinstalowaniu, jeśli deinstalacja nie poszła jak trzeba. Im więcej aplikacji, tym więcej zapytań do zewnętrznych serwerów. A każde takie zapytanie to potencjalne opóźnienie.

Zdjęcia

To chyba najczęstszy problem i najłatwiejszy do naprawienia. Zdjęcie produktu wgrane prosto z aparatu, w rozdzielczości 4000 na 4000 pikseli, potrafi ważyć kilka megabajtów. Pomnóż to przez kilkadziesiąt produktów na stronie kolekcji i masz gotowy problem.

Trackery marketingowe

Piksel Meta, piksel TikToka, tag Google Ads, wszystkie one też coś ważą. Każdy odpala dodatkowy kod w przeglądarce klienta. Jedno z rozwiązań to przeniesienie części śledzenia na serwer, czyli server side tracking. Wtedy mniej skryptów działa bezpośrednio w przeglądarce odwiedzającego.

Zwykle to nie jeden winowajca, tylko kilka rzeczy naraz. Piksel reklamowy w tle, widget czatu ładujący się na każdej podstronie, karuzela z recenzjami ciągnąca zewnętrzny skrypt, i niekompresowane zdjęcie hero, które samo potrafi zjeść większość czasu do LCP. Każdy z tych elementów osobno wygląda niegroźnie. Razem dokładają nawet kilka sekund.

Konkretne poprawki krok po kroku

Zacznij od zdjęcia, które jest głównym elementem LCP, czyli zwykle zdjęcia hero na stronie głównej albo zdjęcia produktu. Dodaj mu priorytet ładowania przez fetchpriority ustawione na high i wrzuć je do preload w kodzie strony. Wtedy przeglądarka pobiera je jako pierwsze, zamiast czekać w kolejce. Zmień format zdjęć na WebP albo AVIF zamiast starych JPG i PNG. Shopify dobrze skaluje obrazy, ale to trzeba dobrze ustawić w motywie. Zdjęcia poniżej pierwszego ekranu powinny ładować się dopiero, gdy użytkownik do nich przewinie. Zrób porządny przegląd aplikacji i wywal te, które nic nie wnoszą do przychodu. Na koniec czcionki. Jeśli sklep używa niestandardowego fontu z zewnętrznego serwera, lepiej hostować go lokalnie albo ograniczyć liczbę wariantów grubości.

Desktop kontra telefon, skąd taka różnica

Zdarza się, że sklep dostaje 90 punktów na komputerze i 40 na telefonie w tym samym teście. To nie wina serwera. Telefony mają słabsze procesory i wolniejszy internet, więc te same zdjęcia, skrypty i czcionki ładują się dłużej. A dla Google liczy się przede wszystkim wynik mobilny, bo od lat obowiązuje indeksowanie mobile first. Dlatego zaczynaj optymalizację od telefonu, nawet jeśli desktop wygląda świetnie.

Czy aplikacje przyspieszające w ogóle działają

Na Shopify jest sporo aplikacji obiecujących automatyczną poprawę wyniku, jak Thunder, NitroPack czy Hyperspeed. I faktycznie, w testach laboratoryjnych potrafią dodać kilkadziesiąt punktów. Problem w tym, że dane prawdziwych użytkowników w Search Console często się nie ruszają, bo te aplikacje optymalizują pod test, nie pod realne telefony i połączenia. Czasem nawet coś psują, na przykład opóźniają ładowanie zdjęcia, które akurat jest elementem LCP. Wtedy wynik się pogarsza zamiast poprawiać. Lepiej najpierw zrobić ręczny przegląd i naprawić oczywiste problemy. Dopiero potem sprawdzić, czy taka aplikacja w ogóle coś jeszcze daje. Często okazuje się, że po dobrym ręcznym czyszczeniu aplikacja już nic nie zmienia.

Kiedy nie warto gonić za każdą milisekundą

Nie każdy sklep potrzebuje wyniku poniżej 2 sekund. Dla większości sensowny cel to 2,0 do 2,4 sekundy, bo mniej więcej wtedy szybkość przestaje ograniczać konwersję na telefonie. Sklepy, które trzymają 1,6 do 2,0 sekundy, zwykle działają na Shopify Hydrogen albo mają w pełni autorski motyw, nie standardowy Dawn. Zejście poniżej 2 sekund to zwykle duża zmiana infrastruktury, a taka inwestycja rzadko się zwraca przy przychodzie poniżej dziesięciu milionów dolarów rocznie. O headless i Hydrogen napiszemy osobno, bo to temat na cały artykuł.

Jak to wygląda z naszej strony

Przy nowych klientach widzimy właściwie to samo. Kod po dawno odinstalowanych aplikacjach, którego nikt nie usunął z motywu. Zdjęcia wgrywane prosto z aparatu albo od dostawcy, bez żadnej kompresji. Motywy z dziesiątkami sekcji, z których realnie działają może trzy. Żadna z tych rzeczy nie jest trudna do naprawienia osobno. Problem w tym, że rzadko ktoś to wszystko sprawdza razem, dopóki wynik w Google nie zacznie realnie szkodzić.

Pięć minut na audyt

Chcesz szybko sprawdzić, jak stoi Twój sklep? Wrzuć stronę główną i kartę produktu do PageSpeed Insights i zapisz oba wyniki. Zajrzyj do Search Console, w Core Web Vitals, i sprawdź, ile adresów jest oznaczonych jako wymagające poprawy. Policz aplikacje w swoim sklepie i zastanów się, z ilu naprawdę korzystasz. Na koniec sprawdź wagę zdjęcia na stronie głównej, prawym przyciskiem myszy i informacje o pliku. Jeśli to kilkaset kilobajtów albo więcej, masz pierwszego kandydata do kompresji.

FAQ

Czy aplikacje Shopify spowalniają sklep?

Tak, prawie każda dokłada swój kod. Niektóre zostają nawet po odinstalowaniu. Sprawdzaj regularnie, które aplikacje faktycznie przynoszą przychód, i usuwaj resztę.

Czy szybkość ładowania wpływa na SEO?

Tak. Core Web Vitals liczą się w Google od 2021 roku. Szybsze strony mają większe szanse na lepszą pozycję i są sprawniej indeksowane.

Czy warto zainstalować aplikację przyspieszającą?

Może pomóc, ale nie zastąpi ręcznego przeglądu. Najpierw usuń zbędne aplikacje, skompresuj zdjęcia, popraw oczywiste błędy w motywie. Dopiero potem sprawdź, czy aplikacja w ogóle coś jeszcze zmienia.

Ile czasu trzeba czekać na efekty w Google?

W PageSpeed Insights zobaczysz zmianę od razu. W Search Console, gdzie liczą się dane prawdziwych użytkowników, poczekasz zwykle około miesiąca, bo raport opiera się na ostatnich 28 dniach.

Szybszy sklep zaczyna się od jednego audytu

Szybkość to jeden z tych elementów SEO, który da się poprawić bez zmiany treści czy strategii, a efekt widać i w rankingu, i w konwersji. Zacznij od prostego audytu, napraw obrazy i aplikacje, dopiero potem myśl o bardziej zaawansowanych rozwiązaniach. Jeśli potrzebujesz pomocy przy audycie albo optymalizacji swojego sklepu Shopify, zespół 4AD Studio chętnie to sprawdzi i powie, co naprawdę warto poprawić.