S Martinem Michálkem o rychlosti e-shopů na Shoptetu

Jaký vliv má výběr šablon a doplňků na rychlost webu? Jaký je optimální poměr mezi atraktivním vzhledem a výkonem e-shopu? A jak poznat kvalitního dodavatele úprav?

V našem interview Martin detailně popisuje nejčastější chyby, upozorňuje na důležitost kvalitní implementace designových změn a přibližuje příklad úspěšné optimalizace e-shopu Denatura.cz.

Dozvíte se také, jak monitoring rychlosti může zásadně ovlivnit výkon vašeho e-shopu a proč je komunikace při výběru partnerů důležitější než technické detaily.

Pokud jde o Shoptet, ten je sám o sobě z pohledu rychlosti připravený velmi kvalitně. Šablony jako takové obvykle větší problémy nezpůsobují. Kde ale v PageSpeed.cz často vidíme problém, je implementace razantnějších změn designu. 

Prvním problémem je, že klienti a designéři si často neuvědomují, že na klasickém Shoptetu budou kodéři muset přepisovat původní vzhled šablony velkým množstvím JavaScriptu, což je samo o sobě komplikace pro výkon e-shopu. Myslím, že už zde by se měli provozovatelé e-shopů pozastavit a bavit se o tom, jakou vybrat původní šablonu a jak moc upravovat její vzhled.

Další problém je v samotné implementaci těchto změn. Kvalita kodérů na Shoptetu je velmi různorodá, od kvalitních lidí až po ty, kteří zamrzli v roce 2010 a páchají na šablonách opravdová zvěrstva. 

Zde je určitě nutné posuzovat jejich kvalitu podle na doporučení od známých, nejen na počet hvězdiček v Shoptetí nabídce partnerů. My máme lepší zkušenost vždy s většími dodavateli jako je Mime Digital, Able nebo dkLab. 

A co doplňky?

Ani ty obvykle rychlost automaticky nezhorší. Dával bych si jen pozor na metriku INP, tedy rychlost odezvy na interakce. Tam vídáme zhoršení kvůli různým javascriptovým doplňkům. Běžné GTM ani Google Analytics nemají negativní vliv, ale je potřeba mít se na pozoru u personalizačních, reklamních, A/B testovacích doplňků nebo u těch, které třeba přidávají našeptávání adres do nákupního procesu.

Je ale třeba říct, že v PageSpeed.cz spolupracujeme s řadou e-shopů využívajících Shoptet a i přes omezení platformy, jsme si zatím skoro se vším poradili. Zelené Core Web Vitals umíme i na Shoptetu.

Pokud můžu doporučit jednu zásadní věc, kterou by všichni e-shopaři ohledně rychlosti udělat měli, je to monitoring rychlosti webu. K tomu více řeknu později.

Optimalizovali jsme rychlost pro zhruba 10-15 webů na Shoptetu. Právě nyní připravujeme případovou studii pro web Denatura.cz.

Na Denatuře jsme nejprve optimalizovali metriky stability layoutu (CLS) a rychlosti načtení (LCP), obojí velmi úspěšně. 

V době, kdy Google přišel s novou metrikou INP pro měření rychlosti interakcí, jsme se pustili do její optimalizace. Měli jsme částečné úspěchy s optimalizací JavaScriptu přímo na webu Denatury, ale časem jsme došli k tomu, že se musíme spojit přímo se Shoptetem.

Naše spolupráce s vývojáři Shoptetu pak přinesla zlepšení INP všem e-shopům, zařazení většiny z nich do zelené škály hodnocení Core Web Vitals a pravděpodobně také lepší pozice v rámci SEO.

Doufám, že v této spolupráci budeme pokračovat, protože dopad optimalizace rychlosti na 40 tisících e-shopů je obrovský a misí PageSpeed.cz je zrychlilt weby úplně všem. U Denatury zatím nemáme čísla, ale myslím, že optimalizace rychlosti přispěla k jejich velkému meziročnímu růstu. Myslím, že všechny tři strany mohou být spokojené.

Jak už jsem psal výše. Vybíral bych větší studia vyhýbal se levným freelance kodérům. Možná vás to překvapí, ale není nutné se soustředit na technické znalosti daného člověka nebo firmy.

Základ je komunikace. Velmi často se nám stává, že optimalizace neběží tak, jak bychom chtěli, právě kvůli nedostatečné komunikace vývojářů.

Vybírejte si lidi, kteří komunikují, jsou vstřícní a proaktivní. Tohle poznáte už v rané fázi vývoje.

Jako provozovatel e-shopu na Shoptetu byste vždy měli usilovat o zelené hodnoty metrik Core Web Vitals na úrovni celé domény. Zelená je známka, že je všechno alespoň základně v pořádku.

Další cíl je pak vidět v Google Search Console zelené hodnoty u všech skupin URL.  Tyto dva zdroje je potřeba zkombinovat.

Na následujícím obrázku je pak vidět, jaké hodnoty jsou pro jednotlivé metriky považovány za optimální.

Jaké hodnoty mívají weby na Shoptetu? V našem monitoringu sledujeme některé z nich a vypadá to následovně:

Co může majitel e-shopu udělat sám pro zlepšení rychlosti, i bez technických znalostí? Jaké jsou první kroky k optimalizaci?

Je toho překvapivě hodně, většinou na úrovni „soft“ znalostí.

Odpověď budu rovnou formou checklistu:

1. Měřte rychlost webu. Jednorázové testy pomocí PageSpeed Insights nejsou tak dobré, proto jsme přišli s monitoringem PLUS, který sleduje hodnoty metrik od Googlu, ale také každý den pouští syntetické testy vašich důležitých stránek. Platí, že i menší změna jako přidání doplňku může rozbít rychlost, proto je monitoring klíčový. Monitoring také slouží pro kontrolu kodérů a jiných dodavatelů.
2. Vyberte si dobrého dodavatele úprav webu. Hledejte ověřené, dobře komunikující partnery s kvalitními referencemi. Viz předchozí odpovědi. Ale i tak kontrolujte jeho práci pomocí monitoringu.
3. Zvažte každé nasazení nové javascriptové komponenty. Opět viz výše. Není špatné na web nasazovat cokoliv nového, ale ujistěte se, že měříte a tedy se dozvíte, když vám nová komponenta rozbije některou z metrik rychlosti.
4. Buďte v kontaktu s podporou Shoptetu. Poproste je o zprovoznění ukládání obrázků do formátu WebP, který je výrazně datově efektivnější.

Pokud se rychlost nelepší, najměte si profíky.

V PageSpeed.cz umíme dodat výsledky už za několik jednotek hodin poradenství.