Rychlost stránky je faktor konverze, který většina e-shopů přehlíží, protože to není problém designu, marketingu ani produktu. Je to problém infrastruktury. Dopad je ale stejně zřetelný jako u jiných problémů s konverzí. Každé půlsekundové zpoždění při načítání stránky měřitelně snižuje konverzní poměr, zvlášť na mobilech, kde jsou lidé netrpěliví a často mají pomalejší připojení.
Jak rychlost stránky ovlivňuje konverze v e-shopu?
Vztah mezi rychlostí stránky a konverzí je dobře doložený ve výzkumech Googlu, velkých online prodejců i několika nezávislých studií. Jednosekundové zpoždění načítání vede k sedmiprocentnímu poklesu konverzí. Pětisekundové zpoždění může snížit konverzi o 40 procent i víc. Na mobilech klesá konverzní poměr se zpožděním ještě strměji, protože mobilní návštěvníci mají pomalejší připojení a méně trpělivosti.
Efekt se násobí napříč celým e-shopem. Každá pomalá stránka je příležitostí, aby se návštěvník naštval a odešel. Úvodní stránka, stránky produktů, pokladna. Návštěvník, který čeká sedm sekund na načtení stránky produktu, je podrážděný ještě dřív, než vůbec uvidí obrázek produktu. Mnozí zavřou kartu a stejný produkt hledají jinde.
Rychlost stránky ovlivňuje i pozice ve vyhledávačích. Google bere rychlost stránky jako faktor hodnocení pro vyhledávání na počítači i na mobilu. Pomalejší e-shop se na stejné klíčové slovo umístí pod rychlejšími konkurenty, takže má už na začátku méně návštěv. Ztráta konverzí kvůli pomalým stránkám se tak násobí u přímých návštěv i u organického vyhledávání.
Co způsobuje pomalé načítání online obchodů?
Většina pomalých e-shopů není pomalá záměrně. Zpomalují se postupně, jak přibývají obrázky a doplňky nebo jak není optimalizovaná serverová infrastruktura. Když pochopíte příčiny, snáz určíte, co opravit jako první. Víc o tom, jak každý prvek obchodu ovlivňuje zážitek návštěvníka, najdete v článcích jak navrhnout pokladnu, která omezí odchody a jak přizpůsobit online obchod mobilům. Hlavních viníků je pět.
Příliš velké obrázky
Obrázky bývají nejtěžší soubory na stránce produktu. Fotka produktu o třech megabajtech místo tří set kilobajtů prodlouží načítání o sekundy. Mnoho obchodů nahrává obrázky v plném rozlišení a nezmenšuje jejich velikost pro web. Obrázek vypadá dobře, ale načítá se dvakrát déle, než je nutné. Nejvíc trpí mobilní uživatelé, protože mají pomalejší připojení a menší displeje, takže obrázky ve vysokém rozlišení jsou zbytečné.
Neoptimalizovaný kód a skripty
Jak obchod přidává funkce, recenze, chatovací widgety, analytické nástroje a marketingové pixely, každý z nich načítá další skript. Skripty při načítání blokují vykreslení stránky. E-shop s 15 skripty třetích stran může strávit sekundy jen jejich načítáním, než se stránka objeví. Některé skripty jsou nezbytné. Mnohé ne, nebo by se mohly načíst až poté, co je stránka pro návštěvníka viditelná.
Pomalý hosting nebo doručování obsahu
Někteří poskytovatelé hostingu jsou rychlejší než jiní. E-shop na zastaralé infrastruktuře, která neukládá statické soubory do mezipaměti nebo doručuje obsah ze vzdálených serverů, odpovídá na požadavky pomaleji než e-shop na moderní, geograficky rozmístěné infrastruktuře. Návštěvníci z různých zemí zažívají různou rychlost podle toho, jak daleko od nich server stojí.
Neoptimalizované odpovědi serveru
Doba, za kterou server odpoví na požadavek na stránku, závisí na tom, jak efektivně požadavky zpracovává a sestavuje stránky. Databáze bez správných indexů, stránky provádějící při každém načtení složité dotazy nebo serverový kód neladěný na výkon mohou přidat celou sekundu i víc, než se začne vykreslovat jakýkoli obsah. Je to méně vidět než optimalizace obrázků, ale často to přinese velký zisk.
Zdroje blokující vykreslení
Soubory CSS a JavaScript, které blokují vykreslení stránky, mohou prodloužit dobu, než se stránka návštěvníkovi zobrazí, o sekundy. Pokud váš e-shop načítá soubory CSS nebo JavaScript, které se musí zpracovat dřív, než se na stránce cokoli zobrazí, vidí návštěvník prázdnou obrazovku, dokud se nedokončí jejich načítání. Když přeorganizujete, které zdroje vykreslení blokují a které se mohou načítat na pozadí, výrazně se zlepší vnímaná rychlost, i když celková doba načítání zůstane stejná.
Jak změřit rychlost stránek e-shopu?
Co neměříte, to nezlepšíte. Začněte tím, že zjistíte, jak rychle se váš e-shop načítá teď.
Google PageSpeed Insights
Nástroj Google PageSpeed Insights vám dá skóre rychlosti pro libovolnou adresu URL a vypíše konkrétní problémy, které najde. Nástroj je zdarma a nevyžaduje žádné nastavení. Otevřete pagespeed.web.dev, zadejte svou adresu URL a získáte skóre pro mobil i počítač s konkrétními doporučeními. Doporučení jsou seřazená podle odhadovaného dopadu. Začněte těmi s nejvyšším dopadem.
Nástroj pro podrobné testy rychlosti
Specializované testovací nástroje nabízejí podrobnější vodopádové grafy, které přesně ukazují, které zdroje se načítají nejdéle a kde vznikají zpoždění. Umožňují testovat z různých geografických míst a na různých typech zařízení a rychlostech sítě. To se hodí ke zjištění, zda je pomalost globální, nebo jen v některých regionech, případně jen na mobilu oproti počítači.
Vaše analytika
Váš analytický nástroj by vám měl ukázat dobu načtení napříč stránkami a zdroji návštěvnosti. V analytice WEMASY se to zobrazuje jako metrika sledující výkon stránek. Porovnejte doby načtení u svých klíčových stránek. Pokud se stránky produktů načítají výrazně pomaleji než úvodní stránka, je to konkrétní problém k prozkoumání. Pokud jsou mobilní stránky pomalejší než ty na počítači, ukazuje to na problém s obrázky nebo vykreslováním. Kompletního průvodce chováním návštěvníků v analytice najdete v článku jak pomocí analytiky pochopit, jak se návštěvníci chovají ve vašem e-shopu.
Zkoušejte na skutečných zařízeních
Nespoléhejte jen na nástroje. Otevřete svůj e-shop na skutečném chytrém telefonu s běžným připojením 4G a podívejte se, jak dlouho se stránky načítají. Uvidíte, jak e-shop působí na skutečného zákazníka. Nástroje měří konkrétní metriky, ale vnímání uživatele je důležitější. E-shop, který působí okamžitě, je rychlejší než ten, který technicky sbírá body, ale frustruje uživatele zpožděním, které jsou schopni cítit.
Co přinese zrychlení stránek nejrychleji?
Některá zlepšení zaberou hodiny práce. Jiná zaberou minuty a výsledky vidíte okamžitě.
Optimalizujte obrázky
Optimalizace obrázků je obvykle zlepšení s nejvyšším dopadem a nejnižší pracností. Použijte nástroj na kompresi obrázků, který zmenší velikost souboru bez znatelného zhoršení kvality. Fotku produktu o 3 MB často jde zmenšit na 300 KB bez viditelného rozdílu. Obrázky komprimujte před nahráním, ne po něm. Použijte správný formát: JPEG pro fotografie, PNG pro obrázky s průhledností, WebP pro maximální kompresi v moderních prohlížečích. Různým zařízením posílejte různé velikosti obrázků. Mobilní telefon nepotřebuje obrázek o 4000x4000 pixelech. Víc o obrázcích produktů, které fungují dobře i technicky, najdete v článku jak navrhnout stránky produktů, které lidi přimějí nakoupit.
Odstraňte nepoužívané doplňky a skripty
Projděte všechny skripty třetích stran, které běží na vašem e-shopu. Analytika, chat, recenze, marketingové pixely, widgety. Vypněte všechny, které nepřispívají k vašemu podnikání. Každý skript přidává váhu a zpomaluje stránku. Pokud ho aktivně nepoužíváte, odstraňte ho. Pokud potřebujete víc nástrojů, zvažte jejich sloučení. Místo pěti různých služeb pro různé účely se jedna platforma, která spojuje víc funkcí, načte rychleji než pět samostatných.
Zapněte mezipaměť
Mezipaměť ukládá statické soubory v prohlížeči návštěvníka nebo na mezilehlých serverech, takže se nemusejí stahovat znovu při každé návštěvě. Mezipaměť v prohlížeči ušetří vracejícím se návštěvníkům spoustu času načítání. Mezipaměť na straně serveru ukládá vykreslené verze vašich stránek, takže server nemusí stránku při každém požadavku sestavovat od nuly. Většina moderních hostingových platforem podporuje obojí. Zkontrolujte dokumentaci svého poskytovatele hostingu nebo ho požádejte o zapnutí mezipaměti, pokud ještě není zapnutá.
Zmenšete CSS a JavaScript
Minifikace odstraní z kódových souborů zbytečné znaky, aniž by se změnilo, jak fungují. Správně minifikovaný soubor CSS nebo JavaScript je o 20 až 30 procent menší než originál. Pokud máte přístup ke kódu svého e-shopu, minifikace je jednoduchá. Pokud ne, zeptejte se poskytovatele hostingu nebo vývojáře, zda už je minifikace zapnutá. Na každé moderní hostingové platformě by měla být zapnutá ve výchozím nastavení.
Odložte nekritický JavaScript
JavaScript, který není potřeba hned při načtení stránky, může počkat. Chatovací widgety, analytika, marketingové pixely. Ty se nemusejí načíst dřív, než se stránka zobrazí návštěvníkovi. Když je odložíte až po zobrazení hlavní stránky, výrazně se zlepší vnímaná rychlost. Stránka působí rychle, i když celková doba načítání zůstane stejná, protože návštěvník vidí obsah hned a nezírá na prázdnou obrazovku, zatímco se načítají skripty.
Jak dlouho trvá, než uvidíte výsledky zrychlení?
Změny rychlosti stránek přinášejí okamžité výsledky. Návštěvník, který přijde do vašeho e-shopu zítra ráno, už zažije rychlejší stránku. Zlepšení konverze po změnách rychlosti se projeví během několika dnů, pokud máte dost návštěvnosti, aby šlo něco měřit, protože změna ovlivní všechny návštěvníky najednou.
Na rozdíl od A/B testování nemusíte zrychlení provádět jako test. Pokud PageSpeed Insights najde problém a vy ho opravíte, váš e-shop je rychlejší. Rychlejší stránka nemá žádnou nevýhodu. Každý návštěvník z ní má prospěch hned.
Jediná výhrada je, že rychlost je jen jedním z mnoha faktorů, které ovlivňují konverzi. Pokud má váš e-shop rozbitou pokladnu, nepřehlednou stránku produktu nebo zásadní problémy s důvěrou, samotná optimalizace rychlosti konverzní poměr dramaticky nepohne. Zrychlení funguje nejlépe jako součást širší strategie optimalizace konverzí. Souhrnný přehled všech faktorů, které ovlivňují konverzní poměr, najdete v článku co je optimalizace konverzního poměru a proč na ní záleží.
Záleží na rychlosti stránek na mobilu jinak než na počítači?
Na mobilu záleží na rychlosti stránek víc než na počítači. Mobilní návštěvníci mají pomalejší připojení, často spěchají a jsou ochotni okamžitě odejít, pokud se stránka nenačte rychle. Rozdíl v dopadu na konverze je výrazný. E-shop, který na počítači konvertuje na pěti procentech, může na mobilu konvertovat na dvou procentech a rychlost je velkou částí tohoto rozdílu.
Mobilní návštěvníci jsou také citlivější na velké soubory obrázků. Třímegabajtový obrázek produktu, který se na počítači s dobrým připojením načte za tři sekundy, se může na telefonu s 4G načítat deset sekund. Vyzkoušejte svůj e-shop na skutečném mobilním zařízení, abyste získali reálnou představu, jak působí.
Na jeden konkrétní problém mobilů si dejte pozor: obrázky optimalizované pro zobrazení na počítači bývají pro mobilní displeje příliš velké. Responzivní obrázky, které se přizpůsobí velikosti každého displeje, místo vnucování obrázku velikosti pro počítač mobilnímu displeji, zmenšují velikost souboru a zkracují načítání.
Jak rychlost stránky souvisí s ostatními faktory konverze?
Rychlost stránky neexistuje izolovaně. Působí spolu s důvěrou, designem, stránkami produktů a pokladnou. Rychlá stránka s matoucím rozvržením pořád ztrácí návštěvníky. Pomalá stránka s krásným designem je ztrácí ještě rychleji. Vztah je násobný, ne součtový.
E-shop, který je rychlý, buduje důvěru a má jasnou cestu k nákupu, konvertuje výrazně líp než e-shop, který je jen rychlý. Zrychlení se děje v kontextu všech ostatních faktorů. Proto je optimalizace konverzí systematický proces, a ne jedna oprava. Podrobně o tom, jak vám A/B testování pomůže zjistit, co brzdí váš konverzní poměr, se dočtete v článku jak A/B testovat svůj online obchod.
Jak WEMASY pomáhá s rychlostí stránek a konverzí
E-shop od WEMASY stojí na optimalizované hostingové infrastruktuře s vestavěnou kompresí obrázků, mezipamětí prohlížeče a optimalizací výkonu. Stránky produktů se ve výchozím nastavení načítají rychle, protože platforma řeší velikosti obrázků, minifikaci i odpovědi serveru bez jakéhokoli nastavování z vaší strany. Mobilní stránky se automaticky přizpůsobují menším displejům a pomalejšímu připojení. Analytika načítání stránek je součástí nástroje Analytika a přehledy, takže můžete sledovat rychlost napříč stránkami a poznat, které potřebují pozornost. Celou sadu funkcí najdete v tarifech.
Často kladené otázky
Jaká je dobrá doba načtení e-shopu?
Většina zdrojů doporučuje cílit na dobu načtení pod dvě sekundy pro první vykreslení stránky a pod tři sekundy pro úplné načtení včetně všech obrázků a zdrojů. Cokoli pod dvěma sekundami poskytuje rychlý zážitek, který minimalizuje odchody. Mezi dvěma a čtyřmi sekundami je přijatelné, ale s měřitelným dopadem na konverzi. Přes čtyři sekundy je pomalé a mělo by se to řešit. Jsou to doporučení, ne pevná pravidla. E-shop, který se načte za 1.5 sekundy, konvertuje lépe než ten, který se načte za 2.5 sekundy, i když jsou oba v přijatelném rozmezí. S Tvůrcem webů WEMASY to můžete nastavit přímo na svém e-shopu.
Ovlivňuje rychlost stránky pozice v organickém vyhledávání?
Ano. Google výslovně bere rychlost stránky jako faktor hodnocení pro vyhledávání na počítači i na mobilu. Při jinak stejných podmínkách se rychlejší e-shop umístí nad pomalejším na stejné klíčové slovo. Rychlost stránky tedy ovlivňuje váš konverzní poměr dvěma cestami: přímo tím, že rychlejší stránky přemění víc návštěvníků, a nepřímo tím, že lepší pozice ve vyhledávání přivedou víc návštěvníků. Kompletní pohled na optimalizaci e-shopů pro vyhledávače najdete v článku jak vytvořit strategii SEO pro váš online obchod.
Mohu zrychlit stránky bez vývojáře?
Mnohá účinná zlepšení nevyžadují žádné programování. Optimalizace obrázků, odstranění zbytečných doplňků a zapnutí mezipaměti jsou k dispozici ve většině administračních rozhraní platforem. Některá zlepšení, například odložení JavaScriptu nebo úprava odpovědí serveru, mohou vyžadovat přístup vývojáře nebo jeho znalosti. Pokud je váš e-shop na moderní platformě, jako je WEMASY, většina těchto optimalizací je ve výchozím nastavení už hotová za vás. Pokud máte e-shop na zakázku nebo na starší platformě, vývojář vám může pomoci najít rychlá vylepšení a provést je.
Jaký je rozdíl mezi first contentful paint a dobou načtení stránky?
First contentful paint je okamžik, kdy se na stránce objeví první kousek obsahu (text, obrázek apod.). Doba načtení stránky je okamžik, kdy se dokončí načítání všech hlavních zdrojů. First contentful paint nastane první a návštěvník ho vnímá jako odpověď na otázku "jak rychle tahle stránka působí?" Stránka s first contentful paint dvě sekundy, ale s úplným načtením za osm sekund působí na návštěvníka rychle, protože obsah se objeví brzy, i když se některé zdroje na pozadí ještě načítají.
Mám dát přednost rychlosti stránky, nebo designu?
Záleží na obojím, ale rychlost je důležitější, protože krásná stránka, která se načítá deset sekund, ztrácí konverze rychleji než jednoduchá stránka načtená za dvě sekundy. Správná odpověď je rychlá a dobře navržená stránka. Pokud musíte vybrat, dejte přednost rychlosti. Rychlá, prostá stránka konvertuje lépe než pomalá, krásná. Falešnou volbu ale nepřijímejte. Moderní designové nástroje a platformy vytvářejí stránky, které jsou krásné i rychlé.