Zrychlení pomalého Shopify e-shopu: audit očima vývojáře

Shopify běží na výborné infrastruktuře. Pokud je váš e-shop pomalý, není to platformou — je to tím, co na ní stojí. Dobrá zpráva: příčiny jsou skoro vždycky stejné a dají se odstranit.

Nejdřív měřte správně

Skóre z PageSpeed Insights není cíl, je to indikátor. Sledujte tři konkrétní věci: LCP (kdy se vykreslí největší prvek, u produktové stránky zpravidla hlavní obrázek), INP (jak rychle stránka odpoví na kliknutí) a CLS (jestli obsah pod prstem poskakuje).

A měřte reálná data z terénu, ne laboratorní test. Zákazníci chodí z mobilu, přes mobilní data a s pomalejším zařízením, než máte vy.

Měřte tři typy stránek: domovskou, kolekci s hodně produkty a produktovou. Každá má jiné úzké hrdlo.

Kde hledat příčinu, v pořadí, jak to dělám

1. Aplikace

Nejčastější viník, o kterém píšu samostatně. Otevřete kartu Network a podívejte se, kolik cizích domén stránka volá. Každá je příležitost ke zpomalení.

2. Obrázky

Druhý nejčastější. Typické chyby: nahraný obrázek 3000 px široký, který se zobrazuje na 400 px; chybějící responzivní velikosti; obrázky pod ohybem bez lazy loadingu; a naopak lazy loading na hlavním obrázku produktu, což přímo zhoršuje LCP.

Shopify umí obrázky sám převádět do moderních formátů a měnit velikost. Stačí to v šabloně správně použít.

3. Fonty

Tři rodiny písma v pěti řezech znamenají patnáct souborů. Omezte se na dvě rodiny a řezy, které reálně používáte. Načtěte je předem a nastavte font-display: swap, aby text nečekal na písmo.

4. Skripty třetích stran

Měřicí a marketingové skripty. Nemůžete je vyhodit, ale můžete je načíst odloženě a některé přesunout na server. Nedávejte je do hlavičky, pokud tam nemusí být.

5. Liquid

Tady se hledá déle, ale výsledky bývají výrazné. Klasické chyby: cyklus přes všechny produkty v kolekci bez limitu, cyklus uvnitř cyklu u variant, opakované volání téže informace místo uložení do proměnné a načítání celého objektu produktu tam, kde stačí jeden údaj.

6. Šablona

Pokud je pomalá samotná šablona, oprava je větší zásah. Otestujte to tak, že si na kopii zapnete standardní Shopify šablonu a změříte rozdíl. Pokud je propastný, víte, kde je problém.

Co funguje nejrychleji

Podle mojí zkušenosti přináší největší efekt s nejmenší prací tohle pořadí:

1. Odinstalovat nepoužívané aplikace a vyčistit po nich zbytky v šabloně.
2. Opravit obrázky — velikosti, formáty, lazy loading, ale hlavní obrázek bez něj.
3. Zredukovat fonty.
4. Odložit načtení nekritických skriptů.
5. A teprve pak se hrabat v Liquidu.

Co nedělat

• Neinstalujte aplikaci na zrychlení. Je to aplikace. Přidává skript. Řešíte problém jeho příčinou.
• Nehoňte skóre 100. Rozdíl mezi 70 a 85 zákazník pocítí. Mezi 92 a 97 ne.
• Neměňte pět věcí najednou. Nebudete vědět, co pomohlo a co uškodilo.

Kolik to přinese

Buďme konkrétní. U e-shopu s dvanácti aplikacemi a neoptimalizovanými obrázky se dá běžně srazit čas načtení na polovinu. U e-shopu, který už je slušně postavený, získáte desetiny sekundy. První případ se vyplatí řešit okamžitě, druhý až tehdy, když nemáte důležitější práci.

Rychlost není technická metrika. Je to počet lidí, kteří neodešli dřív, než se jim stránka načetla.