Zwiększanie szybkości działania sklepu online

Na szybkość działania sklepu online wpływa kilka czynników. Niektóre z nich możesz kontrolować.

Jeśli nie wiesz, jak szybko działa w danym dniu Twój sklep online, możesz wyświetlić raport dot. szybkości działania sklepu online.

Czynniki poza Twoją kontrolą

Urządzenie klienta, sieć i lokalizacja

Klienci odwiedzający Twój sklep rozproszeni są na całym świecie i korzystają z różnych urządzeń i połączeń z Internetem. Oznacza to, że w zależności od tych czynników strony Twojego sklepu mogą ładować się szybciej lub wolniej.

Jeśli klient skontaktuje się z Tobą w sprawie szybkości działania sklepu, poproś klienta o sprawdzenie, czy korzysta z najnowszej wersji przeglądarki, czy nie wyczyścił ostatnio pamięci podręcznej oraz czy u jego dostawcy usług internetowych nie występują żadne przestoje lub słabsza wydajność.

Infrastruktura Shopify

Shopify udostępnia Twój sklep online na szybkich, globalnych serwerach i nie ogranicza przepustowości Twojego sklepu. Status sklepu Shopify można sprawdzić w statusie Shopify.

Poniżej przedstawiono niektóre funkcje, które wpływają na szybkość działania Twojego sklepu online.

Sieć dostarczania zawartości (CDN)

CDN jest skrótem od nazwy Content Delivery Network. Shopify zapewnia sprzedawcom światowej klasy sieć CDN obsługiwaną przez Fastly, która zapewnia szybkie ładowanie stron sklepu online na całym świecie. Status CDN można sprawdzić na stronie statusu Fastly.

Lokalna pamięć podręczna przeglądarki

Twój sklep buforuje lub zapisuje niektóre elementy tymczasowo w lokalnej pamięci klienta. Następnym razem, gdy klient odwiedzi Twój sklep online, przeglądarka może załadować zasoby z pamięci podręcznej zamiast wysyłać kolejne żądania do serwera.

Shopify ustawia buforowanie przeglądarki dla zasobów pamięci podręcznej w Twoim sklepie do jednego roku dla każdego pliku. Pliki, które mogą być buforowane, to pliki obrazów, pliki PDF, JS i pliki CSS.

Pamięć podręczna strony po stronie serwera

Oprócz buforowania w przeglądarce lokalnej Shopify buforuje w pamięci podręcznej strony po stronie serwera. Ładowanie strony po raz pierwszy może przebiegać wolniej, ale później strony ładują się szybciej, ponieważ klienci otrzymują kopię z pamięci podręcznej.

Zasoby w ramach content_for_header tagu Liquid

{% content_for_header %} Tag Liquid wprowadza zasoby używane przez różne funkcje sklepu online, w tym analizy wydajności i opcjonalne funkcje, takie jak dynamiczne przyciski realizacji zakupu. Załadowanie tego tagu i powiązanych z nim zasobów ma wpływ na szybkość działania Twojego sklepu. Shopify optymalizuje tag i jego zasoby, aby zwiększyć prędkość.

Czynniki, które możesz kontrolować

Poniżej wymieniono czynniki, które mogą wpłynąć na szybkość działania Twojego sklepu online i sposób ich kontrolowania.

Rozwój: Jeśli nie masz doświadczenia z wykonaniem któregokolwiek z poniższych kroków, możesz wynająć eksperta Shopify, który Ci pomoże.

Aplikacje

Gdy dodajesz aplikacje, aby zmienić funkcjonalność lub wygląd sklepu online, dodaj kod do szablonu, aby można je było uruchamiać. Niektóre kody można usunąć lub zmienić ich kolejność, aby poprawić wydajność Twojego sklepu online. Jeśli nie używasz aplikacji, możesz ją usunąć.

Jeśli uważasz, że aplikacja spowalnia Twój sklep, wykonaj następujące kroki:

Szablony

Szablony składają się z kodu Liquid, HTML, CSS i JavaScript. Gdy edytujesz lub dostosowujesz szablony, rozmiary plików mogą się zwiększyć i wpłynąć na szybkość działania sklepu.

Jeśli uważasz, że coś w Twoim szablonie spowalnia Twój sklep, wykonaj następujące kroki:

Funkcje szablonu lub aplikacji

Niektóre funkcje, gdy są włączone, mogą również wpłynąć na szybkość działania sklepu. Na przykład, niektóre szybkie wyświetlanie wyskakujących okienek z wstępnie załadowanymi informacjami z każdej strony produktu przy ładowaniu strony kolekcji. Ładowanie dodatkowych danych, których klienci nie używają, może spowolnić ładowanie stron Twojego sklepu, nie przynosząc żadnych korzyści.

Jeśli sądzisz, że to ta funkcja spowalnia Twój sklep, wykonaj następujące kroki:

Skomplikowany lub nieefektywny kod Liquid

Możesz edytować prawie cały kod Liquid użyty do renderowania Twojego sklepu. Istnieją efektywne i nieefektywne sposoby pisania kodu Liquid. Powtarzanie złożonych operacji może wydłużyć czas renderowania Liquid, co wpływa na ogólną szybkość działania sklepu.

Na przykład, jeśli chcesz zamówić produkty w kolekcji według ceny, należy to zrobić przed rozpoczęciem pętli produktów w kolekcji, a nie jako część kodu pętli. Wynika to z faktu, że kolejność produktów nie zmienia się dla każdego produktu i obliczanie zamówienia produktów powoduje dodanie czasu przetwarzania do żądania.

Jeśli obawiasz się, że Twój kod nie optymalny, możesz wykonać następujące kroki:

Obrazy] i filmy

Obrazy dużego formatu i obrazy, które są ukryte w widoku, mogą spowalniać ładowanie innych, ważniejszych części strony. Jeśli użytkownicy muszą czekać na załadowanie dużych obrazów, mogą postrzegać Twój sklep jako powolny.

Shopify dodaje pewne zabezpieczenia, aby zapobiec przeciążeniu sklepu online obrazami lub filmami. Na przykład:

  • Nie możesz mieć więcej niż 50 produktów na stronie kolekcji lub 25 sekcji na stronie głównej.
  • Wiele szablonów wstrzymuje ładowanie obrazów, które nie są obecnie wyświetlane na ekranie.
  • Wiele szablonów ładuje również określony rozmiar obrazu w zależności od rozmiaru ekranu, na którym obraz jest wyświetlany.

Jednak te zabezpieczenia nie gwarantują w pełni, że obrazy lub filmy nie pogorszą wydajności Twojego sklepu online.

Jeśli sądzisz, że obrazy spowalniają Twój sklep, wykonaj następujące kroki:

  • Przejrzyj przewodnik po optymalizacji obrazów.
  • Ogranicz pokazy slajdów z wyróżnionymi obrazami do 2-3 slajdów lub użyj jednego wyróżnionego obrazu.
  • Skonsultuj się z twórcą szablonu, aby uzyskać porady dotyczące najlepszego sposobu wykorzystania obrazów z szablonem.
  • Zatrudnij eksperta Shopify, aby uzyskać dalszą pomoc.

Czcionki

Możesz wybrać jedną z kilku czcionek dla tekstu w sklepie online. Jeśli jednak używasz czcionki, która jeszcze nie istnieje na komputerze klienta, musi ona zostać pobrana, zanim będzie można wyświetlić tekst. Ma to wpływ na czas ładowania sklepu.

Aby uniknąć pobierania nowej czcionki na komputer klienta, możesz użyć czcionki systemowej. Czcionka systemowa to czcionka, która jest już zainstalowana na większości komputerów. Możesz użyć następujących czcionek systemowych w swoim szablonie Shopify:

  • Lucida Grande
  • Trebuchet MS
  • Garamond
  • Palatino
  • Times New Roman
  • Courier New
  • Monako

Możesz nadal używać stylów czcionek, takich jak pogrubienie lub kursywa, jeśli używasz którejkolwiek z powyższych czcionek.

Narzędzia do rozwiązywania problemów

Poniżej przedstawiono narzędzia, których możesz użyć do sprawdzenia szybkości działania Twojego sklepu online.

Lighthouse

Raport Shopify dot. szybkości działania sklepu online wykorzystuje narzędzie Lighthouse do pomiaru szybkości działania Twojego sklepu. Aby wyświetlić bardziej szczegółowe wskaźniki dla stron w Twoim sklepie, możesz uruchomić własny raport Lighthouse, używając Google PageSpeed Insights. Aby dowiedzieć się, co oznaczają te wskaźniki, zapoznaj się z dokumentacją oceny wydajności Google Lighthouse. Możesz również zatrudnić eksperta Shopify, który pomoże Ci zrozumieć wskaźniki i zaproponuje ulepszenia.

Inspektor szablonów Shopify dla Chrome

Inspektor szablonów Shopify dla Chrome to narzędzie do profilowania, które wykorzystuje mapę cieplną do wyświetlania wydajności renderowania Liquid. To narzędzie pomaga znaleźć linie kodu, które spowalniają strony w Twoim sklepie online. Dowiedz się, jak korzystać z Inspektora szablonów Shopify.

Gdzie uzyskać pomoc techniczną

Jeśli korzystasz z darmowego szablonu od Shopify, pomoc techniczna Shopify może być w stanie pomóc Ci w zakresie podstawowych ulepszeń wydajności.

Jeśli korzystasz z szablonu firmy zewnętrznej i potrzebujesz pomocy, musisz skontaktować się z projektantem szablonu lub zatrudnić eksperta Shopify.

Jeśli masz zespół programistów lub współpracujesz z agencją, możesz również skontaktować się z nimi w celu uzyskania dalszej pomocy.

Gotowy(-a) do rozpoczęcia sprzedaży za pomocą Shopify?

Wypróbuj za darmo