S Martinom Michálkom o rýchlosti e-shopov na Shoptete

Aký vplyv má výber šablón a doplnkov na rýchlosť webu? Aký je optimálny pomer medzi atraktívnym vzhľadom a výkonom e-shopu? A ako spoznať kvalitného dodávateľa úprav?

V našom interview Martin detailne popisuje najčastejšie chyby, upozorňuje na dôležitosť kvalitnej implementácie dizajnových zmien a približuje príklad úspešnej optimalizácie e-shopuDenatura.cz.

Dozviete sa tiež, ako monitoring rýchlosti môže zásadne ovplyvniť výkon vášho e-shopu a prečo je komunikácia pri výbere partnerov dôležitejšia než technické detaily.

Pokiaľ ide o Shoptet, ten je sám o sebe z pohľadu rýchlosti pripravený veľmi kvalitne. Šablóny ako také zvyčajne väčšie problémy nespôsobujú. Kde ale v PageSpeed.cz často vidíme problém, je implementácia radikálnejších zmien dizajnu. 

Prvým problémom je, že klienti a dizajnéri si často neuvedomujú, že na klasickom Shoptete budú kóderi musieť prepisovať pôvodný vzhľad šablóny veľkým množstvom JavaScriptu, čo je samo o sebe komplikácia pre výkon e-shopu. Myslím, že už tu by sa mali prevádzkovatelia e-shopov zastaviť a baviť sa o tom, akú vybrať pôvodnú šablónu a ako veľmi upravovať jej vzhľad.

Ďalší problém je v samotnej implementácii týchto zmien. Kvalita kóderov na Shoptete je veľmi rôznorodá, od kvalitných ľudí až po tých, ktorí zamrzli v roku 2010 a páchajú na šablónach skutočné zverstvá. 

Tu je určite nutné posudzovať ich kvalitu podľa odporúčaní od známych, nielen podľa počtu hviezd v Shoptetovej ponuke partnerov. My máme lepšiu skúsenosť vždy s väčšími dodávateľmi ako je Mime Digital, Able alebo dkLab. 

A čo doplnky?

Ani tie zvyčajne rýchlosť automaticky nezhoršujú. Dával by som si len pozor na metriku INP, teda rýchlosť odozvy na interakcie. Tu vidíme zhoršenia kvôli rôznym javascriptovým doplnkom. Bežné GTM ani Google Analytics nemajú negatívny vplyv, ale je potrebné byť na pozore u personalizačných, reklamných, A/B testovacích doplnkov alebo u tých, ktoré napríklad pridávajú našepkávanie adres do nákupného procesu.

Je ale potrebné povedať, že v PageSpeed.cz spolupracujeme s množstvom e-shopov využívajúcich Shoptet a aj napriek obmedzeniam platformy, sme si zatiaľ skoro so všetkým poradili. Zelené Core Web Vitals vieme aj na Shoptete.

Ak môžem odporučiť jednu zásadnú vec, ktorú by všetci e-shopári ohľadom rýchlosti mali urobiť, je to monitoring rýchlosti webu. K tomu poviem viac neskôr.

Optimalizovali sme rýchlosť pre približne 10-15 webov na Shoptete. Práve teraz pripravujeme prípadovú štúdiu pre web Denatura.cz.

Na Denature sme najprv optimalizovali metriky stability layoutu (CLS) a rýchlosti načítania (LCP), oboje veľmi úspešne. 

V čase, keď Google prišiel s novou metrikou INP pre meranie rýchlosti interakcií, sme sa pustili do jej optimalizácie. Mali sme čiastočné úspechy s optimalizáciou JavaScriptu priamo na webe Denatury, ale časom sme dospeli k tomu, že sa musíme spojiť priamo so Shoptetom.

Naša spolupráca s vývojármi Shoptetu potom priniesla zlepšenie INP všetkým e-shopom, zaradenie väčšiny z nich do zelenej škály hodnotenia Core Web Vitals a pravdepodobne tiež lepšie pozície v rámci SEO.

Dúfam, že v tejto spolupráci budeme pokračovať, pretože dopad optimalizácie rýchlosti na 40 tisícoch e-shopov je obrovský a misiou PageSpeed.cz je zrýchliť weby úplne všetkým. U Denatury zatiaľ nemáme čísla, ale myslím, že optimalizácia rýchlosti prispela k ich veľkému medziročnému rastu. Myslím, že všetky tri strany môžu byť spokojné.

Ako už som písal vyššie. Vybieral by som väčšie štúdiá a vyhýbal sa lacným freelance kóderom. Možno vás to prekvapí, ale nie je nutné sa sústrediť na technické znalosti daného človeka alebo firmy.

Základ je komunikácia. Veľmi často sa nám stáva, že optimalizácia nebeží tak, ako by sme chceli, práve kvôli nedostatočnej komunikácii vývojárov.

Vyberajte si ľudí, ktorí komunikujú, sú ústretoví a proaktívni. Toto spoznáte už v ranej fáze vývoja.

Ako prevádzkovateľ e-shopu na Shoptete by ste vždy mali usilovať o zelené hodnoty metrik Core Web Vitals na úrovni celej domény. Zelená je známka, že je všetko aspoň základne v poriadku.

Ďalší cieľ je potom vidieť v Google Search Console zelené hodnoty u všetkých skupín URL.  Tieto dva zdroje je potrebné skombinovať.

Na následujúcom obrázku je potom vidieť, aké hodnoty sú pre jednotlivé metriky považované za optimálne.

Aké hodnoty mávajú weby na Shoptete? V našom monitoringu sledujeme niektoré z nich a vyzerá to nasledujúco:

Čo môže majiteľ e-shopu urobiť sám pre zlepšenie rýchlosti, aj bez technických znalostí? Aké sú prvé kroky k optimalizácii?

Je toho prekvapivo veľa, väčšinou na úrovni „soft“ znalostí.

Odpoveď budem hneď formou checklistu:

1. Merajte rýchlosť webu. Jednorazové testy pomocou PageSpeed Insights nie sú tak dobré, preto sme prišli s monitoringom PLUS, ktorý sleduje hodnoty metrik od Googlu, ale tiež každý deň spúšťa syntetické testy vašich dôležitých stránok. Platí, že aj menšia zmena ako pridanie doplnku môže rozbiť rýchlosť, preto je monitoring kľúčový. Monitoring tiež slúži pre kontrolu kóderov a iných dodávateľov.
2. Vyberte si dobrého dodávateľa úprav webu. Hľadajte overených, dobre komunikujúcich partnerov s kvalitnými referenciami. Viz predchádzajúce odpovede. Ale aj tak kontrolujte jeho prácu pomocou monitoringu.
3. Zvažte každé nasadenie novej javascriptovej komponenty. Opäť viď vyššie. Nie je zlé na web nasadzovať čokoľvek nové, ale uistite sa, že meriate a teda zistíte, keď vám nová komponenta rozbije niektorú z metrik rýchlosti.
4. Buďte v kontakte s podporou Shoptetu. Požiadajte ich o zprovoznění ukladania obrázkov do formátu WebP, ktorý je výrazne dátovo efektívnejší.

Ak sa rýchlosť nezlepšuje, najmite si profíkov.

V PageSpeed.cz vieme dodať výsledky už za niekoľko jednotiek hodín poradenstva.