Przyspieszenie Shopify — optymalizacja i Core Web Vitals krok po kroku

Dlaczego Shopify bywa wolny

Shopify to platforma hostowana — serwer, cache i CDN są po stronie Shopify, więc TTFB zwykle jest dobry i nie masz nad nim kontroli. To zmienia punkt ciężkości: w Shopify wolno robi się przez to, co dokładasz do frontu — aplikacje, motyw i skrypty firm trzecich.

Najczęstsze przyczyny wolnego Shopify:

• Aplikacje — to numer jeden. Każda aplikacja potrafi wstrzykiwać JS i CSS na każdą stronę sklepu, nawet tam, gdzie nie jest używana. Sklepy ładujące ponad 8 skryptów aplikacji mają medianę mobile LCP powyżej 3 s; przy 3 lub mniej — poniżej 2 s
• Ciężki lub przestarzały motyw — mocno modyfikowane, legacy motywy dokładają dużo Liquid, skryptów i zapytań
• Nadmiar dynamicznego Liquid — wiele obliczeń w szablonie naraz obciąża renderowanie
• Nieoptymalne obrazy i render-blocking JS — zbyt duże obrazy, skrypty marketingowe ładowane od razu, brak zarezerwowanych wymiarów

Core Web Vitals w Shopify — co mierzyć

Core Web Vitals to metryki, którymi Google ocenia realne doświadczenie użytkownika i które wpływają na pozycje w wyszukiwarce. Cele dla sklepu Shopify:

Krok 1: audyt aplikacji — największy zysk

Aplikacje to pojedyncza najczęstsza przyczyna słabych Core Web Vitals w Shopify. Zasada: każda aplikacja, której nie używasz, to czysta strata — jej skrypty często zostają na stronie nawet po dezinstalacji.

Szczególnie kosztowne są aplikacje do popupów, recenzji, upselli i liczników, które ładują własne biblioteki na każdej podstronie — nawet tam, gdzie ich widget się nie pojawia.

Krok 2: lekki, nowoczesny motyw

Motyw decyduje o bazowej wadze frontu. Motywy Online Store 2.0 (jak własny motyw Shopify — Dawn) są projektowane pod wydajność i konsekwentnie dobrze wypadają w Core Web Vitals.

• Rozważ migrację z legacy — mocno modyfikowany, stary motyw bywa wolniejszy niż lekki motyw OS 2.0
• Warunkowe ładowanie w Liquid — skrypty i style ładuj tylko tam, gdzie są potrzebne, w parze z async/defer
• Ogranicz ciężki Liquid — unikaj wielu kosztownych obliczeń i pętli w szablonie renderowanych naraz

Krok 3: obrazy — największy dług wagi strony

Shopify sam serwuje obrazy przez swój CDN i potrafi je konwertować, ale reszta zależy od Ciebie:

• Nie wgrywaj przewymiarowanych plików — obraz szerokości 4000 px na kafelku 400 px to zmarnowana waga; kompresuj przed uploadem
• NIE lazy-loaduj obrazu LCP — główny obraz nad pierwszym ekranem ma się ładować od razu, nie z opóźnieniem
• Lazy loading poniżej pierwszego ekranu — reszta obrazów dopiero przy scrollu
• Sztywne wymiary — zarezerwowane width i height chronią przed CLS, gdy obrazy i widgety się doładowują

Krok 4: skrypty firm trzecich

Piksele, chaty, heatmapy i analityka zachowań obciążają wątek główny i psują INP. Dwie zasady:

• Defer dla niekrytycznego JS — wszystko, co nie jest potrzebne do pierwszego renderu, ładuj z defer
• Delay do interakcji — skrypty marketingowe ładuj dopiero po pierwszej interakcji użytkownika, jeśli biznesowo się to spina

Większość sklepów odzyskuje gros prędkości już w pierwszym tygodniu — na audycie aplikacji, kompresji obrazów i odłożeniu skryptów firm trzecich.

Co daje najwięcej — kolejność działań

Jeśli masz zrobić tylko kilka rzeczy, zrób je w tej kolejności — od największego zwrotu przy najmniejszym wysiłku:

Gdzie kończy się optymalizacja motywu

Audyt aplikacji, lekki motyw i porządek w obrazach potrafią mocno podnieść wynik. Ale w Shopify uderzasz w inny sufit niż sam serwer: front renderuje motyw Shopify przez Liquid, a każda funkcja konwersyjna (wyszukiwarka, rekomendacje, chat) to kolejna aplikacja dokładająca skrypty. Masz ograniczoną kontrolę nad tym, co i kiedy się ładuje.

Wtedy zostaje zmiana architektury — headless. Front działa jako osobna, zoptymalizowana aplikacja i komunikuje się z Shopify wyłącznie przez API. Zarządzanie produktami, zamówieniami i checkout zostaje po stronie Shopify — zmienia się tylko warstwa, która decyduje o wydajności i UX.

Headless ma sens, gdy chcesz pełnej kontroli nad frontem i wydajnością, a ekosystem aplikacji zaczyna ciążyć. Jak to działa krok po kroku, opisaliśmy w osobnych materiałach: