Zrychlení Shoptetu: co opravdu brzdilo velký e-shop

Nejdřív měřit, potom opravovat

Malvarosa prodává nábytek a bytové doplňky v češtině a slovenštině. Zadání znělo zastavit poskakování stránek a zrychlit web, a to v ostrém provozu bez testovacího obchodu. Předělávat šablonu bez důkazu, že to něco řeší, zadání výslovně vylučovalo.

Každou změnu jsem proto nejdřív změřil, pustil ven se zálohou a postupem návratu a zkontroloval na 10 až 15 typech stránek v obou jazycích. Čísla níž jsou z laboratorního měření. Data od skutečných návštěvníků se v Googlu počítají za 28 dní, takže je tu jako výsledek neuvádím.

12,9 MB obrázků v menu, které nikdo nevidí

Největší brzda nebyla tam, kde bych ji čekal. Kód v šabloně přepisoval u všech 77 obrázků v rozbalovacím menu adresu z miniatury na originál. Místo souboru o 3,5 kB se tak stahoval originál o průměrné velikosti 174 kB a na stránce byl stejně široký jen 140 px.

Dohromady to dělalo 12,9 MB při každém načtení stránky, ať člověk menu otevřel, nebo ne. Lighthouse přitom hlásil jen 3,8 MB, protože zbytek nestihl stáhnout. Kdo se dívá jen na skóre, velikost problému nepozná. Po opravě se originály načtou až po otevření podmenu.

Poskakování stránky: sekce vysoká přesně 192 px

Poskakování měří Google jako CLS a za dobré bere hodnotu do 0,1. Malvarosa měla v datech Googlu 0,16. Příčinu jsem našel ve výpisu kategorie: ve druhé sekundě načítání se do stránky přidala sekce vysoká 192 px a obsah pod ní skočil dolů přesně o tolik. Oprava je jednoduchá, když víte kde: místo se musí rezervovat předem.

• Výpis kategorie na mobilu: z 0,224 na 0,02.
• Stejná kategorie ve slovenské verzi: z 0,224 na 0,008.
• Poskakování na počítači: z 0,163 na nulu.

Titulka a detail produktu problém neměly (0,0004 a 0). Kdybych šablonu upravoval plošně, riskoval bych rozbití stránek, které fungovaly.

Doplněk, který nic nedělal a stál 431 kB

Na každé stránce se stahoval doplněk vyhledávání o velikosti 431 kB a vyhledávání přes něj nefungovalo. Z webu zmizel. Písma navíc blokovala vykreslení, takže prohlížeč čekal, než se stáhnou. Teď už nečeká.

Jak to zkontrolovat na vlastním e-shopu

• V PageSpeed Insights změřte výpis kategorie, ne jen titulku. U Malvarosy byl problém s poskakováním právě tam.
• Oddělte data od skutečných návštěvníků od laboratorního měření. První se mění pomalu, druhé vám ukáže opravu hned.
• V prohlížeči otevřete vývojářské nástroje, kartu Síť, načtěte stránku a seřaďte soubory podle velikosti. Největší položky často nečekaně vedou k tomu, co na stránce ani není vidět.
• Projděte si doplňky. Co už nepoužíváte, může dál načítat svůj kód na každé stránce.
• Po každé změně vyzkoušejte i košík a objednávku, ne jen to, co jste měnili.

Co zrychlení neudělá

Část kódu patří Shoptetu a do té se nedostanete, takže dokonalé skóre vám poctivě nikdo neslíbí. A rychlost sama nepřivede zákazníky. Proto tady neuvádím, o kolik vzrostly tržby: na objednávky má vliv víc věcí najednou a jedno číslo by lhalo. Víc o práci na Shoptetu je na stránce e-shopy na Shoptetu.