Nejrychlejší e-shop roku 2024: časté chyby, co funguje a čím se vyznačuje vítěz?

V minulém blogpostu jsme vyhlásili nejrychlejší e-shop roku 2024. Je jím iWant.cz, jehož autorům srdečně gratulujeme, stejně jako autorům webů Hornbach.cz a Altisport.cz, kteří skončili na stupních vítězů.

Co ale data říkají a co si z nich můžete odnést, kromě porovnání s největšími (a nejrychlejšími) českými e-shopy. V tomto textu se zaměříme na časté chyby, kterých se e-shopy stále dokola dopouštění, doporučení k optimalizaci, která fungují vždy a nakonec si ještě posvítáme na vítěze ankety.

Časté chyby e-shopů, když dojde na rychlost

Když se podíváme na méně úspěšné e-shopy v našem seznamu, nacházíme tam velmi podobné chyby jako ty, s nimiž se setkáváme u velké řady našich klientů na začátku spolupráce k rychlosti webu.

1. Špatně implementovaný lazy loading na obrázcích. Líné načtení buď není přítomné vůbec nebo je mylně aplikované na vše, včetně hlavního elementu pro metriku LCP. Obecně je práce s prioritami načtení často ze strany vývojářů špatná.
2. Nedrží se rozměry obrázků, což zhoršuje metriku CLS. Přitom stačí málo, a to sice přidávat k prvkům <img> poctivě atributy width a height.
3. Nedělají se základní optimalizace typu ošetření datového objemu obrázků, webfontů, souborů CSS nebo JS.
4. Zapomíná se, že odezva serveru je základ všeho. Weby na chvostu žebříčku mají metriku TTFB v průměru násobně horší než ty nejrychlejší. Např. bauhaus.cz vykazuje hodnotu 75. percentilu odezvy serveru na mobilu 1,84 s, kdežto konkurent Hornbach.cz zvládá odezvu serveru třikrát rychleji – za 0,58 s.
5. Špatně optimalizovaná analytika a přehršel skriptů třetích stran. S příchodem metriky INP dokážeme naměřit prodlevy interakcí způsobené analytikou. Všechny nejrychlejší e-shopy dokáží INP na mobilu udržet pod doporučenou hodnotu 0,2 s, ale např. web Bibloo.cz má 75. percentil této metriky na pětinásobku, tzn. přes jednu vteřinu.

V rámci našich popularizačních aktivit k rychlosti webu vždy říkáme, že optimalizace rychlosti není checklist ke splnění ani „tak trochu magie“ (jako třeba SEO). Optimalizace rychlosti je exaktní disciplína, kdy hledáme problém a jeho pokud možno co nejefektivnější řešení.

Procházení nejrychlejších e-shopů, ale také naše vlastní zkušenosti z PageSpeed.cz však ukazují, že zde jsou jistoty, na které vždy můžete vsadit a budou vám velmi dobře fungovat.

Co vám při optimalizaci rychlosti e-shopu skoro vždy zabere?

1. Metrika LCP: Obrázky ve formátu WebP dejte všude, jsou skoro vždy datově úspornější než JPG a nahrazují i PNG. Odvážnější mohou sáhnout po formátu AVIF.
2. Metrika LCP: loading=lazy, tedy líné načtení obrázků, přidejte na všechny <img> mimo první obrazovku.
3. Metrika LCP: pomocí <link preload> přednačtěte webfonty, které se používají v prvním viewportu uživatele.
4. Metrika CLS: Vždy přidávejte atributy width a height na všechny obsahové obrázky, tedy prvky <img>.
5. Metrika CLS: nasaďte deskriptor size-adjust u typografie, abyste srovnali velikost systémového písma s webfontem.
6. Metrika INP: reagujte v rozhraní hned, dejte uživateli okamžitou zpětnou vazbu.
7. Zvažte optimalizaci pro rychlé typy navigace jako jsou Speculation Rules, back/forward cache.
8. Rychlost se vždy v čase zhoršuje. Proto je monitoring rychlosti úplným základem.

Rozborka vítěze iWant.cz

Co všechno je na iWant.cz řešeno inspirativně z pohledu optimalizace rychlosti webu?

Optimalizace rychlosti webu

Vezměme několik tipů:

1. Servery zde fičí o sto šest. Hodnota metriky TTFB na mobilu je pro celou doménu iWant.cz 0,37 s, což je famózní výsledek na polovině hodnoty doporučení od Googlu. Rychlejší je už jen Zalando.com (0,24 s), což je hodnota, u které nám u takto velkého mezinárodního projektu opravdu padá brada.
2. Dobrá práce s prioritami načtení. Vidíme zde vyladěné líné načtení pro méně důležité obrázky (loading=lazy) a naopak popohnání důležitých prvků pomocí <link preload>.
3. Vyladěné obrázky ve formátu WebP. Vzhledem k typu webu a prezentovaných produktů už není příliš možné zmenšit datový objem, např. snížením kvality. Menší prostor pro optimalizace zde poskytuje už jen přechod na formát AVIF.
4. Velmi úsporná práce s CSS a JavaScriptem. Vlastní styly mají na důležité typové stránce detail produktu jen kolem 15 kB (!), soubory s JavaScript něco přes 100 kB. To je v dnešní době stahování megabajtových souborů, které uživatel v danou chvíli nepotřebuje, hotový úkaz.

Je naší velkou radostí, že jsme měli tu čest pomáhat týmu Smarty.cz s optimalizacemi rychlosti. Je ale potřeba říct, že z naší strany v poslední době docházelo jen k drobným korekcím. Webový tým je zde už velmi vzdělaný a dokáže rychlost dále zlepšovat samostatně.

Tolik k letošní studii k nejrychlejším českým e-shopů. Těšíme se na výsledky dalších ročníků a přejeme vám jako webařům i uživatelům rychlé weby!

---

Potřebujete pomoc s rychlostí vašeho e-shopu nebo monitoringem? Ozvěte se.