Zrýchlenie pomalého Shopify e-shopu: audit očami vývojára

Shopify beží na výbornej infraštruktúre. Ak je váš e-shop pomalý, nie je to platformou — je to tým, čo na nej stojí. Dobrá správa: príčiny sú takmer vždy tie isté a dajú sa odstrániť.

Najprv merajte správne

Skóre z PageSpeed Insights nie je cieľ. Je to indikátor. Sledujte tri konkrétne veci:

• LCP — kedy sa vykreslí najväčší prvok. Pri produktovej stránke spravidla hlavný obrázok.
• INP — ako rýchlo stránka odpovie na kliknutie.
• CLS — či sa obsah pod prstom poskakuje.

A merajte reálne dáta z terénu, nie laboratórny test. Zákazníci chodia z mobilu, cez mobilné dáta a s pomalším zariadením, než máte vy.

Merajte tri typy stránok: domovskú, kolekciu s veľa produktmi a produktovú. Každá má iné úzke hrdlo.

Kde hľadať príčinu — v poradí, ako to robím

1. Aplikácie

Najčastejší vinník, o ktorom píšem samostatne. Otvorte kartu Network a pozrite, koľko cudzích domén stránka volá. Každá je príležitosť na spomalenie.

2. Obrázky

Druhý najčastejší. Typické chyby: nahratý obrázok 3000 px široký, ktorý sa zobrazuje na 400 px; chýbajúce responzívne veľkosti; obrázky pod ohybom bez lazy loadingu; a naopak — lazy loading na hlavnom obrázku produktu, čo priamo zhoršuje LCP.

Shopify vie obrázky sám prevádzať do moderných formátov a meniť veľkosť. Stačí to v téme správne použiť.

3. Fonty

Tri rodiny písma v piatich rezoch znamenajú pätnásť súborov. Obmedzte sa na dve rodiny a rezy, ktoré reálne používate. Načítajte ich vopred a nastavte font-display: swap, aby text nečakal na písmo.

4. Skripty tretích strán

Meracie a marketingové skripty. Nemôžete ich vyhodiť, ale môžete ich načítať odložene a niektoré presunúť na server. Nedávajte ich do hlavičky, ak tam nemusia byť.

5. Liquid

Tu sa hľadá dlhšie, ale výsledky bývajú výrazné. Klasické chyby: cyklus cez všetky produkty v kolekcii bez limitu, cyklus vo vnútri cyklu pri variantoch, opakované volanie tej istej informácie namiesto uloženia do premennej, a načítavanie celého objektu produktu tam, kde stačí jeden údaj.

6. Téma

Ak je pomalá samotná téma, oprava je väčší zásah. Otestujte to tak, že si na kópii zapnete štandardnú Shopify tému a zmeriate rozdiel. Ak je priepastný, viete, kde je problém.

Čo funguje najrýchlejšie

Podľa mojej skúsenosti prináša najväčší efekt s najmenšou prácou toto poradie:

1. Odinštalovať nepoužívané appky a vyčistiť po nich zvyšky v téme.
2. Opraviť obrázky — veľkosti, formáty, lazy loading, ale hlavný obrázok bez neho.
3. Zredukovať fonty.
4. Odložiť načítanie nekritických skriptov.
5. Až potom sa hrabať v Liquide.

Čo nerobiť

• Neinštalujte appku na zrýchlenie. Je to appka. Pridáva skript. Riešite problém jeho príčinou.
• Nehonte skóre 100. Rozdiel medzi 70 a 85 zákazník pocíti. Medzi 92 a 97 nie.
• Nemeňte päť vecí naraz. Nebudete vedieť, čo pomohlo a čo uškodilo.

Koľko to prinesie

Buďme konkrétni v tom, čo sa dá čakať: pri e-shope s dvanástimi appkami a neoptimalizovanými obrázkami sa dá bežne zraziť čas načítania o polovicu. Pri e-shope, ktorý už je slušne postavený, získate desatiny sekundy. Prvý prípad sa oplatí riešiť okamžite, druhý až vtedy, keď nemáte dôležitejšiu prácu.

Rýchlosť nie je technická metrika. Je to počet ľudí, ktorí neodišli skôr, než sa im stránka načítala.