Nejrychlejší český eshop má Hornbach, 3v1 a T-shock

16. 5. 2023

Article

Na začátku této případové studie bylo několik otázek. Který český e-shop je nejrychlejší? Mohou být dostatečně rychlé i velké e-shopy? A jak to změřit?

Řekli jsme si, že pokud to může někdo zjistit, jsme to asi my, tým konzultantů rychlosti PageSpeed.cz. (Dobře, pomohli nám také přátelé z Marketing Mineru, to ano.)

Ptáte se na odpovědi?

  • Nejrychlejší český e-shop má Hornbach (mezi nejnavštěvovanější stovkou) a Tři v jednom (mezi top 500).
  • Metriky některých velkých e-shopů jsou na skvělé úrovni a je to i vidět při jejich používání. Takže ano, e-shopy rychlé být mohou. I ty velké.
  • Díky veřejným datům od Googlu (Chrome UX Report) a s trochou naší zkušenosti můžeme výpočet nejrychlejšího e-shopu udělat poměrně snadno.

Už se těšíme, až vám to v článku ukážeme i s patřičnými detaily. Ale nejprve si položme ještě jednu důležitou otázku: proč vlastně rychlost u e-shopů považovat za důležitou?

Rychlost e-shopům přinese konverze a více návštěvníků

Na rychlosti webu záleží. Na rychlosti e-shopu o to víc. Rychlejší e-shop vám může zařídit:

  • Vyšší konverzní poměr, což je výsledek mnoha případových studií.
  • Více návštěvníků z Googlu, protože rychlost je jedním z posuzovaných signálů.
  • Nižší cenu za reklamu, což vychází z hodnocení rychlosti Googlem.

Hranice lidské mysli pro rozpoznání okamžité reakce uživatelského rozhraní leží na nízkých stovkách milisekund. Většina dnešních webů ji při načítání, ani reakci uživatelského rozhraní pokořit nezvládne, ale každé zlepšení se počítá a může projevit v důležitých ukazatelích.

Obrázek: Srovname.cz pomohlo zrychlení webu ke zvýšení konverzního poměru na mobilech o 25 % (zdroj).

Máme zde také několik měření od velkých hráčů, která vliv rychlosti dokládají:

  1. Za každou desetinu vteřiny zrychlení e-shopů vzrostly konverze o 8 %. (Deloitte)
  2. Každé zrychlení načtení homepage o vteřinu zvýší konverze o 2 %. (Walmart)
  3. Splňujete Web Vitals? Pravděpodobnost opuštění stránky klesá o 24 %. (Google)

Vliv rychlosti na konverze

Souvislost rychlosti webů s konverzním poměrem je fakt, který vidíme z praktických případových studií. Sbírají je například autoři webu WPOStats.

My v PageSpeed.cz však víme, že vztah rychlosti s konverzemi je pro každý web různý a navázaný na různou metriku rychlosti.

Prakticky u každého e-shopu, kde jsme měřili vztah mezi rychlostí a konverzemi, nám vyšla silná korelace.

U našich klientů z oblasti e-commerce dochází nejčastěji ke korelaci konverzí s metrikou LCP:

Obrázek: Čím nižší LCP, tím vyšší konverze? Ano, i na webu tohoto našeho klienta to platí.

Z grafu vidíme korelaci času metriky Largest Contentful Paint (LCP, oranžová) s konverzním poměrem na webu (modrá).

Je vidět, že nejvíce konverzí provedli uživatelé s LCP okolo 1,5 sekundy. Zde konverze dosahují kolem 6 %. Medián je u toho webu 2,172 sekundy, to už vidíme konverzní poměr poloviční.

U jiných e-shopů vidíme korelace s dalšími metrikami, které jsou spojené s LCP (předcházejí ji). Jsou jimi například metriky Start Render, TTFB (backend) nebo FCP.

Ve všech případech jde samozřejmě o korelaci, takže nikoliv příčinnou souvislost. Vliv rychlosti se nedá izolovat od dalších vlivů jako je marketing, produktová nabídka, slevové akce, činnost konkurence a dalších. Jsme ale přesvědčení, že rychlost má v tomto mixu svou důležitou roli.

Proč mít rychlý web? Přečtěte si další argumenty, proč je rychlost důležitá.

Proč hledat nejrychlejší e-shop

Často se setkáváme s názorem, že e-shopy rychlé být nemohou. Obsahují hodně grafiky, hodně produktů, hodně funkcí, velkou databázi, velké obrázky, hodně analytiky, měřících skriptů…

Bývá zakořeněná představa, že rychlé mohou být jen firemní prezentace a malé weby obecně. My říkáme, že to pravda není. I e-shopy lze velice pěkně připravit a optimalizovat.

Pravidla, která je třeba dodržovat pro splnění metrik Core Web Vitals, nejsou složitá. Jen je potřeba na ně upozornit členy týmu, vzdělávat je a monitoringem hlídat na dodržení těchto pravidel.

Cílem naší studie je ukázat na pozitivních příkladech, že i e-shopy mohou být rychlé. A že se to může projevit na jejich konverzním poměru.

Už dříve vznikla podobná případová studie připravená Jindřichem Fáborským, kde se měřila rychlost českých e-shopů. V Reshoperu se snaží pomáhat českým e-shopům, a tak se rozhodli zaměřit na to, jak se českým e-shopům daří po stránce rychlosti.

Nejrychlejší český eshop

Také naše studie je postavená na datech o odhadech návštěvnosti z Marketing Mineru, což je český nástroj pro SEO konzultanty. Děkujeme za spolupráci Filipovi Podstavcovi!

Jaký web je nejúspěšnější v metrikách Core Web Vitals nasbíraných u reálných uživatelů? Zaměřili jsme se na Top 100 a Top 500 nejnavštěvovanějších českých e-shopů. Zde jsou výsledky.

10 nejrychlejších e-shopů pro mobilní zařízení z Top 100 podle návštěvnosti

Pro nás jde o hlavní kategorii. Mobily tvoří výraznou většinu návštěvnosti e-shopů a zde jsem vybrali 100 nejznámějších značek.

Jméno e-shopu
Skóre PageSpeed.cz
1. hornbach.cz 0,5409
2. trhknih.cz 0,5655
3. xiaomicesko.cz 0,57765
4. sportovniautodoplnky.cz 0,5841
5. odkarla.cz 0,59865
6. hodinky-365.cz 0,61575
7. oriondomacipotreby.cz 0,6219
8. bonami.cz 0,6699
9. svet-svitidel.cz 0,6753
10. zalando.cz 0,7053

V královské kategorii, tedy mezi stovkou největších e-shopů na mobilech si na trůn nejrychlejšího webu mohou usednout autoři webu Hornbach.cz. Druhé místo má poměrně nový TrhKnih.cz a třetí XiamiCesko.cz. Gratulujeme autorům všech třech webů!

Ze známějších značek v první desítce vidíme značky jako Bonami, Zalando. Těší nás i devátá příčka našeho klienta Svet-Svitidel.cz.

10 nejrychlejších e-shopů pro desktop z Top 100 podle návštěvnosti

Na desktopu je pořadí na horních příčkách stejné:

Jméno e-shopu
Skóre PageSpeed.cz
1. hornbach.cz 0,3519
2. trhknih.cz 0,38595
3. xiaomicesko.cz 0,41435
4. odkarla.cz 0,45435
5. bonami.cz 0,46125
6. sportovniautodoplnky.cz 0,46555
7. hodinky-365.cz 0,47715
8. czc.cz 0,47765
9. sneakergallery.cz 0,51025
10. oriondomacipotreby.cz 0,51875

Gratulujeme opět tvůrcům Hornbach.cz, TrhKnih.cz a XiamiCesko.cz. Ze známějších značek se zde do první desítky probojoval například web CZC.cz.

Kompletní tabulka s pořadím pro top 100 českých e-shopů.

10 nejrychlejších e-shopů pro mobilní zařízení z Top 500 podle návštěvnosti

Abychom byli spravedlivější, vzali jsme z dat od Marketing Mineru také ještě pětistovku nejnavštěvovanějších e-shopů:

Jméno e-shopu
Skóre PageSpeed.cz
1. 3v1trivjednom.cz 0,3548
2. spoilercentrum.cz 0,41295
3. zahradnictvikrulichovi.cz 0,4717
4. nejlevnejsipneu.cz 0,486
5. prosikulky.cz 0,4887
6. motokramek.cz 0,4915
7. poshme.cz 0,5208
8. kupkolo.cz 0,52815
9. hadex.cz 0,53985
10. hornbach.cz 0,5409

Kategorii pět set největších webů na mobilech vyhrál e-shop.cz 3v1trivjednom.cz postavený na řešení od Shoptet. Druhé místo si odnáší SpoilerCentrum.cz a třetí e-shop s květinami ZahradnictviKrulichovi.cz. Gratulujeme.

Mimochodem, umístění klienta Shoptetu dokazuje, že na tomto řešení lze postavit velmi rychlý web. Z naší zkušenosti ale vyplývá, že přirozená rychlost Shoptetu je často bohužel negativně ovlivňována nešťastnou implementací vlastního designu.

Ze známějších značek v první desítce vidíme například NejlevnejsiPneu.cz a opět také Hornbach.cz.

10 nejrychlejších e-shopů pro desktop z Top 500 podle návštěvnosti

Zde jsme narazili na vůbec nejrychlejší e-shop z našich kategorií, když se díváme na „skóre PageSpeed.cz“:

Jméno e-shopu
Skóre PageSpeed.cz
1. t-shock.eu 0,17415
2. spoilercentrum.cz 0,2457
3. levnestavebniny.cz 0,3075
4. 3v1trivjednom.cz 0,32455
5. hornbach.cz 0,3519
6. nejlevnejsipneu.cz 0,3596
7. gigacomputer.cz 0,36855
8. motokramek.cz 0,36875
9. painguru.cz 0,37835
10. prosikulky.cz 0,38315

V kategorii pěti set největších webů na desktopu zvítězil e-shop.cz t-shock.eu se suveréně nejnižším „skóre PageSpeed.cz“.

Druhé místo, stejně jako na mobilech patří SpoilerCentrum.cz a na třetím se umístily LevneStavebniny.cz. Gratulujeme vývojářům i majitelům vítězných e-shopů.

Mezi prvních deset se tentoktát dostal například GigaComputer.cz a opět vidíme také NejlevnejsiPneu.cz a Hornbach.cz.

Kompletní tabulka top 500 nejrychlejších českých e-shopů.

Jak jsme měřili?

Ve spolupráci s Marketing Minerem jsme připravili seznam největších a nejnavštěvovanějších eshopů. K nim jsme od Googlu stáhli data o rychlosti u uživatelů, doplnili jsme váhy pro jednotlivé metriky a vše seřadili.

Metriky jsme hledat dlouho nemuseli. Vybrali jsme sadu Core Web Vitals (LCP, FID, CLS a novou INP).

Využili jsme data z Chrome UX Report. Je to databáze dat o kvalitě uživatelského prožitku, kterou o webech sbírá prohlížeč Chrome.

  • LCP - Largest Contentful Paint (Jak rychle se to načte?)
  • FID - First Input Delay (Reaguje to rychle?)
  • CLS - Cumulative Layout Shift (Je to vizuálně stabilní?)
  • INP - Interaction to Next Paint (nová metrika, která brzy nahradí FID)

Ve „skóre PageSpeed.cz“ mají jednotlivé metriky tuto váhu:

  • LCP: 45 %
  • FID: 15 %
  • CLS: 25 %
  • INP: 15 %

Proč jsme vybrali právě tyto váhy? Do určité míry kopírujeme váhy v rámci Lighthouse Score, jiné metriky od Googlu. Doplnili jsme navíc moderní metriku INP, která ukazuje javascriptový výkon lépe než FID.

Interaction to Next Paint (INP)

Novou metriku INP jsme doplnili záměrně. Zatím je považována za experimentální, ale Google již oznámil datum zařazení do Core Web Vitals. Přibližně v březnu 2024 dojde k nahrazení dnes již poměrně neuspokojivé metriky FID (First Input Delay).

Obrázek: INP se blíží a změní toho hodně. Už jej měříte?

Tato změna se dotkne celé řady webů, protože INP je metrika daleko přesnější a k webům přísnější. Je proto na čase začít s metrikou INP počítat.

Nejdůležitější jsou měření na mobilu, protože dle našich zkušeností je 70 - 90 % provozu na e-shopech právě z mobilů.

V našem testeru si můžete změřit rychlosti i vašeho webu.

Vítězem je Hornbach.cz

Nejrychlejším e-shopem je Hornbach.cz. Zvítězil v nejzásadnější kategorii Top 100 nejnavštěvovanějších webů na mobilu i desktopu. Také v kategorii Top 500 se vždy umístil v první desítce. Jako vítěze jsme jej vybrali proto, že jde o opravdu komplexní a velký e-shop.

Nyní si pro inspiraci ukážeme některé dobře provedené technikálie, které vedly k získání prvenství v naší studii.

  1. Web má perfektní TTFB (Time To First Byte), rychlost backendu
    Průměrná doba načtení prvního bajtu je 0,3 sekund. Doporučení od Google je do 0,8 sekund, ale u řady českých e-shopů je tato hodnota i nad jednu sekundu. Tento náskok se potom promítá i do dalších metrik.
  2. Správně použité líné načtení
    Hornbach.cz využívá nativní lazyload na obrázky, který je aktuálně široce podporován všemi hlavními prohlížeči. Je vhodné na všechny obrázky na stránce aplikovat parametr loading=”lazy”, kromě obrázku, který tvoří LCP prvek. Obrázek spadající do LCP naopak tento parametr mít nesmí, aby se načetl co nejdříve.
  3. Správně strukturované a servírované CSS styly
    Na webu jsou perfektně připravené skupiny CSS, rozdělené podle stránek i podle komponent (hlavička, patička, proměnné atd.). Díky tomu se nestahují styly, které jsou zbytečné a na aktuální stránce nejsou potřeba. CSS soubory patří mezi blokující zdroje a je potřeba tyto soubory mít co nejmenší. Styly pro patičku jsou navíc chytře odloženy na později a začnou se stahovat až po začátku stahování LCP obrázku na stránce.
  4. Dobrá práce s obrázky
    Obrázky jsou dobře optimalizované co do datové i fyzické velikosti. Je využíváno < picture > elementů se správnými srcsety a sizes. Pro největší obrázky bannerů na Úvodní stránce je využit formát WebP, který je dnes široce podporován a doporučujeme jej využívat pro všechny obrázky na webu. SVG jsou také správně minimalizované.
  5. Správné nastavení textové komprese
    I sebelepší optimalizovaný kód je obrovský, pokud není zapnuta a správně nastavena textová komprese na serveru. U komprese je zvláště důležité zvolit a zapnout správnou úroveň. Na webu Hornbach.cz se využívá spolehlivá komprese Gzip na HTML (level 5), CSS (7), JS (8) i na SVG (9) soubory. Úrovně komprese je správně zvolena s ohledem na výkon serveru.

Kde ještě u webu Hornbachu naopak vidíme příležitosti k vylepšení? Nějaká se vždy najdou:

  1. Ještě více upřednostnit stažení LCP prvku pomocí priority hints nebo preloadu.
  2. Důsledněji využít obrázky WebP a AVIF.
  3. Plně využít lazyload obrázků, občas někde chybí.
  4. Zbytečně komplikované servírování variant obrázků (srcset a sizes).

Co říci závěrem? Nevíme, jak vy, ale my z výsledků studie máme radost.

Vítězi, autorům Hornbach.cz, gratulujeme!

Zvláštní ocenění zasíláme také autorům 3v1trivjednom.cz a t-shock.eu, které jsou nejrychlejší mezi top 500 weby na mobilu a na desktopu.

Ukázalo se, že i velké e-shopy, stejně jako e-shopy stavěné na řešeních typu Shoptet, mohou být technicky brilantně udělané. Mohou být rychlé a přinášet provozovatelům konverze a spokojené uživatele.

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

Radek Šír

Radek ŠírKonzultant rychlosti a seniorní vývojář v SUPERKODERS s letitým zkušenostmi ze všech koutů frontendu.

Jak je rychlý váš web?

Jak rychlý je váš web v porovnání s vaší konkurencí? To zjistíte
pomocí našeho online testeru.

Test rychlosti mého webu

Další související články k tématu

Klíčová dovednost vývojáře: testování Web Vitals v prohlížeči

Klíčová dovednost vývojáře: testování Web Vitals v prohlížeči

Core Web Vitals jsou metriky, které používáme k hodnocení výkonu webových stránek v oblastech jako jsou rychlost načítání, interaktivita a stabilita layoutu. Tyto metriky jsou stále více důležité pro zajištění dobré uživatelské zkušenosti a Google je používá jako jedno z hledisek pro umístění ve výsledcích vyhledávání.Číst dále

Co se nám povedlo: úspěšné optimalizace rychlosti a noví klienti v roce 2022

Co se nám povedlo: úspěšné optimalizace rychlosti a noví klienti v roce 2022

Rok 2022 byl pro PageSpeed.cz ostrým startem. Více než dříve jsme poskytovali poradenské služby zaměřené na optimalizaci rychlosti webu a rozvíjeli vlastní tester rychlosti. Začali jsme také pracovat ve čtyřčlenném týmu – kromě mě, Michala a Zuzky ještě s Radkem.Číst dále

Tester rychlosti PageSpeed.cz: novinky ve verzi 3.1

Tester rychlosti PageSpeed.cz: novinky ve verzi 3.1

Vývoj našeho testeru rychlosti webů poskočil zase o kousek vpřed a  tak vám teď velmi rádi představujeme novinky ve verzi 3.1.Číst dále