Wydajność Shopify i wrażenia mobilne
Szybki sklep nie tylko ładuje się szybciej Szybciej reaguje na intencje klientów.
Celem nie jest osiągnięcie izolowanego doskonałego wyniku, ale poprawa ładowania, szybkości reakcji i stabilności faktycznie używanych stron Zacznij od pomiaru, zidentyfikuj osobę odpowiedzialną, a następnie popraw zgodnie z wpływem biznesowym.
Nie myl Shopify z tym, co zostało dodane do Shopify
Platforma zapewnia hosting, CDN i kilka optymalizacji Spowolnienia często pochodzą z motywu, aplikacji, skryptów marketingowych, multimediów i dostosowań.
Pojedyncza partytura nie opowiada całej historii
Porównaj prawdziwe dane użytkowników, wiele typów stron i testy laboratoryjne Szybka strona główna nie nadrabia powolnego arkusza produktu.
Trzy wymiary, na które należy uważać
Mierzy, gdy dostępna staje się widoczna główna treść, często duży obraz lub tytuł.
Obserwuje szybkość reakcji po interakcjach: menu, warianty, filtry, koszyk lub przyciski.
Mierzy nieoczekiwane ruchy treści podczas ładowania.
Shopify agreguje te wskaźniki w swoich raportach wydajności sieci z rzeczywistych danych, gdy dostępna jest wystarczająca ilość.
6-stopniowa metoda diagnostyczna
Wybierz ważne strony
Przetestuj przynajmniej powitanie, dużą kolekcję, reprezentatywny arkusz produktu, koszyk i stronę redakcyjną.
Zacznij od telefonu komórkowego
Połączenia, procesory i rozmiary ekranów sprawiają, że problemy są bardziej widoczne Użyj prawdziwego telefonu, aby uzupełnić narzędzia.
Przeczytaj raporty Shopify
Obserwuj Core Web Vitals, typy stron, których dotyczy problem, oraz zdarzenia odpowiadające instalacji lub zmianie.
Porównaj z PageSpeed Insights
Testowanie laboratoryjne pomaga wykryć zasoby blokujące, ciężkie obrazy, skrypty i nadmierną pracę przeglądarki.
Odizolować przyczynę
Przetestuj kopię motywu, tymczasowo wyłącz blok aplikacji lub skrypt, a następnie porównaj przed i po.
Miara po publikacji
Rzeczywiste dane wymagają czasu, aby odzwierciedlić zmiany Udokumentuj datę, a także monitoruj konwersję.
Najbardziej opłacalne optymalizacje
Aplikacje audytowe
Usuń funkcje bez wystarczającej wartości i sprawdź skrypty, które pozostają po odinstalowaniu.
Rozjaśnij główny obraz
Podawać w odpowiednim rozmiarze, zachować użyteczną jakość i unikać opóźniania obrazu, który stanowi główną treść.
Używaj responsywnych obrazów
Przeglądarka powinna pobrać wersję przyjazną dla ekranu, a nie gigantyczny plik pulpitu na telefon komórkowy.
Zmniejsz JavaScript
Faworyzuj HTML i CSS, gdy to możliwe Wczytaj funkcje tylko na stronach, które ich potrzebują.
Odrocz nieistotne skrypty
Nie wszystkie czat, recenzje, mapy, filmy i narzędzia marketingowe powinny blokować pierwszy wyświetlacz.
Czcionki główne
Ogranicz rodziny i tłuszcze, wstępnie załaduj tylko niezbędne pliki lub rozważ czcionkę systemową.
Wymiary rezerwowe
Ustaw szerokość i wysokość obrazów, filmów i widżetów, aby uniknąć skoków treści.
Wiosłuj duże kolekcje
Nie ładuj setek produktów na raz, gdy wystarczy paginacja lub kontrolowane ładowanie.
Posprzątaj śledzenie marketingu
Usuń nieużywane znaczniki i sprawdź wartość każdego załadowanego narzędzia za pomocą menedżera znaczników.
Priorytet według wpływu
| Akcja | Zwykły priorytet | Dlaczego |
|---|---|---|
| Usuń ciężką i nieprzydatną aplikację | Wysoki | Może zmniejszyć JavaScript, zapytania i przeglądarkę działają na wielu stronach |
| Zoptymalizuj mobilnego bohatera | Wysoki | Największy widoczny element często wpływa na postrzegane obciążenie |
| Opóźnij wideo poniżej linii wodnej | Wysoki | Unikaj natychmiastowego ładowania niewidocznych nośników |
| Ogranicz czcionki i tłuszcze | Średni | Zmniejsza pobieranie i przyspiesza wyświetlanie tekstu |
| Czyść powtarzający się kod Liquid | Średni | Może poprawić czas renderowania na złożonych modelach |
| Zyskaj kilka kilobajtów na małej ikonie | Słaby | Ograniczony wpływ, jeśli główne skrypty i media pozostają ciężkie |
Obrazy: ustawienia, które naprawdę mają znaczenie
Do zrobienia
- Użyj filtrów obrazu Shopify o wielu szerokościach
- Wprowadź wymiary, aby zarezerwować miejsce
- Leniwe ładowanie nośnika pod ekranem
- Zasoby hosta na Shopify CDN
- Testowanie przycinania mobilnego
Aby uniknąć
- Wyślij ten sam obraz 3000 px na wszystkie ekrany
- Bez powodu przełóż opóźnione obciążenie na główny obraz
- Użyj wielu ciężkich suwaków
- Załaduj automatyczne wideo w wysokiej rozdzielczości
- Pomnóż niewidzialne obrazy w karuzelach
Aplikacje i skrypty innych firm: decyduj według wartości
Zidentyfikuj funkcję
Co tak naprawdę produkuje: sprzedaż, zaufanie, wsparcie, dane czy prosta dekoracja?
Zmierz zasięg
Czy skrypt ładuje się na wszystkich stronach, gdy jest przydatny tylko na produkcie lub koszyku?
Wyszukaj funkcję natywną
Motyw lub Shopify może już oferować lżejsze rozwiązanie.
Test przed/po
Porównaj kopię motywu z blokiem i bez niego, a następnie sprawdź, czy dane i sprzedaż pozostają prawidłowe.
Usuń czysto
Po odinstalowaniu sprawdź, czy nie ma fragmentów kodu, znaczników i plików, które mogą pozostać aktywne.
Dokument
Zachowaj właściciela, cel i datę wersji każdego skryptu zewnętrznego.
Optymalizacje techniczne tematu
Progresywny JavaScript
Niezbędne funkcje, takie jak odkrywanie i kupowanie produktu, powinny pozostać solidne Użyj JavaScript, aby poprawić, a nie uzależnić całą stronę.
Skrypty nieblokujące
Dostosowane atrybuty i ładowanie warunkowe zapobiegają opóźnianiu przez pliki początkowej konstrukcji strony.
Skuteczna ciecz
Unikaj powtarzających się skomplikowanych obliczeń w pętlach i analizuj wolne sekcje za pomocą narzędzi Shopify.
Ukierunkowany CSS
Zmniejsz ogólne zależności i unikaj ładowania stylów komponentów, których brakuje na stronie.
Krytyczne zasoby
Wstępnie załaduj tylko niezbędne zasoby na pierwszym ekranie Zbyt wiele preloadów tworzy nową konkurencję.
Narzędzia sterujące
Theme Check może wykryć duże pakiety, zdalne zasoby, blokując JavaScript i niektóre zależności CSS.
Czego nie robić
Za wszelką cenę uzyskaj wynik 100
Nie usuwaj opłacalnej funkcji za kilka punktów Porównaj koszt techniczny i wartość handlową.
Optymalizuj tylko odbiór
Odwiedzający często przybywają bezpośrednio na arkusz produktu, kolekcję lub przedmiot.
Zainstaluj aplikację speed bez diagnostyki
Dodatkowa warstwa nie zawsze koryguje przyczynę i może dodać JavaScript.
Leniwie załaduj całą zawartość
Pierwszy ważny wizualizację powinien pojawić się szybko Leniwy załadunek jest szczególnie przydatny pod widocznym obszarze.
Usuń niezbędne śledzenie
Zachowaj narzędzia potrzebne do zamówień, przypisania i zgodności, a następnie zoptymalizuj ich ładowanie.
Edytuj aktywny motyw bez kopiowania
Pracuj nad duplikatem, testuj kursy i zachowaj wersję do odzyskania.
7-dniowy plan działania
Często zadawane pytania
Do jakiego wyniku PageSpeed powinieneś dążyć?
Nie ma jednego wyniku, który gwarantuje dobre wrażenia Przede wszystkim staraj się poprawić metryki, ważne strony i rzeczywiste dane bez usuwania przydatnych funkcji.
Czy Shopify jest naturalnie powolne?
Shopify zapewnia zoptymalizowaną infrastrukturę i CDN. Ostateczna wydajność zależy w dużej mierze od dodanego motywu, multimediów, aplikacji i skryptów.
Czy wszystkie aplikacje spowalniają sklep?
Nie. Ich wpływ różni się w zależności od kodu, ładowania stron i funkcji.Oceń każdy z osobna.
Czy muszę kompresować wszystkie obrazy ręcznie?
Shopify wykonuje transformacje i obsługuje obrazy za pośrednictwem swojego CDN, ale zawsze należy poprosić o odpowiednie wymiary i unikać niepotrzebnie dużych plików źródłowych.
Jak długo zanim zobaczysz poprawę?
Testy laboratoryjne reagują natychmiast, natomiast raporty oparte na rzeczywistych użytkownikach wymagają dalszych wizyt i mogą wykazywać opóźnienia.
Dobra optymalizacja usuwa hamulce bez usuwania wartości
Spraw, aby Twój sklep Shopify był szybszy, stabilniejszy i przyjemniejszy na urządzeniach mobilnych
Przed wprowadzeniem jakichkolwiek zmian poddaj audytowi motyw, aplikacje, skrypty i multimedia.
