Zrychlení Shopify: šablona, aplikace, obrázky

Každý obchod na Shopify běží na stejných serverech a CDN, takže pomalý obchod je pomalý kvůli tomu, co načítá: šablona, skripty aplikací, obrázky a video. Zrychlení Shopify znamená tohle odebírat a zmenšovat, ne měnit hosting. Ve většině obchodů přinese nejvíc odstranění nepoužívaného kódu aplikací, komprese hlavního obrázku a pozdější načítání widgetů.

Tento návod ukazuje, jak rychlost správně měřit, a pak projde opravy v pořadí, v jakém se obvykle vyplácí. Je součástí návodu SEO pro Shopify.

Měř správné stránky

Otestuj stránku produktu a stránku kolekce, ne jen úvodní stránku. Právě ty rankují a na ty kupující přicházejí.

• Google PageSpeed Insights dává laboratorní skóre pro jedno načtení a, pokud má obchod dost návštěvníků, skutečné Core Web Vitals od uživatelů Chromu za posledních 28 dní. Google používá právě data od skutečných uživatelů.
• Přehled Core Web Vitals v Search Console seskupuje URL podle stavu, takže uvidíš, jestli mají všechny stránky produktů stejný problém.
• Přehled výkonu webu v Shopify v Analytics ukazuje stejné metriky od skutečných uživatelů v čase, což se hodí k ověření, jestli změna pomohla.

Soustřeď se na tři Core Web Vitals: Largest Contentful Paint (jak rychle se objeví hlavní obrázek nebo text), Interaction to Next Paint (jak rychle stránka reaguje na klepnutí) a Cumulative Layout Shift (jak moc věci poskakují). Laboratorní skóre se mezi testy liší, nehoň dokonalou stovku.

1. Odstraň kód aplikací, které nepoužíváš

Aplikace jsou nejčastější příčinou pomalého obchodu na Shopify. Každá, která zasahuje do obchodu, může na každou stránku přidat JavaScript a CSS.

• Sepiš si aplikace, které máš. Odinstaluj ty, které už nepoužíváš.
• Odinstalace ne vždy odstraní kód, který aplikace do šablony přidala. Prohledej soubory šablony (Online Store > Themes > Edit code) podle názvu aplikace a odstraň zbylé snippety a tagy skriptů.
• Dávej přednost aplikacím, které používají rozšíření aplikací pro šablony (bloky aplikací, které přidáš v editoru šablony). Při odinstalaci se čistě odstraní a načítají se jen tam, kam je umístíš.
• U aplikací, které si necháš, zkontroluj, jestli se načítají na každé stránce. Tabulka velikostí je potřeba jen na stránkách produktů.

2. Oprav největší obrázek

Na většině stránek produktů a kolekcí je největším prvkem fotka produktu nebo úvodní banner. Zrychli ho:

• Nahrávej rozumné soubory. Před nahráním zmenši fotky na šířku zhruba 2 000 až 2 500 pixelů a zkomprimuj je. CDN Shopify automaticky posílá zmenšené verze a moderní formáty jako WebP, ale obrovský originál pořád stojí čas.
• První obrázek nenačítej líně. Obrázky v horní části stránky se mají načíst hned. Líné načítání je pro obrázky níž.
• Používej responzivní obrázky. Aktuální šablony používají filtry image_url a image_tag od Shopify, aby každé obrazovce poslaly správnou velikost. Starší šablony můžou posílat jednu velkou velikost každému zařízení.
• V úvodní části se vyhni automaticky přehrávanému videu. Pokud video potřebuješ, ukaž nejdřív náhledový obrázek a video načti až potom.

3. Načítej widgety později

Recenze, chatovací bubliny, vyskakovací okna, karusely doporučených produktů a feedy ze sociálních sítí se jen zřídka musí načíst dřív než produkt.

• Chat a vyskakovací okna načti až poté, co je stránka interaktivní, nebo se zpožděním.
• Widgety recenzí dej pod přehyb, aby neblokovaly hlavní obsah. Text recenzí kvůli SEO nech v HTML stránky.
• Odstraň měřicí pixely třetích stran, na které se už nedíváš. Každý je další skript.

4. Používej aktuální šablonu

Šablony postavené pro Online Store 2.0, včetně bezplatných šablon Shopify založených na Dawn, jsou navržené kolem bloků aplikací, responzivních obrázků a lehčího JavaScriptu. Šablona z doby před několika lety s těžkými slidery a jQuery může být pomalá, ať odstraníš cokoli.

Před přechodem otestuj demo stránku produktu nové šablony v PageSpeed Insights. Šablona, která je pomalá už ve vlastním demu, bude pomalá i s tvými produkty.

5. Zastav posouvání rozvržení

Obsah, který při načítání poskakuje, zhoršuje Cumulative Layout Shift a otravuje kupující.

• Dej obrázkům šířku a výšku (filtr image_tag od Shopify je přidává).
• Rezervuj místo pro bannery a oznamovací lišty, které se objeví po načtení.
• Vlastní fonty načítej s font-display: swap a omez počet řezů.

Co moc nepomůže

• Aplikace na zrychlení. Většina přidává na stránku vlastní skript. Odebírání kódu je lepší než jeho přidávání.
• Změna hostingu nebo CDN. Na Shopify to nejde a není to potřeba.
• Minifikace pár kilobajtů CSS. Ve srovnání s odstraněním aplikace nebo opravou hlavního obrázku metriky od skutečných uživatelů téměř nepohne.

Udrž obchod rychlý

S přidáváním aplikací a sekcí se rychlost zhoršuje. Po každé nové aplikaci znovu zkontroluj stránku produktu a jednou měsíčně se podívej do přehledu Core Web Vitals. Audit webu, třeba ten v zaDojo, označí pomalé stránky a příliš velké obrázky v celém obchodě, takže nemusíš testovat stránku po stránce.

Časté otázky

Ovlivňuje rychlost Shopify SEO? Ano, trochu. Core Web Vitals jsou signál pro hodnocení, ale obsah a relevance znamenají víc. Rychlost má větší vliv na prodeje: kupující z pomalých stránek produktů odcházejí.

Jaké je dobré skóre rychlosti Shopify? Cílej na „dobré“ Core Web Vitals v datech od skutečných uživatelů (Largest Contentful Paint pod 2,5 sekundy, Interaction to Next Paint pod 200 milisekund, Cumulative Layout Shift pod 0,1). Laboratorní skóre ze 100 je vodítko, ne cíl.

Proč je můj obchod na Shopify pomalý na mobilu? Telefony mají pomalejší procesory a připojení, takže těžký JavaScript z aplikací tam škodí mnohem víc. Testuj nejdřív na mobilu.