Jak zrychlit e-shop

Pomalý e-shop nepřijde o zákazníky viditelně. Přijde o ně tiše, protože lidé odejdou dřív, než se stránka vůbec vykreslí. Tady je pořadí kroků od těch, které přinesou nejvíc, po ty, které dolaďují detaily.

Co rychlost reálně dělá s tržbami

Na e-shopech, které jsem měřil, platí zhruba jedno pravidlo. Každá vteřina navíc do načtení hlavního obsahu ubere kolem sedmi procent objednávek. Na e-shopu s obratem 400 000 Kč měsíčně to jsou desítky tisíc, které nikde nevidíte, protože ti lidé se nikdy neobjeví ve statistikách nákupů.

Nejcitlivější je mobil na datech mimo město. Zákazník na LTE v Jeseníkách nebo na Vysočině má reálnou rychlost pětkrát nižší než vy na kanceláři s optikou. Když si e-shop testujete jen na Wi-Fi, měříte úplně jiný web, než jaký vidí polovina vašich zákazníků.

Druhý efekt je v reklamě. Pomalá cílová stránka zdražuje proklik, protože systémy hodnotí zkušenost po kliknutí. Zrychlení z pěti vteřin na dvě dokáže snížit cenu za proklik o deset až dvacet procent, což při rozpočtu 30 000 Kč měsíčně dělá tři až šest tisíc měsíčně zpátky v kapse.

Obrázky, kde je skoro vždycky největší zisk

Na typickém e-shopu tvoří obrázky šedesát až osmdesát procent přenesených dat. Nejčastější nález je fotka produktu v rozlišení 3000 pixelů zmenšená kódem na 400. Prohlížeč stáhne celý originál. Přeuložení na správný rozměr a formát WebP obvykle ubere osmdesát až devadesát procent velikosti bez viditelné ztráty kvality.

Druhá věc je líné načítání. Obrázky pod ohybem stránky nemají důvod se stahovat hned. Atribut loading s hodnotou lazy je jeden řádek na obrázek a na kategorii s padesáti produkty ušetří klidně dvě vteřiny. Naopak hlavní obrázek nahoře lazy mít nesmí, tam to škodí.

Třetí je pevné rozměry. Když obrázek nemá zadanou výšku a šířku, stránka při načtení poskakuje, obsah se posouvá a lidé kliknou vedle. Tenhle posun je i měřený faktor. Doplnění rozměrů je pár minut práce a odstraní ho úplně.

• Zmenšit fotky na skutečně zobrazovaný rozměr, obvykle 800 až 1200 px
• Převést na WebP nebo AVIF s kvalitou kolem 80
• Přidat loading lazy všem obrázkům mimo první obrazovku
• Doplnit width a height do každé značky obrázku
• Nahradit dekorativní PNG za SVG nebo CSS
• Zkontrolovat ikony, často se načítá celá knihovna kvůli pěti symbolům

Skripty třetích stran, tichý zabiják výkonu

Na e-shopech běžně najdu deset až patnáct externích skriptů. Chat, dvě analytiky, tři pixely, hodnocení obchodu, sledování opuštěného košíku, A/B test, poutač na slevu. Každý z nich stahuje vlastní kód a blokuje vykreslení. Součet bývá dvě až čtyři vteřiny.

Postup je nemilosrdný. Otevřete si seznam skriptů a u každého napište, kdy naposledy jste s ním pracovali a jaké rozhodnutí z něj vzešlo. Co nemá odpověď, jde pryč. Na většině e-shopů takhle vypadne třetina skriptů a nikdo si toho nevšimne, kromě zrychlení.

U zbytku řešte načasování. Chat a hodnocení nemusí být na stránce v první vteřině, stačí je načíst po interakci nebo po třech vteřinách. Měřicí kód dejte na server přes CAPI, ať prohlížeč nedělá práci navíc. Nastavení Pixelu a CAPI dělám za 6 900 Kč a vedle přesnějších dat to zrychlí i samotnou stránku.

Cache, CDN a hosting, kde ušetřit nejde

Cache znamená, že server nepočítá stránku pokaždé znovu. U e-shopu se musí nastavit chytře, protože košík a přihlášený zákazník se cachovat nesmí. Správně nastavená stránková cache sundá odezvu serveru z osmi set milisekund na sto padesát, což je změna, kterou pozná i laik.

CDN rozdistribuuje statické soubory na servery blíž k zákazníkovi. Pro český e-shop se zákazníky výhradně v Česku a na Slovensku je zisk menší, řádově sto až dvě stě milisekund. Pokud ale prodáváte do Německa nebo Rakouska, rozdíl je znatelný.

Hosting za 99 Kč měsíčně na sdíleném serveru je pro e-shop past. Sdílíte výkon s desítkami dalších webů a ve špičce se to projeví přesně tehdy, když vám běží reklama. Rozumný VPS začíná kolem 500 až 900 Kč měsíčně a rozdíl v odezvě bývá dvojnásobný.

Jak měřit, aby čísla něco znamenala

Měřte na mobilu a s omezenou rychlostí. PageSpeed Insights dává mobilní skóre jako výchozí, což je správně, protože tam je pravda. Skóre samo o sobě ale neřešte, důležité jsou tři konkrétní hodnoty. Doba do vykreslení hlavního obsahu, posun rozvržení a odezva na první kliknutí.

Cíle jsou jasné. Hlavní obsah do 2,5 vteřiny, posun rozvržení pod 0,1 a odezva pod 200 milisekund. Když jedno z těchto tří čísel není v pořádku, opravujte to a ne skóre. Skóre se zvedne samo.

Druhá vrstva měření jsou reálná data z návštěvníků. Search Console ukazuje, jak web funguje u skutečných lidí za posledních 28 dní. Tam se pozná, jestli je e-shop pomalý jen na kategorii nebo i na detailu produktu, a hlavně jak to vypadá na starších telefonech, které v Česku pořád tvoří velkou část provozu.

• PageSpeed Insights, mobilní záložka, ne desktop
• Search Console, sekce Core Web Vitals, reálná data
• Testovat kategorii, detail produktu i košík zvlášť
• Měřit před zásahem a po něm, jinak nevíte co pomohlo
• Otestovat na skutečném telefonu na mobilních datech

Chyby, které si e-shopaři dělají sami

Nejčastější je instalace pluginu na zrychlení místo odstranění příčiny. Optimalizační plugin přidá další vrstvu kódu a často rozbije vzhled. Zrychlování začíná mazáním, ne přidáváním.

Druhá chyba je rotující banner na hlavní stránce se čtyřmi fotkami v plném rozlišení. Stáhne se všechny čtyři, i když zákazník uvidí jednu. Statický obrázek s jasným sdělením konvertuje lépe a načte se čtyřikrát rychleji.

Třetí chyba je optimalizovat homepage a zapomenout na detail produktu. Většina návštěv z vyhledávání i z reklamy přistane rovnou na produktu. Když měříte jen úvodní stránku, měříte tu stránku, kterou vidí nejmíň lidí.

Čtvrtá chyba je vlastní hodnocení očima. Vy máte web v cache prohlížeče a načte se vám okamžitě. Otestujte ho v anonymním okně na telefonu s omezenými daty. To je pravda, kterou vidí zákazník.

Časté otázky

Jaká rychlost je pro e-shop dost dobrá?

Hlavní obsah do 2,5 vteřiny na mobilu při běžném připojení. Pod dvě vteřiny je výborné, nad čtyři už reálně přicházíte o objednávky. Nehoňte skóre 100, to je u e-shopu s měřicími kódy a chatem prakticky nedosažitelné. Rozdíl mezi skóre 55 a 85 pocítíte na tržbách, rozdíl mezi 85 a 95 už skoro ne.

Kolik stojí zrychlení existujícího e-shopu?

Záleží na tom, na čem stojí. Optimalizace obrázků, úklid skriptů a nastavení cache se u běžného e-shopu vejde do jednoho až dvou dnů práce. Když je problém v samotné šabloně nebo v platformě, je levnější postavit web znovu než ho opravovat. Web od 19 990 Kč stavím rovnou tak, aby rychlost nebyla téma.

Zrychlí e-shop přechod na jinou platformu?

Někdy ano, ale je to nejdražší možná cesta a často zbytečná. Než měnit platformu, zkuste nejdřív úklid obrázků a skriptů. Na většině e-shopů to sundá dvě až tři vteřiny za jeden den práce. Migrace dává smysl, když vás platforma brzdí i v jiných věcech, ne kvůli rychlosti samotné.