Shopify zajišťuje infrastrukturu, CDN a část optimalizace přenášených souborů. Výsledný výkon ale ovlivňuje zvolená šablona, vlastní kód, aplikace, analytické značky, obrázky, videa i množství obsahu na stránce. Optimalizace proto začíná měřením konkrétního problému.
Tři metriky Core Web Vitals
| Metrika | Co sleduje | Dobrá hodnota |
|---|---|---|
| LCP | Za jak dlouho se zobrazí hlavní obsah stránky | Nejvýše 2,5 sekundy |
| INP | Jak rychle stránka reaguje na interakce | Nejvýše 200 ms |
| CLS | Jak moc se obsah při načítání nečekaně posouvá | Nejvýše 0,1 |
Hodnocení se vztahuje k 75. percentilu návštěv. Nestačí tedy, aby dobrého výsledku dosáhl rychlý notebook vývojáře. Shopify ve svých přehledech pracuje s reálnými návštěvami a odděluje také zařízení a typy stránek.
Reálná data versus Lighthouse
Přehledy výkonu v Shopify používají data skutečných návštěvníků. Ta zachycují různá zařízení, sítě a chování, ale potřebují dostatečnou návštěvnost a mohou být zpožděná. Lighthouse vytváří laboratorní test v definovaných podmínkách. PageSpeed Insights k němu může přidat také reálná data Chrome UX Reportu, pokud jich má pro danou stránku nebo doménu dostatek.
Výsledky se proto nemusí shodovat. Laboratorní skóre není obchodní cíl samo o sobě. Důležitější je trend reálných dat, problematické typy stránek a dopad konkrétní změny.
Nejčastější zdroje zpomalení
- Šablona a vlastní kód: velké balíky JavaScriptu, blokující skripty, složité sekce nebo kód načítaný i tam, kde není potřeba.
- Aplikace: vložené skripty, widgety, doporučení, chaty nebo analytika mohou přidat síťové požadavky a práci pro prohlížeč.
- Média: příliš velké obrázky, chybějící responzivní varianty, automatická videa nebo neuvedené rozměry zhoršují LCP i CLS.
- Externí služby: správce značek, reklamní pixely a další knihovny mohou ovlivnit hlavně INP.
- Obsah stránky: nadměrné množství sekcí, produktů nebo karuselů prodlužuje vykreslení a práci zařízení.
Praktické pořadí optimalizace
Uložte reálné metriky, laboratorní testy a datum posledních změn.
Oddělte úvodní stránku, kolekce a produkty. Každý typ může mít jinou příčinu.
Zkontrolujte hlavní obrázek, skripty, aplikace, posuny rozložení a dlouhé úlohy JavaScriptu.
Výsledek se pak dá připsat konkrétní úpravě místo náhodnému souboru zásahů.
Počkejte na nová reálná data a sledujte také funkčnost a obchodní metriky.
Úpravy, které často dávají smysl
- Neodkládat načítání obrázků viditelných bez posunutí stránky
- Používat responzivní obrázky se správnými rozměry
- Načítat nekritické funkce až při interakci nebo později
- Omezit JavaScript tam, kde stejnou funkci zvládne HTML a CSS
- Odstranit nepoužívané aplikace, vložený kód a značky
- Vyhradit prostor pro obrázky, bannery a dynamické prvky
- Testovat změny šablony na skutečných typech stránek a na mobilu
Ne každá funkce musí zmizet
Některý prvek může výkon zhoršit, ale zároveň být důležitý pro nákupní rozhodnutí. Cílem není odstranit všechny aplikace, videa nebo analytiku. Je potřeba porovnat jejich přínos, technickou cenu a možnost lehčí implementace.
Nejrychlejší stránka bez informací nemusí prodávat. Dobrá optimalizace hledá rovnováhu mezi obsahem, funkcemi a odezvou.
Co má obsahovat audit výkonu
Audit má spojit reálné metriky, test hlavních šablon, seznam aplikací a skriptů a konkrétní pořadí oprav. Obecný export z PageSpeed Insights bez znalosti Shopify šablony obvykle nestačí k bezpečné realizaci.
Časté otázky
Jaké skóre rychlosti je pro Shopify dobré?
Jedno univerzální číslo nestačí. Sledujte hlavně LCP, INP a CLS v reálných datech a jejich vývoj. Laboratorní skóre je užitečné pro diagnostiku, ne jako jediný obchodní cíl.
Zpomalují Shopify aplikace vždy e-shop?
Ne každá aplikace má stejný dopad. Rozhoduje, co načítá v zákaznické části, na kterých stránkách a kdy. Konkrétní vliv je potřeba změřit.
Proč je e-shop pomalejší na mobilu než na počítači?
Mobilní zařízení mohou mít slabší procesor, pomalejší síť a menší rezervu pro složitý JavaScript nebo velká média. Proto je potřeba mobilní zkušenost měřit a testovat samostatně.
Je e-shop pomalý hlavně na mobilu?
Pošlete mi adresu obchodu a popis posledních změn. Prověřím šablonu, načítané zdroje a připravím pořadí úprav podle jejich dopadu a rizika.
Poptat audit výkonu →︎