Poprawa wydajności sklepu online

Twój sklep online składa się z zestawu funkcji, takich jak kod szablonu, aplikacje, obrazy, filmy, karuzele, kanały mediów społecznościowych i analizy. Funkcje te mogą poprawić doświadczenia odwiedzających i rozszerzyć możliwości witryny.

Jednak każda funkcja dodawana do sklepu online może wpływać na jego wydajność. Niektóre funkcje mogą spowalniać działanie witryny lub powodować nieoczekiwane zachowania, które mogą mieć wpływ na doświadczenia użytkowników.

Wydajność stron internetowych koncentruje się na optymalizacji doświadczeń użytkownika. Obecnie wydajność stron internetowych skupia się na trzech głównych obszarach, które znajdują również odzwierciedlenie w metrykach Core Web Vitals:

Szybkość ładowania, mierzona za pomocą wskaźnika Największe wyrenderowanie treści (LCP)
Stabilność układu, mierzona za pomocą wskaźnika skumulowanego przesunięcia układu (CLS)
Reakcja na interakcję użytkownika, mierzona za pomocą wskaźnika interakcji do następnego wyrenderowania (INP)

Optymalizacja wydajności stron internetowych oznacza, że istnieje większe prawdopodobieństwo, że klienci pozostaną na Twojej stronie i dokonają konwersji.

Na tej stronie

Optymalizacje dla sklepu online

Sklep online ma wbudowaną optymalizację internetową. Optymalizacja internetowa jest również wbudowana w nowe funkcje. Nie musisz robić niczego specjalnego, aby korzystać z następujących funkcji:

Twój sklep online jest hostowany na szybkich, globalnych serwerach i nie ma limitu przepustowości. Możesz sprawdzić status swojego sklepu Shopify na stronie Shopify Status.
Twój sklep online korzysta z sieci dostarczania treści (CDN) obsługiwanej przez Cloudflare, która zapewnia szybkie ładowanie sklepu online na całym świecie. Status sieci CDN możesz sprawdzić na stronie statusu Cloudflare.
Aby zapewnić krótki czas ładowania, obrazy są automatycznie optymalizowane za pomocą sieci CDN dla obrazów. W połączeniu z kodem szablonu sieć CDN dla obrazów może udostępniać najlepszy format obrazu, który jest również odpowiednio przeskalowany i skompresowany, aby rozmiary plików były małe.

Czynniki wpływające na wydajność stron internetowych

W przypadku sklepów Shopify poniższe czynniki mają największy wpływ na wydajność stron internetowych:

Szablon sklepu online
Zainstalowane aplikacje
Wszelkie dodatkowe kody firm zewnętrznych dodane ręcznie do sklepu, w tym menedżery tagów i zawarte w nich tagi

Oznacza to, że należy skupić się na następujących kwestiach, aby poprawić wydajność stron internetowych:

Używaj aktualnego, zoptymalizowanego szablonu. Wszystkie szablony z rodziny Horizon i szablony Online Store 2.0 od Shopify są bezpłatne i zoptymalizowane pod kątem wydajności stron internetowych. Ponadto wiele innych szablonów firm zewnętrznych jest również zoptymalizowanych pod kątem wydajności stron internetowych. Możesz przejrzeć najnowsze dane dotyczące wydajności szablonów.
Jeśli Twój szablon oferuje przejścia między stronami lub inne animacje, porównaj wydajność swojej strony internetowej przed ich aktywacją i po niej. Animacje mogą spowalniać strony.
Unikaj dodawania zbyt wielu sekcji do szablonów stron w swoim szablonie. Duża liczba sekcji na stronach może obniżyć wydajność stron internetowych.
Jeśli masz kolekcje zawierające dużą liczbę produktów, rozważ aktywację paginacji, aby ograniczyć liczbę produktów ładowanych jednocześnie.
Oceń zainstalowane aplikacje i kod firm zewnętrznych, aby upewnić się, że generują one wystarczającą wartość, aby zrównoważyć ewentualne straty wydajności.
Przeprowadź audyt menedżera tagów, aby usunąć nieużywane lub mało wartościowe tagi. Dowiedz się więcej o najlepszych praktykach dotyczących tagów i menedżerów tagów.

Narzędzia do testowania

Możesz użyć następujących narzędzi do zbadania wydajności swojego sklepu online:

Raporty dotyczące wydajności stron internetowych: Raporty dotyczące wydajności stron internetowych Shopify wykorzystują wskaźniki Core Web Vitals do pomiaru doświadczeń rzeczywistych użytkowników w Twoim sklepie online.
PageSpeed Insights: Możesz uruchamiać własne raporty za pomocą narzędzia PageSpeed Insights firmy Google, aby wyświetlić bardziej szczegółowe metryki dla stron w Twoim sklepie.

Zrozumienie rekomendacji dotyczących wydajności od firm zewnętrznych

Narzędzia firm zewnętrznych do skanowania wydajności mogą sugerować zmiany w celu poprawy szybkości sklepu. Jednak wiele z tych rekomendacji jest już wdrożonych przez Shopify lub nie ma zastosowania do sklepów Shopify.

Optymalizacje już zawarte na platformie Shopify

Twój sklep Shopify automatycznie zawiera następujące optymalizacje wydajności:

Sieć dostarczania treści (CDN): Shopify zapewnia światowej klasy sieć CDN bez dodatkowych opłat, zapewniając szybką globalną wydajność. Wszystkie zasoby są obsługiwane za pomocą protokołu HTTP/2, co zmniejsza obciążenie w porównaniu ze starszymi protokołami.

Pamięć podręczna przeglądarki: Shopify ustawia pamięć podręczną przeglądarki dla zasobów podlegających buforowaniu na jeden rok, co jest maksymalnym możliwym czasem. Oznacza to, że powracający do sklepu odwiedzający doświadczą krótszych czasów ładowania.

Kompresja Gzip: Shopify stosuje kompresję gzip dla plików CSS, JavaScript, dokumentów i stron w celu zmniejszenia wykorzystania przepustowości i poprawy czasu ładowania. Opcja Keep-alive jest również włączona w celu pobierania wielu plików.

Optymalizacja obrazów: Shopify automatycznie kompresuje obrazy JPG za pomocą zaawansowanych algorytmów, zachowując równowagę między kompresją a atrakcyjnością wizualną. Obrazy są często wyświetlane w formacie WebP w celu zapewnienia lepszej kompresji i szybszego ładowania.

Minifikacja plików: Shopify automatycznie minifikuje pliki CSS i JavaScript, gdy są one żądane przez witrynę sklepu, zmniejszając rozmiary plików bez wpływu na funkcjonalność.

Gdy rekomendacje firm zewnętrznych nie mają zastosowania

Narzędzia do skanowania firm zewnętrznych mogą sugerować zmiany, które nie są istotne dla sklepów Shopify:

Konfiguracje na poziomie serwera: Rekomendacje dotyczące konfiguracji serwera, nagłówków HTTP lub zasad buforowania są już zoptymalizowane przez infrastrukturę Shopify.
Implementacja sieci CDN: Sugestie dotyczące dodania sieci CDN są niepotrzebne, ponieważ Shopify domyślnie zawiera wysokowydajną sieć CDN.
Ustawienia kompresji: Rekomendacje dotyczące włączenia kompresji są już zaimplementowane na całej platformie Shopify.

Działanie na podstawie odpowiednich rekomendacji

Skup się na zaleceniach, które dotyczą konkretnej treści i funkcji Twojego sklepu:

Optymalizacja obrazów: Upewnij się, że przesyłane obrazy mają odpowiedni rozmiar i że używasz zalecanych formatów.
Ocena aplikacji: Zastanów się, czy zainstalowane aplikacje zapewniają wystarczającą wartość, aby zrównoważyć ewentualny wpływ na wydajność.
Optymalizacja szablonu: Wybieraj szablony zoptymalizowane pod kątem wydajności i ograniczaj liczbę sekcji w szablonach stron.

Rozwiązywanie problemów z wolno ładującymi się stronami

Jeśli Twój sklep ładuje się wolno, wykonaj poniższe kroki, aby zidentyfikować i rozwiązać problem:

Krok 1: Zweryfikuj problem

Przetestuj szybkość ładowania sklepu na różnych urządzeniach i przy użyciu różnych połączeń internetowych.
Poproś inne osoby o przetestowanie sklepu, aby potwierdzić, że problem nie jest związany z Twoim połączeniem internetowym.
Użyj narzędzi testujących, takich jak PageSpeed Insights, aby uzyskać szczegółowe metryki wydajności.

Krok 2: Zidentyfikuj przyczynę

Sprawdź, czy nie masz zbyt wielu aplikacji: Zbyt wiele aplikacji ładujących zasoby w witrynie sklepu może spowolnić jego działanie. Przejrzyj zainstalowane aplikacje i usuń te, które nie są niezbędne do prowadzenia sprzedaży.

Sprawdź duże obrazy: Strony z dużą liczbą obrazów wysokiej jakości mogą się wolno ładować. Zoptymalizuj obrazy lub zmniejsz liczbę wyświetlanych obrazów. Dowiedz się więcej o zalecanych rozmiarach obrazów.

Zidentyfikuj wolne skrypty: Jeśli strona zawiesza się, wyświetlając pusty ekran przed jednoczesnym załadowaniem całej zawartości, użyj narzędzi deweloperskich przeglądarki, aby zidentyfikować wolno ładujące się skrypty. Skontaktuj się z deweloperem aplikacji lub szablonu, aby rozwiązać problem.

Krok 3: Podejmij działania

Usuń niepotrzebne aplikacje: Odinstalowanie aplikacji nie powoduje automatycznego usunięcia jej kodu z szablonu. W celu uzyskania pełnych instrukcji dotyczących usuwania może być konieczny kontakt z deweloperem aplikacji.

Zoptymalizuj obrazy: Używaj odpowiednich formatów plików (JPG dla zdjęć, PNG dla grafik z przezroczystością) i zmieniaj rozmiar obrazów, dopasowując go do rozmiaru wyświetlania.

Oceń wydajność szablonu: Rozważ przejście na szablon zoptymalizowany pod kątem wydajności, jeśli obecny szablon powoduje znaczne spowolnienia.

Uzyskaj pomoc techniczną w zakresie wydajności sklepu online

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

Jeśli używasz szablonu zewnętrznego i potrzebujesz pomocy, musisz skontaktować się z jego deweloperem, zatrudnić eksperta Shopify ds. wydajności stron internetowych lub partnera Shopify ds. wydajności i szybkości witryny. Dowiedz się więcej na temat zatrudniania partnera Shopify.

Jeśli problem z wydajnością jest spowodowany przez aplikację, możesz skontaktować się z jej deweloperem.

Jeśli masz zespół deweloperów lub partnera agencyjnego, możesz również zwrócić się do nich o dalszą pomoc.

Informacje techniczne i zasoby dotyczące rozwiązywania problemów

Jeśli jesteś deweloperem, który chce poprawić wydajność witryny sklepu, szablonu lub aplikacji Shopify, zapoznaj się z poniższymi zasobami dla każdego wskaźnika Core Web Vital. Dowiedz się więcej o najlepszych praktykach w zakresie wydajności dla szablonów Shopify.

Szybkość ładowania

Wskaźnik Największe wyrenderowanie treści (LCP) mierzy szybkość ładowania na podstawie tego, jak szybko największy element na ekranie staje się widoczny. Time to first byte (TTFB) i first contentful paint (FCP) to metryki pomocnicze, które pomagają lepiej zrozumieć, gdzie leży główna przyczyna problemu. Możesz dowiedzieć się więcej o debugowaniu typowych przyczyn powolnego ładowania w witrynach sklepów Shopify opartych na Liquid.

Stabilność wizualna

Wskaźnik Cumulative Layout Shift (CLS) mierzy stabilność wizualną na podstawie tego, jak bardzo treść przesuwa się w nieoczekiwany sposób podczas ładowania. Aby uzyskać szczegółowe informacje na temat debugowania CLS, przeczytaj artykuł Jak zoptymalizować wskaźnik Cumulative Layout Shift (CLS) na stronach Shopify.

Interaktywność

Wskaźnik Interaction to Next Paint (INP) mierzy interaktywność na podstawie tego, ile czasu zajmuje stronie reakcja na większość działań użytkownika. Przykładowe działania użytkownika to kliknięcie linku lub przycisku.

Jeśli masz słaby wynik INP, najprawdopodobniej masz w sklepie za dużo kodu JavaScript, pochodzącego z kodu szablonu, kodu aplikacji lub kodu zewnętrznego/menedżera tagów. Zajmij się uporządkowaniem elementów, które najbardziej spowalniają działanie. Dowiedz się więcej z artykułu 3 sposoby na znalezienie kodu JavaScript najbardziej spowalniającego ładowanie strony. Jeśli nadal masz problemy z INP, dowiedz się więcej, korzystając z zasobów na stronie web.dev.