Przyspieszanie Shopify: motyw, aplikacje, zdjęcia

Każdy sklep Shopify działa na tych samych serwerach i CDN, więc wolny sklep jest wolny przez to, co ładuje: motyw, skrypty aplikacji, zdjęcia i wideo. Przyspieszanie Shopify polega na usuwaniu i zmniejszaniu tych elementów, a nie na zmianie hostingu. W większości sklepów największe zyski dają usunięcie nieużywanego kodu aplikacji, kompresja głównego zdjęcia i późniejsze ładowanie widżetów.

Ten poradnik pokazuje, jak dobrze mierzyć szybkość, a potem omawia poprawki w kolejności, w jakiej zwykle się opłacają. Jest częścią poradnika SEO dla Shopify.

Mierz właściwe strony

Testuj stronę produktu i stronę kolekcji, a nie tylko stronę główną. To one są wysoko w wynikach i na nie trafiają kupujący.

• Google PageSpeed Insights podaje wyniki laboratoryjne dla pojedynczego wczytania, a jeśli sklep ma dość odwiedzających, także prawdziwe Core Web Vitals od użytkowników Chrome z ostatnich 28 dni. Google korzysta właśnie z danych od prawdziwych użytkowników.
• Raport Podstawowe wskaźniki internetowe w Search Console grupuje adresy według stanu, więc widzisz, czy wszystkie strony produktów mają ten sam problem.
• Raport wydajności witryny w Shopify (w sekcji Analytics) pokazuje te same dane od prawdziwych użytkowników w czasie, co pomaga sprawdzić, czy zmiana coś dała.

Skup się na trzech Core Web Vitals: Largest Contentful Paint (jak szybko pojawia się główne zdjęcie lub tekst), Interaction to Next Paint (jak szybko strona reaguje na dotknięcie) i Cumulative Layout Shift (jak bardzo elementy skaczą). Wyniki laboratoryjne wahają się między testami; nie goń za idealną setką.

1. Usuń kod nieużywanych aplikacji

Aplikacje to najczęstsza przyczyna wolnego sklepu Shopify. Każda, która dotyka witryny sklepu, może dodać JavaScript i CSS do każdej strony.

• Spisz swoje aplikacje. Odinstaluj te, których już nie używasz.
• Odinstalowanie nie zawsze usuwa kod, który aplikacja dodała do motywu. Przeszukaj pliki motywu (Online Store > Themes > Edit code) pod kątem nazwy aplikacji i usuń pozostałe fragmenty i tagi skryptów.
• Wybieraj aplikacje korzystające z rozszerzeń motywu (app blocks dodawanych w edytorze motywu). Znikają czysto po odinstalowaniu i ładują się tylko tam, gdzie je umieścisz.
• W aplikacjach, które zostawiasz, sprawdź, czy ładują się na każdej stronie. Tabela rozmiarów potrzebna jest tylko na stronach produktów.

2. Popraw największe zdjęcie

Na większości stron produktów i kolekcji największym elementem jest zdjęcie produktu lub baner główny. Niech ładuje się szybko:

• Wgrywaj rozsądne pliki. Przed wgraniem zmniejsz zdjęcia do około 2000 do 2500 pikseli szerokości i skompresuj je. CDN Shopify automatycznie serwuje pomniejszone wersje i nowoczesne formaty, takie jak WebP, ale ogromny oryginał nadal kosztuje czas.
• Nie ładuj leniwie pierwszego zdjęcia. Zdjęcia na górze strony powinny ładować się od razu. Lazy loading jest dla zdjęć niżej.
• Używaj zdjęć responsywnych. Aktualne motywy używają filtrów Shopify image_url i image_tag, żeby serwować właściwy rozmiar dla każdego ekranu. Starsze motywy mogą wysyłać jeden duży rozmiar na każde urządzenie.
• Unikaj automatycznie odtwarzanego wideo w nagłówku. Jeśli potrzebujesz wideo, najpierw pokaż obraz zastępczy, a wideo załaduj później.

3. Ładuj widżety później

Opinie, dymki czatu, pop-upy, karuzele z propozycjami i feedy z social mediów rzadko muszą ładować się przed produktem.

• Ładuj czat i pop-upy, gdy strona jest już interaktywna, albo z opóźnieniem.
• Umieść widżety opinii poniżej pierwszego ekranu, żeby nie blokowały głównej treści. Tekst opinii zostaw w HTML strony ze względu na SEO.
• Usuń zewnętrzne piksele śledzące, do których już nie zaglądasz. Każdy to kolejny skrypt.

4. Używaj aktualnego motywu

Motywy zbudowane dla Online Store 2.0, w tym darmowe motywy Shopify oparte na Dawn, są projektowane wokół app blocks, zdjęć responsywnych i lżejszego JavaScriptu. Motyw sprzed kilku lat z ciężkimi sliderami i jQuery może być wolny bez względu na to, co usuniesz.

Przed zmianą przetestuj stronę produktu w wersji demo nowego motywu w PageSpeed Insights. Motyw, który jest wolny we własnym demo, będzie wolny także z Twoimi produktami.

5. Zatrzymaj przesunięcia układu

Treść, która skacze podczas ładowania strony, pogarsza Cumulative Layout Shift i irytuje kupujących.

• Podawaj szerokość i wysokość zdjęć (filtr image_tag w Shopify dodaje je automatycznie).
• Rezerwuj miejsce na banery i paski ogłoszeń, które pojawiają się po wczytaniu.
• Ładuj własne fonty z font-display: swap i ogranicz liczbę grubości.

Co niewiele pomaga

• Aplikacje przyspieszające. Większość dodaje do strony własny skrypt. Usuwanie kodu wygrywa z dodawaniem kodu.
• Zmiana hostingu lub CDN. W Shopify nie możesz tego zrobić i nie musisz.
• Minifikacja kilku kilobajtów CSS. Rzadko zmienia dane od prawdziwych użytkowników w porównaniu z usunięciem aplikacji czy poprawą głównego zdjęcia.

Utrzymaj szybkość

Szybkość spada, gdy dodajesz aplikacje i sekcje. Sprawdzaj stronę produktu po każdej nowej aplikacji i co miesiąc zaglądaj do raportu Core Web Vitals. Audyt strony, taki jak w zaDojo, oznacza wolne strony i za duże zdjęcia w całym sklepie, więc nie musisz testować stron pojedynczo.

Najczęstsze pytania

Czy szybkość Shopify wpływa na SEO? Tak, trochę. Core Web Vitals to sygnał rankingowy, ale treść i trafność znaczą więcej. Szybkość ma większe znaczenie dla sprzedaży: kupujący opuszczają wolne strony produktów.

Jaki wynik szybkości Shopify jest dobry? Celuj w „Dobre” Core Web Vitals w danych od prawdziwych użytkowników (Largest Contentful Paint poniżej 2,5 sekundy, Interaction to Next Paint poniżej 200 milisekund, Cumulative Layout Shift poniżej 0,1). Wynik laboratoryjny w skali do 100 to wskazówka, a nie cel.

Dlaczego mój sklep Shopify jest wolny na telefonie? Telefony mają wolniejsze procesory i połączenia, więc ciężki JavaScript z aplikacji szkodzi tam dużo bardziej. Testuj najpierw na telefonie.