Asttero

Aplikacje Shopify a szybkość sklepu - jak wykryć i usunąć zbędny kod?

Shopify Opublikowano 23 lipca 2026 9 min
Aplikacje Shopify a szybkość sklepu - jak wykryć i usunąć zbędny kod?

Każda aplikacja zainstalowana w sklepie Shopify obiecuje wzrost sprzedaży, lepszy UX lub automatyzację procesów. Jednak z perspektywy technicznej większość rozszerzeń frontendowych to dodatkowe skrypty, które muszą zostać pobrane i przetworzone przez przeglądarkę klienta. Nadmiarowa liczba narzędzi zewnętrznych jest jedną z najczęstszych przyczyn spadku wydajności witryny. Problem pogłębia fakt, że wiele aplikacji po odinstalowaniu pozostawia w szablonie tzw. ghost code, czyli fragmenty kodu, które nadal generują zapytania do nieistniejących serwerów. Zrozumienie, jak identyfikować te obciążenia i jak bezpiecznie czyścić pliki Liquid, jest kluczowe dla utrzymania wysokich wskaźników Core Web Vitals i optymalnej konwersji. (Weryfikacja: Wiele aplikacji Shopify pozostawia po odinstalowaniu kod generujący zapytania do nieistniejących serwerów).

Dlaczego aplikacje Shopify spowalniają Twój sklep?

Mechanizm działania większości aplikacji Shopify opiera się na wstrzykiwaniu skryptów JavaScript do sekcji head lub przed zamknięciem tagu body w pliku theme.liquid. Skrypty te są często ładowane synchronicznie, co oznacza, że przeglądarka musi wstrzymać renderowanie widocznej części strony, dopóki nie pobierze i nie wykona kodu zewnętrznego. Zjawisko to nazywamy blokowaniem renderowania (render-blocking). Nawet jeśli aplikacja korzysta z ładowania asynchronicznego (async lub defer), nadal obciąża ona główny wątek procesora (Main Thread), co bezpośrednio wpływa na metrykę Total Blocking Time (TBT) oraz Interaction to Next Paint (INP). Zrozumienie mechanizmów obciążających szablon jest kluczowe, aby zdiagnozować, dlaczego sklep Shopify działa wolno i które elementy wymagają optymalizacji. Skrypty third-party konkurują o zasoby z krytycznymi elementami sklepu, takimi jak interaktywne menu czy przycisk dodania do koszyka, co przy słabszych połączeniach mobilnych może prowadzić do porzucenia witryny.

Różnica między skryptami synchronicznymi a asynchronicznymi polega na sposobie, w jaki przeglądarka traktuje plik podczas budowania drzewa DOM. Skrypty synchroniczne całkowicie zatrzymują proces wyświetlania strony. Skrypty asynchroniczne (async) pozwalają na pobieranie pliku w tle, ale wykonują go natychmiast po pobraniu, co również może przerwać renderowanie. Najbezpieczniejszym rozwiązaniem dla wydajności jest atrybut defer, który nakazuje wykonanie skryptu dopiero po pełnym przetworzeniu struktury HTML. Niestety, wiele aplikacji wymusza ładowanie synchroniczne, aby ich funkcje (np. pop-upy czy widgety) pojawiły się jak najszybciej, co odbywa się kosztem ogólnej szybkości ładowania.

Jak sprawdzić wpływ aplikacji na szybkość ładowania? (Narzędzia diagnostyczne)

Diagnostyka wydajności nie powinna opierać się wyłącznie na ogólnym wyniku punktowym w PageSpeed Insights. Aby realnie ocenić wpływ konkretnych narzędzi, należy sięgnąć po dane surowe, które pokazują, ile zapytań generuje każda aplikacja i jak długo trwa ich przetwarzanie.

Analiza zakładki Network w Chrome DevTools

Najbardziej precyzyjnym sposobem na wykrycie zbędnych skryptów jest użycie narzędzi deweloperskich przeglądarki Chrome. Po otwarciu sklepu należy kliknąć prawym przyciskiem myszy i wybrać 'Zbadaj', a następnie przejść do zakładki 'Network'. Po odświeżeniu strony z włączonym nagrywaniem logów warto przefiltrować wyniki, wybierając kategorię 'JS'. Kluczowa jest kolumna 'Initiator' - najechanie na nią kursorem pozwala sprawdzić, która domena wywołała dany skrypt. Jeśli widoczne są dziesiątki zapytań do domen takich jak s3.amazonaws.com lub bezpośrednich serwerów dostawców aplikacji, których już nie używasz, oznacza to niepotrzebne obciążenie. Warto zwrócić uwagę na kolumnę 'Time' oraz 'Waterfall', które wizualizują momenty, w których przeglądarka traci czas na oczekiwanie na odpowiedź z zewnętrznych serwerów. Analiza ta pozwala wyodrębnić skrypty, które generują najwięcej tzw. long tasks, czyli operacji trwających powyżej 50 ms, co negatywnie wpływa na responsywność interfejsu.

Shopify Theme Inspector dla Chrome i Flame Graphs

Oficjalne rozszerzenie Shopify Theme Inspector pozwala na analizę wydajności po stronie serwera, czyli czasu potrzebnego na wygenerowanie kodu Liquid. (Weryfikacja: Shopify Theme Inspector analizuje czas renderowania kodu Liquid po stronie serwera). Narzędzie to generuje tzw. Flame Graphs (wykresy płomieniowe), które pokazują, które sekcje i snippety ładują się najdłużej. Jeśli aplikacja wstrzykuje swój kod bezpośrednio do plików Liquid, Theme Inspector wskaże konkretny fragment kodu, który opóźnia renderowanie strony. Długie, poziome bloki na wykresie oznaczają wąskie gardła. Często okazuje się, że jedna aplikacja do 'powiązanych produktów' lub 'opinii' generuje więcej opóźnień niż cały pozostały kod szablonu razem wzięty. Interpretacja kolorów na wykresie pomaga szybko zlokalizować najbardziej obciążające pętle (np. for loops), które przeszukują całą bazę produktów przy każdym odświeżeniu strony.

Problem Ghost Code - dlaczego kod zostaje po usunięciu aplikacji?

Zjawisko 'kodu widmo' (ghost code) wynika ze specyfiki starszego API Shopify. Wiele aplikacji, aby działać, musiało fizycznie zmodyfikować pliki szablonu, dopisując do nich swoje skrypty lub tagi renderowania. W momencie, gdy właściciel sklepu usuwa aplikację w panelu administracyjnym, Shopify cofa uprawnienia aplikacji do dostępu do sklepu, ale nie zawsze jest w stanie automatycznie wyczyścić zmiany wprowadzone w plikach .liquid. W efekcie w kodzie pozostają martwe odwołania. Przeglądarka klienta nadal próbuje pobrać zasoby z serwerów aplikacji, które już nie istnieją lub nie rozpoznają danego sklepu, co kończy się błędami 404 w konsoli i niepotrzebnym wydłużeniem czasu ładowania. Skuteczna optymalizacja szybkości sklepu Shopify wymaga nie tylko usuwania zbędnych narzędzi, ale przede wszystkim dokładnego wyczyszczenia kodu z pozostałości po nich.

Przykładem takich pozostałości są tagi w sekcji head, które odwołują się do zewnętrznych plików .js lub .css. Nawet jeśli plik jest pusty lub zwraca błąd, przeglądarka musi nawiązać połączenie z serwerem (DNS lookup, TCP handshake, TLS negotiation), co zajmuje cenne milisekundy. API Shopify przy deinstalacji traci dostęp do plików szablonu, dlatego deweloperzy aplikacji nie mają technicznej możliwości posprzątania po sobie, jeśli ich kod został wstawiony manualnie lub przez skrypt instalacyjny bezpośrednio do struktury plików Liquid.

Usuwanie zbędnego kodu z szablonu - instrukcja krok po kroku

Przystępując do manualnego czyszczenia kodu, należy zachować najwyższą ostrożność. Każda zmiana w plikach Liquid może wpłynąć na funkcjonalność sklepu. Zanim zaczniesz modyfikować pliki Liquid, pomocny może być kompleksowy audyt techniczny Shopify, który precyzyjnie wskazuje wszystkie elementy obciążające procesor przeglądarki.

Gdzie szukać pozostałości w plikach .liquid?

Bezpieczne testowanie zmian w trybie Preview

Nigdy nie należy edytować kodu na żywym szablonie (Live Theme). Pierwszym krokiem powinno być stworzenie kopii zapasowej (Actions > Duplicate). Praca powinna odbywać się wyłącznie na kopii. Po usunięciu podejrzanego fragmentu kodu należy skorzystać z funkcji 'Preview', aby dokładnie przetestować ścieżkę zakupową: od strony głównej, przez kartę produktu, aż po koszyk. Warto również otworzyć konsolę deweloperską (F12 > Console) i sprawdzić, czy nie pojawiają się czerwone komunikaty o błędach (Uncaught ReferenceError), które mogłyby świadczyć o tym, że usunięty kod był powiązany z inną, działającą funkcjonalnością. Proces weryfikacji powinien obejmować także sprawdzenie poprawności działania analityki i pikseli śledzących, które często są powiązane z zewnętrznymi skryptami.

Online Store 2.0 i App Blocks - standard bezpieczeństwa wydajności

Wprowadzenie architektury Online Store 2.0 znacząco zmieniło sposób, w jaki aplikacje integrują się z szablonem. Dzięki mechanizmowi Theme App Extensions deweloperzy aplikacji nie muszą już modyfikować plików Liquid bezpośrednio. Zamiast tego tworzą tzw. App Blocks, które można dowolnie dodawać i usuwać za pomocą wizualnego edytora szablonu. Największą zaletą tego rozwiązania jest fakt, że po usunięciu bloku lub odinstalowaniu aplikacji cały powiązany z nią kod znika automatycznie i całkowicie. Nie powstaje ghost code, a struktura plików pozostaje czysta. Przy wyborze nowych narzędzi w Shopify App Store warto szukać oznaczenia 'Online Store 2.0' lub informacji o wsparciu dla App Blocks, co ułatwia utrzymanie techniczne sklepu w przyszłości.

Porównując stary model wstrzykiwania kodu z nowym standardem, widać wyraźną korzyść w kontroli nad zasobami. W modelu OS 2.0 skrypty aplikacji są ładowane tylko na tych podstronach, na których faktycznie znajduje się dany blok aplikacji. W starszych rozwiązaniach skrypt np. do obsługi zwrotów był często ładowany na każdej podstronie, w tym na stronie głównej, mimo że był tam całkowicie zbędny. Przejście na standard App Blocks to jeden z najskuteczniejszych sposobów na ograniczenie długu technologicznego w e-commerce.

Strategia optymalizacji: kiedy zastąpić aplikację customowym kodem?

Wiele popularnych funkcji e-commerce można wdrożyć bez instalowania ciężkich aplikacji zewnętrznych. Często jedna aplikacja służy jedynie do wyświetlenia prostego paska informacyjnego lub tabeli rozmiarów, a mimo to ładuje biblioteki o rozmiarze kilkuset kilobajtów. Analiza TCO (Total Cost of Ownership) często wykazuje, że jednorazowy koszt wdrożenia dedykowanego rozwiązania jest niższy niż suma miesięcznych abonamentów i strat wynikających z niższej konwersji spowodowanej wolnym działaniem sklepu.

Funkcje, które warto wdrożyć natywnie

FAQ

Czy każda zainstalowana aplikacja spowalnia sklep Shopify?

Nie każda, ale większość aplikacji frontendowych dodaje skrypty JavaScript, które muszą zostać pobrane i wykonane przez przeglądarkę. Aplikacje działające wyłącznie w panelu administracyjnym (backendowe) zazwyczaj nie mają wpływu na szybkość ładowania strony dla klienta.

Jak sprawdzić, czy po usunięciu aplikacji w kodzie został ghost code?

Najprostszym sposobem jest sprawdzenie pliku theme.liquid oraz folderu Snippets w edytorze kodu Shopify. Jeśli po odinstalowaniu narzędzia nadal widoczne są tagi render lub include z nazwą tej aplikacji, oznacza to, że w szablonie pozostał zbędny kod.

Czy aplikacje typu Speed Booster faktycznie przyspieszają sklep?

Często działają one na zasadzie preloading stron, co może poprawić subiektywne odczucie szybkości, ale jednocześnie dodają kolejny skrypt do wykonania. W wielu przypadkach lepsze efekty daje manualne usunięcie zbędnych aplikacji niż instalowanie kolejnej do ich optymalizacji.

Gdzie w Chrome DevTools szukać skryptów spowalniających sklep?

Należy przejść do zakładki Network, odświeżyć stronę i przefiltrować wyniki po typie JS. Kolumna Time pokaże czas ładowania, a kolumna Initiator wskaże, czy skrypt pochodzi bezpośrednio z Shopify, czy z zewnętrznej domeny należącej do dostawcy aplikacji.

Czy usunięcie kodu aplikacji może zepsuć wygląd sklepu?

Tak, jeśli usunięty zostanie fragment kodu odpowiedzialny za strukturę strony lub style CSS. Dlatego kluczowe jest wykonywanie kopii zapasowej szablonu przed każdą edycją i testowanie zmian w trybie podglądu (Preview) przed ich publikacją.

Czym są App Blocks w Online Store 2.0?

To nowoczesny sposób integracji aplikacji z Shopify, który pozwala na dodawanie funkcji do szablonu bez manualnej edycji kodu Liquid. Po usunięciu takiego bloku cały powiązany z nim kod jest automatycznie usuwany ze strony.

Bibliografia