Optymalizacja szybkości strony sklepu Shopify – 13 wskazówek

Internauci są dziś bardziej niecierpliwi niż kiedykolwiek. Około 70% konsumentów przyznaje, że wolno działająca strona wpływa na decyzję o zakupie w sklepie internetowym. Dlatego optymalizacja szybkości strony wymaga równowagi między atrakcyjnym, rozbudowanym doświadczeniem użytkownika a wysoką wydajnością witryny.

Z tego przewodnika dowiesz się, jak ją osiągnąć.

Czym jest optymalizacja szybkości strony?

Optymalizacja szybkości strony obejmuje działania, które skracają czas ładowania poszczególnych podstron. Nazywa się ją także optymalizacją wydajności witryny. Jej celem jest jak najszybsze wczytywanie sklepu internetowego – zanim potencjalni klienci stracą cierpliwość i zamkną kartę przeglądarki.

Do pomiaru szybkości używa się dwóch kluczowych wskaźników:

• szybkość strony (page speed), która określa czas potrzebny na załadowanie treści pod danym adresem URL,
• szybkość witryny (site speed), która pokazuje ogólną wydajność całego serwisu. Oceniają ją narzędzia takie jak Google PageSpeed Insights, analizujące łącznie czasy ładowania różnych podstron.

Google zaleca, aby czas ładowania strony w sklepie internetowym nie przekraczał dwóch sekund. Ogólnie jednak im szybciej, tym lepiej. Średni współczynnik konwersji sklepu internetowego spada o 0,3% za każdą dodatkową sekundę ładowania witryny. „Ludzie są niecierpliwi”, mówi Josh Stutt, szef działu marketingu w the49, agencji zajmującej się innowacjami cyfrowymi. „Każdy z nas pamięta sytuacje, gdy próbowaliśmy wejść na stronę, ona się nie załadowała szybko, więc po prostu zamknęliśmy kartę”.

Jeśli prowadzisz sklep o średniej wartości zamówienia 60 USD (ok. 240 zł) i 5000 odwiedzających dziennie, opóźnienie ładowania o jedną sekundę może kosztować Cię 9000 USD (ok. 36 000 zł) dziennie.

Dlaczego szybkość strony jest ważna?

Im szybsza Twoja witryna, tym skuteczniej pozyskujesz klientów – również tych, którzy rezygnują z wolniejszych stron konkurencji.

Nawet poprawa szybkości o milisekundę może korzystnie wpłynąć na konwersje. Deloitte ustalił, że wzrost szybkości witryny o 0,1 sekundy podniósł konwersje detaliczne o 8,4%. Ci konsumenci wydali niemal 10% więcej w trakcie jednej szybko ładującej się sesji.

Badania firmy Portent potwierdzają te wnioski. Wykazały one, że sklepy internetowe ładujące się w ciągu jednej sekundy mają 2,5 razy wyższy współczynnik konwersji niż te ładujące się w ciągu pięciu sekund.

Wolno ładujące się witryny ograniczają także widoczność i pogarszają pozycję w wynikach wyszukiwania. Google, największa wyszukiwarka na świecie, wyżej pozycjonuje witryny z dobrymi wskaźnikami Core Web Vitals, czyli o wysokiej wydajności.

Co więcej, jeśli inwestujesz w płatne reklamy w wyszukiwarce jako kanał pozyskiwania klientów, wolne strony docelowe obniżają Twój wynik jakości w Google Ads, co oznacza wyższy koszt za kliknięcie. To kosztowny problem w czasach, gdy koszty pozyskiwania klientów i reklamy rosną nieproporcjonalnie szybko w większości branż.

Najczęstsze czynniki wpływające na szybkość strony

Twoja platforma e-commerce

Twoja firma potrzebuje platformy e-commerce z infrastrukturą zapewniającą krótki czas ładowania. Porozmawiaj z dostawcą platformy o usprawnieniach zaplecza, dzięki którym strony będą szybko ładować się kupującym.

Renderowanie to proces tworzenia znaczników HTML w momencie, gdy użytkownik ładuje stronę w przeglądarce. To infrastruktura e-commerce decyduje o przebiegu renderowania.

Na przykład Storefront Renderer (SFR) firmy Shopify to aplikacja przeznaczona do jak najszybszej obsługi żądań sklepu, dzięki czemu wydajność po stronie serwera jest od 2,5 do 5 razy wyższa niż w przypadku żądań realizowanych bez SFR.

„Blokowanie renderowania oznacza, że pliki takie jak JavaScript czy CSS uniemożliwiają szybkie wyświetlenie strony”, mówi Chris McCarron, właściciel GoGoChimp. „Gdy przeglądarka próbuje załadować stronę, musi się zatrzymać i pobrać te pliki, zanim wyświetli resztę zawartości”.

SFR przynosi największe korzyści przy tzw. chybieniach pamięci podręcznej (cache misses) – gdy strona lub inne żądane dane nie znajdują się w pamięci podręcznej i trzeba je pobrać z innego poziomu pamięci albo z pamięci głównej. Powoduje to opóźnienia i spadek wydajności.

Rhone Apparel zaczął korzystać z SFR w kwietniu 2020 roku i odnotował znaczącą poprawę w porównaniu z poprzednim miesiącem:

1. 15% wzrostu przychodów,
2. 17% wzrostu współczynnika konwersji,
3. 12% spadku średniego czasu ładowania strony,
4. 37,95% spadku średniego czasu odpowiedzi serwera,
5. 3% spadku współczynnika odrzuceń.

Jeśli platforma e-commerce nie traktuje szybkości jako priorytetu, pozostałe wskazówki będą mieć mniejszy wpływ. Shopify zapewnia ten fundament, dlatego możesz skupić się na kolejnych elementach i jeszcze bardziej zwiększyć wydajność swojego sklepu.

Hosting

Twój hosting e-commerce i infrastruktura mogą wpływać na wydajność sklepu internetowego, zwłaszcza w dni o dużym natężeniu ruchu i wysokiej liczbie transakcji.

Lista znanych marek, których sklepy internetowe przestają działać w kluczowych okresach sprzedażowych, takich jak Black Friday – między innymi Lululemon, J.Crew czy Lowe’s, wciąż się wydłuża. Osiemdziesiąt jeden procent respondentów jednego z badań stwierdziło, że 60 minut przestoju kosztuje ich firmę ponad 300 000 USD (ok. 1 200 000 zł).

Analizując wymagania platformy hostingowej, zwróć uwagę na:

1. limity pamięci lub przepustowości przy skalowaniu podczas promocji sezonowych,
2. prognozowany ruch i szczytowe obciążenie użytkownikami, aby uniknąć awarii spowodowanych nagłym wzrostem liczby odwiedzających.

Przed każdym większym wydarzeniem sprzedażowym poproś dostawcę platformy handlowej o pomoc w przygotowaniu się na nagłe skoki ruchu lub napływ zamówień.

Awarie witryny nigdy nie są łatwe do opanowania, ale mogą być szczególnie dotkliwe dla firmy o wartości 5 miliardów dolarów (ok. 20 mld zł) w jej największym sezonie sprzedażowym. Witryna JB Hi-Fi była niedostępna przez dwie godziny podczas BFCM z powodu problemów technicznych. „Widzieliśmy, jak witryny znanych sprzedawców przestają działać”, mówi Chris Lang, dyrektor generalny ds. inżynierii w JB Hi-Fi. „Wie o tym cały kraj. To źle dla klientów i źle dla marki. Zrobilibyśmy wszystko, żeby tego uniknąć”.

Po migracji na Shopify Plus JB Hi-Fi odnotował rekordową sprzedaż przy niemal dwukrotnie większym ruchu online podczas BFCM – bez problemów z wydajnością witryny.

Dzięki infrastrukturze chmurowej Shopify Plus osiąga ogólną dostępność na poziomie 99,98%, a sklepy na tej platformie ładują się 2,97 raza szybciej niż na innych platformach SaaS.

Architektura witryny

Sklepy internetowe korzystają z różnych architektur, aby prezentować informacje użytkownikom i przeglądarkom. Wraz z rozwojem sklepu architektura staje się coraz bardziej złożona. Javier Moreno, menedżer ds. nauki o danych w Shopify, wyjaśnia: „W miarę jak marki rosną i stają się bardziej zaawansowane, ich witryny stają się coraz bardziej rozbudowane. Za tym bogactwem zwykle idzie pewna cena; jeśli aktywnie nie zwracasz uwagi na szybkość, zmiany spowolnią Twoją witrynę”.

Aby poprawić szybkość witryn, niektórzy sprzedawcy sięgają po headless commerce, czyli koncepcję oddzielającą frontend sklepu internetowego od zasilającej go platformy zaplecza.

Sprzedawcy korzystający z Commerce Components by Shopify idą o krok dalej. Wybierają potrzebne technologie e-commerce dokładnie wtedy, gdy ich potrzebują, zamiast przeciążać przeglądarkę zbyt wieloma fragmentami kodu, które negatywnie wpływają na szybkość witryny.

Nadmiar aplikacji zewnętrznych

Jeśli masz zainstalowanych w sklepie ponad 20 aplikacji e-commerce, prawdopodobnie nie korzystasz ze wszystkich. Być może niektóre zainstalowałeś na próbę, a potem zapomniałeś je usunąć. Ale te aplikacje wciąż działają w tle i mogą aktywnie pogarszać wydajność Twojej witryny.

Poproś programistę o usunięcie zbędnych aplikacji. Następnie przeprowadź testy szybkości strony za pomocą narzędzi takich jak GTmetrix lub PageSpeed Insights, albo nawet ręczny test przy użyciu narzędzi deweloperskich Chrome. Kliknij zakładkę „Network” i odśwież stronę.

Zawsze, gdy chcesz zainstalować nową aplikację, zadaj sobie pytanie: czy wartość dodana tej aplikacji przewyższy możliwe spowolnienie ładowania?

Większość plików JavaScript i CSS aplikacji instalowanych z poziomu panelu administracyjnego Shopify Plus jest wstrzykiwana do sekcji <head> pliku theme.liquid w obrębie {{ content_for_header }}.

Kod aplikacji musi zostać wyrenderowany, zanim załaduje się pozostały kod.

„To napięcie między szybszym ładowaniem a korzyściami, jakie aplikacje przynoszą pod względem doświadczenia użytkownika i sprzedaży, jest powodem, dla którego asynchronicznie ładujemy skrypty dodawane za pomocą Script Tag API, tak aby ładowanie strony nie zostało wstrzymane”, mówi Jason Bowman, lider zespołu inżynierii rozwiązań w Shopify Plus. „Jednak <scripts> dodane bezpośrednio do <head> często mają natychmiastowy wpływ na wydajność”.

Jak sprawdzić szybkość strony?

Każde narzędzie do testowania szybkości stosuje inną metodę oceny, a każdy zespół może inaczej definiować dobrą wydajność witryny. Narzędzia podające czas „ładowania strony” muszą wybrać w swoich wynikach jeden konkretny znacznik czasu, na przykład „czas do pierwszego bajtu” (TTFB).

Korzystaj z tych testów szybkości, aby wspierać swoje decyzje, ale traktuj ich wyniki jako wskazówkę, a nie bezwzględny wyznacznik. Musisz zrównoważyć szybkość witryny z tworzeniem interfejsu, który ułatwia klientowi poruszanie się po ścieżce zakupowej.

Google PageSpeed Insights

PageSpeed Insights to narzędzie Google Labs, które daje spersonalizowane sugestie dotyczące poprawy wydajności witryny. Wskazuje również elementy spowalniające stronę, takie jak CSS i JavaScript.

„Dbam o to, by każdy projekt, nad którym pracuję, był regularnie testowany w Google PageSpeed Insights lub podobnym narzędziu”, mówi Josh Stutt. „Zanim zaczniesz coś poprawiać, musisz wiedzieć, jak działa Twoja witryna i gdzie są jej słabe punkty”.

Możesz nawet przyjrzeć się wydajności mobilnych witryn konkurencji. Wiedza o tym, co jest nie tak z ich witryną, pomoże Ci uniknąć tych samych błędów.

GTmetrix

GTmetrix ocenia szybkość Twojej witryny w skali od A do F. Łączy dane z YSlow i PageSpeed Insights, tworząc raport wydajności, który obejmuje:

• szybkość ładowania strony,
• analizę Web Vitals i Lighthouse,
• możliwości optymalizacji szybkości witryny,
• szczegółową analizę strony pod kątem liczby żądań i całkowitego rozmiaru danych.

Pingdom

Pingdom.com oceni wydajność Twojej witryny (w skali od 0% do 100%). Ma też przydatną funkcję „analizy wodospadowej”, która pomaga zidentyfikować inne poważne obszary problemowe. Ta ocena wiersz po wierszu stanowi użyteczne narzędzie odniesienia.

Jak zoptymalizować szybkość strony?

• Korzystaj z sieci dostarczania treści (CDN)
• Nie przesadzaj z modyfikacjami motywu
• Włącz szybki podgląd na stronach kategorii
• Usuń zbędne wyskakujące okienka
• Ogranicz slider w sekcji hero na stronie głównej
• Kompresuj, zmieniaj rozmiar i redukuj obrazy
• Używaj lekkich osadzeń dla wideo
• Ogranicz przekierowania i niedziałające linki
• Włącz leniwe ładowanie
• Usuń skrypty blokujące parser
• Uporządkuj śledzenie za pomocą Google Tag Manager
• Uważaj na nadmierne pętle Liquid

Korzystaj z sieci dostarczania treści (CDN)

Sieć dostarczania treści, czyli sieć dystrybucji treści (CDN), to grupa serwerów rozsianych po całym świecie. Rozkłada ona obciążenie związane z dostarczaniem treści poprzez serwer znajdujący się najbliżej lokalizacji odwiedzającego, dzięki czemu treści mogą być szybciej dostarczane użytkownikom niezależnie od ich lokalizacji.

Ponieważ coraz więcej sklepów internetowych działa globalnie, CDN, a w przypadku Shopify dwie sieci CDN, stanowi niezbędny element wydajnej platformy.

Shopify oferuje światowej klasy CDN oparty na Fastly bez dodatkowych kosztów. Sieć korzysta dziś z mniejszej liczby, ale wydajniejszych punktów obecności (PoP), rozmieszczonych w strategicznych lokalizacjach na całym świecie. Punkty o dużej gęstości pozwalają obsługiwać więcej treści z pamięci podręcznej, w tym treści statyczne i sterowane zdarzeniami. Poprawia to współczynnik trafień w cache, co przekłada się na lepsze doświadczenia użytkowników.

Ogólnie rzecz biorąc, sieci CDN zwiększają szybkość, jednocześnie obniżając koszty. „Uzyskanie licencji, hostingu i CDN od Shopify Plus od razu zaoszczędziło nam około 100 000 USD (ok. 400 000 zł) rocznie”, mówi Diana Harbour, właścicielka Red Dress Boutique.

Weźmy treści wizualne, które często są przyczyną słabej wydajności witryny. Shopify informuje CDN, gdy Twoje zasoby (np. obrazy, JavaScript i CSS) uległy zmianie.

Zrób to w Shopify

Sprzedawcy Shopify mogą korzystać z filtra asset_url, który automatycznie dołącza numery wersji do wszystkich adresów URL generowanych przez Shopify. Na przykład numer wersji dołączony na końcu adresu URL może wyglądać tak: ?v=1384022871. Ten filtr mówi CDN, aby pobrał właściwą wersję. Bez niego możesz nie zobaczyć oczekiwanego zasobu po wprowadzeniu zmian w treści.

Ponadto, jeśli odwołujesz się do treści bezpośrednio w CSS, adres URL będzie statyczny. Nie będzie też zawierał wersji zasobu aktualizowanej automatycznie przez Shopify.

Aby zapewnić automatyczne aktualizacje, zmień składnię CSS, dołączając filtr asset_url. Informacje o wszystkich filtrach URL pomagających pobierać zasoby znajdziesz w Centrum pomocy Shopify.

Nie przesadzaj z modyfikacjami motywu

Wygląd witryny w dużej mierze decyduje o tym, czy klient zechce z niej korzystać. Badania pokazują, że pierwsze wrażenie w 94% zależy od projektu, a decyzje te zapadają błyskawicznie. Pierwsze wrażenie odwiedzającego witrynę tworzy się w ciągu jednej dziesiątej sekundy.

Trzeba jednak liczyć się z pewnym kompromisem między szybkością witryny a atrakcyjnym motywem, który często wiąże się z zaśmieconym kodem i nadmiarem grafik. „Nie potrzebujesz motywu z całym bogactwem dodatków”, mówi Josh Stutt. „Potrzebujesz takiego, który jest czysty, szybki i łatwy w nawigacji. Widziałem ponad 50% poprawę współczynnika odrzuceń strony głównej u nowych odwiedzających po prostu dzięki przejściu na bardziej uproszczony motyw”.

Nirav Sheth, dyrektor generalny i założyciel Anatta, mówi: „Szybkie triki na przyspieszenie nie zbudują fundamentu dla długoterminowej wydajności, zrobią to tylko prawdziwe usprawnienia, a te zaczynają się od optymalizacji architektury motywu”.

Włącz szybki podgląd na stronach kategorii

Okienka szybkiego podglądu wyświetlają produkt bezpośrednio na stronie z listą produktów, bez konieczności otwierania jego pełnej karty.

W teorii szybki podgląd powinien oszczędzać czas klientów, ale w praktyce może utrudniać im korzystanie z Twojego sklepu internetowego:

• dodaje dodatkowy krok do ścieżki klienta,
• można go kliknąć przypadkiem, co bywa frustrujące dla użytkownika,
• można go pomylić ze stroną produktu,
• co najważniejsze, może znacząco spowolnić czas ładowania strony.

Implementacje wyskakujących okienek szybkiego podglądu (wbudowane w motyw lub pochodzące z aplikacji) mogą czasem wstępnie ładować informacje z całej strony produktu na wypadek, gdyby odwiedzający kliknął przycisk „Szybki podgląd”.

To bardzo dużo danych, zwłaszcza na stronie kolekcji zawierającej 20 lub 30 miniatur produktów. Mapa kliknięć, czyli narzędzie oparte na JavaScript, pokazuje, gdzie użytkownicy przewijają stronę, przesuwają kursor i klikają. Dzięki niej sprawdzisz, czy klienci w ogóle korzystają z szybkiego podglądu.

Pomocne mogą być aplikacje takie jak:

• Hindsight
• Hotjar

Znajdź szybki podgląd w Shopify

Łatwo sprawdzisz, czy na miniaturach produktów w Twoim sklepie znajduje się przycisk szybkiego podglądu. Zajrzyj do edytora motywu, aby znaleźć opcję włączenia lub wyłączenia tej funkcji. Jeśli nie widzisz tej opcji w edytorze motywu, sprawdź, czy nie pochodzi ona z aplikacji. Jeśli tak, jej usunięcie powinno być proste.

Jeśli pierwsze dwa kroki nie pomagają, funkcja jest prawdopodobnie wbudowana w sam motyw. W takim przypadku potrzebujesz programisty, który ją zidentyfikuje i usunie. Znajdź partnera serwisowego Shopify Plus, który pomoże w tym procesie.

Użyj AJAX, aby pobierać informacje o produkcie dopiero po kliknięciu przez odwiedzającego przycisku szybkiego podglądu. Możesz też zapisać ograniczony zestaw informacji o produkcie jako atrybuty danych na elemencie siatki produktów. Następnie dynamicznie zbuduj HTML i okienko za pomocą JavaScript.

Obie opcje są mniej korzystne niż usunięcie funkcji szybkiego podglądu. Informacje o produkcie i tak muszą zostać załadowane dla każdego produktu. Mimo to jest to lepsze rozwiązanie niż pobieranie wszystkich obrazów i linków produktów.

Usuń zbędne wyskakujące okienka

Wyskakujące okienka służą do wyświetlania specjalnych ofert lub zachęcania użytkowników do kolejnego kroku na ścieżce klienta. Niezależnie od tego, czy chodzi o skorzystanie z kuponu rabatowego, czy podanie adresu e-mail, okienka pomagają zaangażować nowych odwiedzających i umożliwiają późniejszą komunikację.

Istnieje jednak subtelna sztuka stosowania wyskakujących okienek w e-commerce. Zbyt wiele migających grafik może szkodzić szybkości i wydajności witryny, nie wspominając o odciąganiu uwagi użytkowników od treści witryny, które już zoptymalizowałeś pod kątem konwersji.

Ustal parametry korzystania z wyskakujących okienek, aby zapobiec spowolnieniom witryny. Możesz na przykład skonfigurować wyzwalacze tak, aby dodatkowy kod nie spowalniał początkowego ładowania witryny. Zamiast wyświetlać okienko od razu, uruchom je po wykryciu zamiaru opuszczenia strony albo po określonym czasie. Oba te wyzwalacze dają nieco przestrzeni między początkowym ładowaniem strony a załadowaniem okienka.

Ogranicz slider w sekcji hero na stronie głównej

Rozbudowane pokazy slajdów z kilkoma grafikami w sekcji hero dobrze prezentują produkty. Niestety, mają swoją wadę: rozmiar i jakość wymagane, by suwak hero dobrze wyglądał, mogą wydłużać czasy ładowania, zwłaszcza jeśli masz cztery lub pięć slajdów.

Ogranicz liczbę slajdów na stronie głównej lub całkowicie z nich zrezygnuj. Pojedynczy, wysokiej jakości i dobrze przemyślany obraz hero, z jasnym wezwaniem do działania, pomaga szybko przyciągnąć klientów, ponieważ mózg przetwarza obrazy 60 000 razy szybciej niż tekst.

Jeśli musisz użyć suwaka, stosuj najlepsze praktyki UX, takie jak:

• trzymaj się dwóch lub trzech slajdów,
• wyświetlaj slajdy jako statyczne sekcje treści, a nie automatycznie obracające się karuzele,
• używaj srcset lub Lazy Load jako rozwiązania uniwersalnego.

Chubbies na przykład używa zoptymalizowanych obrazów zamiast tradycyjnego suwaka hero na stronie głównej. Współzałożyciel Tom Montgomery mówi: „Jesteśmy z Shopify od pierwszego dnia. Nikt z nas nie jest inżynierem, więc świetnie jest móc polegać na ekspertach Shopify, dzięki czemu możemy skupić się na innowacjach”.

Kompresuj, zmieniaj rozmiar i redukuj obrazy

Obrazy odpowiadają za około 50% do 75% całkowitej wagi Twoich stron internetowych. Może to stanowić coraz większy problem w miarę skalowania sklepu internetowego. Im więcej produktów sprzedajesz, tym więcej plików graficznych masz na serwerze. Każdy obraz użyty na stronie tworzy nowe żądanie HTTP. Podczas optymalizacji szybkości strony zmniejszenie liczby obrazów pozwala osiągnąć więcej mniejszym nakładem.

Alex Mirzaian, menedżer ds. marketingu w Eightvape, mówi: „Kiedy nieustannie tworzysz treści poprzez wpisy na blogu lub dodajesz wiele produktów dziennie, masz tendencję do dodawania obrazów do witryny bez zastanowienia. Kompresja obrazów może bardzo pomóc, gdy masz na stronie tysiące zdjęć”.

Rozmiar obrazu możesz zmniejszyć bez utraty jakości dzięki kompresji bezstratnej w narzędziach takich jak TinyJPG lub TinyPNG.

Uważaj też na puste źródła obrazów, <img src="">, w swoim kodzie. Powodują one nadmierne obciążenie przeglądarki, wysyłając kolejne żądanie do Twoich serwerów. Prostym rozwiązaniem są „sprity” CSS, które łączą wiele obrazów, na przykład ikon, w jeden, ograniczając liczbę pojedynczych żądań obrazów do serwera. Poprawia to również szybkość strony.

Wbudowane w Shopify parametry rozmiaru obrazu pozwalają pobrać możliwie najmniejszy obraz przy zachowaniu jakości. Shopify pobiera obraz dokładnie w takim rozmiarze, w jakim ma on zostać wyświetlony. Zmniejsza to wielkość pliku pobieranego z CDN i ogranicza skalowanie po stronie przeglądarki.

„Jeden z naszych klientów miał wolno ładującą się witrynę, więc zaczęliśmy od optymalizacji obrazów”, mówi Maria Harutyunyan, współzałożycielka Loopex Digital. „Zmniejszyliśmy je i skompresowaliśmy, co ogromnie wpłynęło na tempo ładowania stron. Obrazy zajmują teraz o 60% mniej miejsca i ładują się znacznie szybciej”.

Używaj lekkich osadzeń dla wideo

Wideo stało się jednym z podstawowych formatów internetowych – około 91% firm wykorzystuje je jako narzędzie marketingowe. Sposób osadzania filmów w witrynie może jednak znacząco wpływać na czas ładowania.

Standardowy kod osadzania filmu z YouTube obciąża witrynę, ponieważ część plików jest pobierana jeszcze przed kliknięciem przycisku odtwarzania. Wykorzystuje też znacznik <iframe> ze stałą szerokością i wysokością odtwarzacza. Twój film nie dostosowuje się do rozmiaru ekranu różnych urządzeń.

Rozwiązaniem są lekkie osadzenia. Podczas początkowego ładowania strony osadzana jest jedynie miniatura filmu z YouTube. Sam odtwarzacz wideo (i cały jego dodatkowy JavaScript) ładuje się dopiero wtedy, gdy użytkownik kliknie w miniaturę.

Miniatury YouTube mają około 15 kilobajtów, więc lekkie osadzenia mogą zmniejszyć rozmiar stron o niemal megabajt.

Ogranicz przekierowania i niedziałające linki

Zbyt wiele przekierowań i niedziałających linków może negatywnie wpływać na wydajność i szkodzić Twoim pozycjom w SEO.

Uporządkuj przekierowania. Na przykład przekierowania 302, które oznaczają, że strona została tymczasowo przeniesiona, mogą zaszkodzić Twojemu SEO. Wywołują też dodatkowe żądania HTTP i opóźniają transfer danych.

Zamiast tego użyj „przekierowania, które może być zapisywane w pamięci podręcznej” lub wbudowanej w Shopify funkcji przekierowań, domyślnie typu 301, dostępnej w panelu nawigacji. I pamiętaj: nigdy nie przekierowuj adresów URL na strony, które same są przekierowaniami.

Niedziałające linki do elementów strony, takich jak obrazy, pliki CSS i JS, zwiększają liczbę żądań HTTP i szkodzą szybkości witryny. Aby je usunąć, użyj narzędzia takiego jak Broken Link Checker. Tworzenie niestandardowych stron błędu 404 pomoże odwiedzającym, którzy przypadkowo wpiszą nieprawidłowy adres URL Twojej witryny.

Włącz leniwe ładowanie

Leniwe ładowanie to technika, która zapobiega natychmiastowemu załadowaniu całej zawartości strony. Sklepy internetowe korzystające z leniwego ładowania wyświetlają treści dopiero wtedy, gdy są potrzebne – na przykład po przewinięciu strony.

Leniwe ładowanie działa na przykład wtedy, gdy użytkownik otwiera stronę produktu w Twoim sklepie. Po otwarciu strony pojawia się tylko treść widoczna bez przewijania, na przykład tytuł produktu, grafika i opis. Pozostała treść pojawia się, gdy użytkownicy przewijają poniżej tej sekcji. Treści tworzone przez użytkowników, karuzele mediów społecznościowych i opinie klientów są ładowane leniwie, aby kod nie przeciążał serwera zbyt dużą ilością informacji od razu przy ładowaniu.

Chris McCarron z GoGoChimp zastosował tę strategię optymalizacji szybkości witryny w sklepie internetowym klienta: „Poniżej pierwszego ekranu na każdej stronie znajdowała się zdumiewająca liczba obrazów. Problem polega na tym, że przeglądarka jednocześnie pobiera każdy obraz na stronie, niezależnie od tego, które z nich są widoczne. Leniwe ładowanie pobiera jednak obraz dopiero wtedy, gdy można go zobaczyć w przeglądarce”.

Usuń skrypty blokujące parser

Zanim przeglądarka wyświetli stronę Twojemu klientowi, musi przejść przez proces zwany „parsowaniem HTML”. Skrypty blokujące parser przerywają jednak ten proces: gdy przeglądarka napotka taki skrypt, wstrzymuje pozostałe działania do czasu jego wykonania.

Rozwiązanie jest proste: dodaj atrybut „async” lub „defer”.

Blokujące parser: <script src="jquery.js"></script> Nieblokujące parsera: <script src="jquery.js" defer></script>

Sam JavaScript nie blokuje przeglądarki. Decyduje o tym sposób jego ładowania. Po wprowadzeniu tych zmian w kodzie sprawdź, czy Twoja witryna nadal działa tak samo z perspektywy użytkownika.

Uporządkuj śledzenie za pomocą Google Tag Manager

Dane klientów stanowią podstawę strategii e-commerce i marketingu cyfrowego. Ale ich zbieranie może też spowalniać wydajność witryny. Częstym źródłem problemu są tagi śledzące oparte na JavaScript (np. dla ogólnej analityki, konwersji, celów i remarketingu behawioralnego).

Zbieranie danych klientów może również pochłaniać czas i zasoby zespołów programistycznych, IT i marketingu. System zarządzania tagami (TMS), taki jak Google Tag Manager, pozwala obsługiwać wszystkie tagi za pomocą jednego rozwiązania opartego na JavaScript. Jeśli awaria taga spowoduje niedostępność witryny, TMS pomoże Ci również szybko go usunąć.

Nirav Sheth dodaje, że gdy Anatta optymalizowała szybkość witryny sklepu z branży kosmetycznej, „tym, co najbardziej wpłynęło na szybkość witryny, było połączenie wykorzystania interfejsów API Shopify z uporządkowaniem Google Tag Manager”.

Wystarczy jeden fragment kodu, aby zarządzać tagami swojego sklepu Shopify Plus w jednym miejscu za pomocą Google Tag Manager. Aby dowiedzieć się więcej, zapoznaj się z wytycznymi w Centrum pomocy Shopify Plus.

Uważaj na nadmierne pętle Liquid

Liquid to elastyczny język szablonów Shopify. W pewnych przypadkach trzeba jednak rozważyć, czy korzyści przewyższają potencjalne wady.

Pętle for są jednym z takich przypadków. Obiekt forloop sprawia, że system iteruje po wszystkich produktach w kolekcji, na przykład podczas wyszukiwania określonej ceny lub tagu.

Funkcje te mogą być korzystne w pewnych przypadkach, na przykład przy wyświetlaniu obrazów lub wariantów produktów. Przydają się też, gdy masz mniejszą liczbę produktów na stronie kolekcji, ale uważaj na ich wpływ na czasy ładowania.

Przejrzyj kod motywu i sprawdź, czy nie uruchamiasz wielokrotnie tych samych pętli for w Liquid w poszukiwaniu identycznych informacji. Może się to zdarzyć, gdy nad motywem pracuje wielu programistów, którzy mogą duplikować zadania lub wprowadzać sprzeczny kod. Usunięcie tych duplikatów sprawi, że Twoja strona będzie ładować się szybciej.

Często łatwiej jest użyć prostej pętli product.options_with_values. Przejrzyj dokumentację, aby zrozumieć, jak działa język szablonów Shopify i pętle Liquid.

Jak przeprowadzić test szybkości strony?

Core web vitals to grupa wskaźników pomagających oceniać szybkość witryny. Na stronach spełniających progi Core Web Vitals prawdopodobieństwo porzucenia witryny w trakcie ładowania było o 24% niższe.

• W pełni załadowana strona: to najbardziej tradycyjna miara czasu potrzebnego na pełne załadowanie strony.
• Czas do pierwszego bajtu: szybkość, z jaką strona rozpoczyna proces ładowania.
• Pierwsze znaczące renderowanie: czas potrzebny do wyświetlenia wystarczającej części strony, aby użytkownik mógł zrozumieć jej treść.

Google PageSpeed Insights ocenia każdy z tych wskaźników Core Web Vitals według statusu: dobry, wymaga poprawy oraz słaby. Pod każdą oceną zobaczysz również zalecenia dotyczące szybkości spersonalizowane dla Twojej witryny.

Optymalizacja szybkości na urządzeniach mobilnych

Znaczenie zakupów mobilnych nadal rośnie. Według prognozy sprzedaż mobilna miała do 2025 roku osiągnąć 10,4% całej sprzedaży e-commerce.

Mimo wysokiego wskaźnika zakupów mobilnych nie wszyscy kupujący na urządzeniach mobilnych chętnie wydają pieniądze na wolno ładujących się witrynach. Już poprawa o milisekundę w szybkości ładowania mobilnego może podnieść współczynniki konwersji o 8,4%.

Po odkryciu, że większość użytkowników mobilnych nie dokonywała konwersji, marka odzieży firmowej i upominków Merchology postanowiła przeprojektować swoją witrynę zgodnie z podejściem mobile-first. Dwa miesiące po uruchomieniu witryny mobilnej Merchology osiągnęło 40% wzrost współczynnika konwersji mobilnych.

Przeczytaj, jak sprawić, by Twoja wersja mobilna, a także ogólna wydajność i szybkość witryny, dorównywała konkurencji lub ją wyprzedzała.

Twórz Accelerated Mobile Pages

Accelerated Mobile Pages (AMP) to projekt sponsorowany przez Google, który przeformatowuje treści witryny na potrzeby urządzeń mobilnych. W witrynach z włączonym AMP Google buforuje każdą stronę i przeładowuje ją za każdym razem, gdy użytkownik odwiedza ją z poziomu wyszukiwarki. Skraca to czasy ładowania, co przekłada się na dwukrotny wzrost czasu spędzonego na stronie i 20% wzrost konwersji w porównaniu ze stronami bez AMP.

Wdróż AMP w swoim sklepie internetowym za pomocą aplikacji Shopify, takich jak AMP, Fire AMP lub The AMP App. Każda z nich eliminuje złożony kod zaśmiecający Twoją witrynę mobilną, aby strony ładowały się szybko.

Wyłącz automatyczne odtwarzanie wideo na urządzeniach mobilnych

Nie wszyscy mobilni użytkownicy internetu przeglądają Twój sklep internetowy przy szybkim i stabilnym połączeniu sieciowym. Być może to klient Allbirds przeglądający witrynę sprzedawcy w trakcie wędrówki, gdy noszone przez niego buty się rozpadają. A może klient Firebelly Tea zamawiający kolejne pudełko torebek herbaty, czekając na parkingu, aż jego dzieci skończą lekcje.

Tak czy inaczej, osoby te mogą oglądać filmy, za pomocą których sprzedawcy komunikują się z potencjalnymi klientami w witrynie mobilnej. Automatyczne odtwarzanie tych filmów może jednak powodować znaczne opóźnienia w ładowaniu witryny.

Gdy film jest ustawiony na automatyczne odtwarzanie, mobilne połączenie sieciowe musi pobrać duży plik. Kiedy zastąpi się go statyczną miniaturą i opcjonalnym przyciskiem uruchamiającym film, pełny plik wideo nie musi być ładowany przez słabe połączenie internetowe. Odwiedzający szybciej zobaczą najważniejszą treść strony.

Zoptymalizuj mobilny proces realizacji zamówienia

O procesie realizacji zamówienia często zapomina się przy poprawianiu szybkości witryny mobilnej. Największą uwagę poświęca się stronie głównej, kartom produktów i stronom kategorii, ponieważ pierwsza mobilna interakcja z Twoim sklepem nie powinna od razu zniechęcać potencjalnych klientów.

Pominięcie procesu realizacji zamówienia w strategii optymalizacji szybkości witryny prawdopodobnie doprowadzi do wyższego współczynnika porzuceń koszyka. Skoro klienci wybrali już produkty, są wyraźnie zainteresowani zakupem. Ale jeśli podczas realizacji zamówienia napotkają opóźnienia, muszą być naprawdę mocno zdecydowani na zakup, żeby nie zrezygnować. W efekcie możesz stracić osoby kupujące pod wpływem impulsu.

Shop Pay pozwala mobilnym kupującym błyskawicznie przejść przez proces realizacji zamówienia. Według Shopify sprzedawcy korzystający z Shop Pay mają 1,91 raza wyższy wskaźnik ukończenia realizacji zamówienia na urządzeniach mobilnych niż ci korzystający ze standardowego procesu realizacji.

„Większość naszych dzisiejszych klientów odkrywa nowe produkty w biegu, na urządzeniach mobilnych, a jeśli muszą wypełniać formularz, to ich tracimy”, mówi Benjamin Sehl, współzałożyciel Kotn. „Włączenie Shop Pay w naszym procesie realizacji zamówienia sprawiło, że najtrudniejszy etap ścieżki klienta stał się wygodny, a ponieważ jest to powiązane z ekosystemem miliona sprzedawców, nawet nowi klienci mogą sfinalizować zakup jednym kliknięciem”.

Zoptymalizuj szybkość swojej witryny i obserwuj wpływ na konwersję

Warto przekonać zespół, że inwestycja czasu i zasobów w optymalizację wydajności oraz szybkości witryny przyniesie wymierne korzyści. Dane i narzędzia, którymi się podzieliliśmy, pomogą Ci zbudować mocne argumenty.

Wiele z tych optymalizacji możesz wykonać samodzielnie. Gdy nie jest to możliwe, możesz skorzystać z pomocy partnera Shopify Plus. Podpowie on, jak przyspieszyć Twoją witrynę Shopify.