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 dotyczący szybkości działania sklepu online.
Na tej stronie
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.
Shopify nieustannie wprowadza ulepszenia do swojego kodu i infrastruktury. Niektóre z tych ulepszeń mogą znaleźć swoje odzwierciedlenie w ocenie prędkości.
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 Cloudflare, która zapewnia szybkie ładowanie stron sklepu online na całym świecie. Status CDN można sprawdzić na stronie statusu Cloudflare.
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 obiekt Liquid content_for_header
Obiekt 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 obiektu 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.
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:
- Wyłącz funkcje aplikacji, których nie używasz lub usuń aplikację, jeśli jej nie potrzebujesz. Staraj się osiągnąć równowagę pomiędzy funkcjami sklepu online i jego szybkością.
- Jeśli usuwasz aplikację, rozważ usunięcie kodu, który został dodany w ramach procesu instalacji aplikacji. Niektóre aplikacje pomagają w tym procesie, umieszczając ich kod w tagach
{% comment %}, które zawierają nazwę aplikacji. Usunięcie nieużywanego kodu aplikacji jest najlepszą praktyką, która pozwala uniknąć uruchamiania kodu dla nieużywanych funkcji i ułatwia odczytywanie kodu szablonu. - Skontaktuj się z programistą aplikacji.
- Zatrudnij partnera Shopify w celu uzyskania dodatkowej pomocy. Dowiedz się więcej o zatrudnianiu partnera Shopify.
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:
- Wyłącz funkcje szablonu, których nie używasz. Staraj się osiągnąć równowagę pomiędzy funkcjami sklepu online i jego szybkością.
- Rozważ użycie czcionki systemowej.
- Skontaktuj się z projektantem szablonu. Jeśli korzystasz z darmowego szablonu od Shopify, możesz skontaktować się z pomocą techniczną w celu uzyskania wskazówek.
- Jeśli korzystasz z szablonu firmy zewnętrznej, możesz skontaktować się z projektantem szablonu lub zatrudnić partnera Shopify.
- Rozważ zainstalowanie szablonu zoptymalizowanego pod kątem wydajności, takiego jak Dawn.
- Zatrudnij partnera Shopify w celu uzyskania dodatkowej pomocy. Dowiedz się więcej o zatrudnianiu partnera Shopify.
Funkcje szablonu lub aplikacji
Niektóre funkcje, gdy są aktywowane, 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 negatywnie wpłynąć na szybkość działania 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:
- Użyj narzędzia mapy cieplnej, aby sprawdzić, czy klienci korzystają z określonych funkcji. Dezaktywuj funkcje, jeśli nie są używane.
- Dezaktywuj funkcję, jeśli jej nie potrzebujesz. Staraj się osiągnąć równowagę pomiędzy funkcjami sklepu online i szybkością jego działania.
- Skontaktuj się z projektantami szablonów oraz programistami aplikacji i zapytaj, czy szablony i aplikacje ładują wstępnie dane.
- Zatrudnij partnera Shopify w celu uzyskania dodatkowej pomocy. Dowiedz się więcej o zatrudnianiu partnera Shopify.
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 jest zoptymalizowany, możesz wykonać następujące czynności:
- Uruchom Inspektora szablonów Shopify dla Chrome, aby znaleźć linie kodu spowalniające strony w Twoim sklepie online.
- Zatrudnij partnera Shopify, który pomoże Ci znaleźć nieefektywny lub zbędny kod.
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ą odnieść wrażenie, że Twój sklep działa zbyt wolno.
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 partnera Shopify w celu uzyskania dodatkowej pomocy. Dowiedz się więcej o zatrudnianiu partnera Shopify.
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 jest czcionką, która jest już zainstalowana na większości komputerów.
Możesz wybrać rodzinę czcionek: Mono, Serif lub Sans-serif. Możesz nadal używać stylów czcionek, takich jak pogrubienie lub kursywa, gdy korzystasz z jednej z tych rodzin czcionek.
Czcionka wyświetlana na komputerze klienta zależy od jego systemu operacyjnego. Poniżej przedstawiono kilka przykładów czcionek, które mogą być używane do renderowania tekstu, gdy wybierzesz rodzinę czcionek systemowych:
- Mono: Menlo, Consolas, Monaco, Liberation Mono lub Lucida Console
- Sans-serif: BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, lub Helvetica Neue
- Serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times lub Source Serif Pro
Narzędzia do rozwiązywania problemów
Możesz użyć poniższych narzędzi do zbadania szybkości działania Twojego sklepu online.
Jeśli jesteś programistą, możesz zoptymalizować swój szablon pod kątem wydajności za pomocą narzędzi i najlepszych praktyk Shopify. Dowiedz się więcej na Shopify.dev.
Lighthouse
W raporcie Shopify dotyczącym szybkości działania sklepu online do pomiaru szybkości działania sklepu wykorzystywane jest narzędzie Lighthouse. Aby wyświetlić bardziej szczegółowe wskaźniki dla stron w swoim sklepie, możesz uruchomić własny raport Lighthouse, używając narzędzia 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ć partnera Shopify, który objaśni Ci wskaźniki i zaproponuje optymalizacje. Dowiedz się więcej o zatrudnianiu partnera Shopify.
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.
Uzyskaj pomoc techniczną w zakresie szybkości działania sklepu online
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ć partnera Shopify. Dowiedz się więcej o zatrudnianiu partnera 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.