Nejrychlejší český eshop má Hornbach, 3v1 a T-shock
16. 5. 2023
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í:
Za každou desetinu vteřiny zrychlení e-shopů vzrostly konverze o 8 %. (Deloitte)
Každé zrychlení načtení homepage o vteřinu zvýší konverze o 2 %. (Walmart)
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.
Č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.
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
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“:
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.
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?)
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.
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.
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.
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.
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é.
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:
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 Ší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.
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
Můžeme pracovat s cookies, abychom měli přehled jak web používáte?
Předvolby
Můžeme pracovat s cookies, abychom měli přehled jak web používáte?
Nezbytné, aby stránky fungovaly
Nezbytné soubory cookie pomáhají učinit web použitelným povolením základních funkcí, jako je navigace na stránce a přístup do zabezpečených oblastí webu. Bez těchto cookies nemůže web správně fungovat.
Personalizační, abyste si mohli ukládat vaše nastavení
Předvolené soubory cookie umožňují webové stránce zapamatovat si informace, které mění způsob, jakým se web chová nebo vypadá, například preferovaný jazyk nebo oblast, ve které se nacházíte.
Analytika, abychom mohli stránky zlepšovat
Analytické cookies pomáhají majitelům webových stránek porozumět tomu, jak návštěvníci interagují s webovými stránkami, a to anonymním shromažďováním a hlášením informací.
Marketing, abyste se nás mohli zeptat pomocí chatu
Marketingové cookies se používají ke sledování návštěvníků napříč webovými stránkami. Záměrem je zobrazovat reklamy, které jsou pro jednotlivého uživatele relevantní a poutavé, a tím cennější pro vydavatele a inzerenty třetích stran.