Optimalizace rychlosti načítání stránek pro Shopify e-shopy

Nakupující na internetu jsou dnes mnohem méně trpěliví než dříve. Přibližně 70 % spotřebitelů přiznává, že pomalý web přímo ovlivňuje jejich ochotu u daného obchodu nakoupit. Je proto nezbytné najít správnou rovnováhu mezi vizuálně atraktivním obsahem a technickou efektivitou. Optimalizace rychlosti webu je v tomto ohledu naprostou nutností. Tento průvodce vám ukáže, jak optimalizovat rychlost načítání stránek realisticky a jasně.

Co je optimalizace rychlosti načítání stránek?

Optimalizace rychlosti načítání vašich stránek je strategie zaměřená na optimalizaci vašeho e-shopu nebo webu. Známá je také jako optimalizace výkonu webu a jejím cílem je, aby se váš e-shop načetl co nejrychleji, a to dřív, než potenciální zákazníci ztratí trpělivost a zavřou kartu v prohlížeči.

Rychlost se měří pomocí dvou klíčových metrik:

1. Rychlost stránky, která měří dobu potřebnou k načtení obsahu na konkrétní URL adrese.
2. Rychlost webu, která vyjadřuje celkový výkon vašeho webu. Hodnotí ji nástroje jako Google PageSpeed Insights, které souhrnně posuzují různé doby načítání na vašem webu.

Google doporučuje pro e-shop rychlost načítání stránky dvě sekundy. Obecně ale platí, že čím rychleji, tím lépe. Průměrná míra konverze e-shopu klesá o 0,3 % s každou další sekundou, kterou váš web potřebuje na načtení. „Lidé jsou netrpěliví,“ říká Josh Stutt, vedoucí marketingu v the49, agentuře zaměřené na digitální inovace. „Každý z nás si vzpomene na chvíli, kdy jsme chtěli navštívit nějaký web, ten se nenačetl dostatečně rychle a my jsme prostě zavřeli kartu.“

Pokud například provozujete e-shop s průměrnou hodnotou objednávky 1 260 Kč a 5 000 návštěvníky denně, jednosekundové zpoždění v rychlosti webu vás může stát cca 189 000 Kč ročně.

Proč je rychlost načítání stránek důležitá?

Čím svižnější je váš e-shop, tím snadněji získáte nové zákazníky. Skvělá rychlost načítání stránek vám totiž pomůže přetáhnout uživatele od pomalejší konkurence.

I nepatrné zrychlení v řádech milisekund dokáže s prodeji dělat divy. Společnost Deloitte zjistila, že zkrácení doby načítání o pouhých 0,1 sekundy zvedlo v maloobchodě konverze o 8,4 %. Tito kupující navíc během jedné rychlé návštěvy utratili téměř o 10 % více.

Výzkum agentury Portent tato čísla jen potvrzuje. Ukázalo se, že e-shopy s odezvou do jedné sekundy dosahují 2,5krát lepších výsledků než weby s načítáním kolem pěti sekund.

Z grafu níže uvidíte, že e-shop s dobou načtení 1 sekundy má konverzi 3,05 %, zatímco při 2 sekundách padá na pouhých 1,68 %. Z toho plyne jediné. Konverzní poměr strmě klesá s narůstajícím časem čekání.

Konverzní míra klesá s rostoucí dobou načítání stránky.
Pomalá odezva má obrovský dopad také na SEO marketing. Vyhledávač Google jasně upřednostňuje weby se skvělými výsledky v metrikách Core Web Vitals.

A pokud investujete peníze do placeného vyhledávání, pomalé vstupní stránky sráží vaše skóre kvality v Google Ads. Výsledkem je mnohem vyšší cena za proklik. Jde o obrovský problém zvláště v dnešní době, kdy se náklady na akvizici nového klienta neustále zvyšují napříč celou e-commerce.

Běžné faktory ovlivňující rychlost načítání stránek

Vaše e-commerce platforma

Vaše firma potřebuje e-commerce platformu s infrastrukturou, která pomáhá zkracovat dobu načítání. Jako uživatel platformy byste měli s jejím poskytovatelem probrat vylepšení serverové části vašeho webu, aby se stránky návštěvníkům načítaly rychle.

Vykreslování neboli rendering je proces sestavování HTML kódu ve chvíli otevření adresy v prohlížeči. Zvolená infrastruktura přímo určuje plynulost tohoto nezbytného kroku.

Například Storefront Renderer (SFR) od Shopify slouží k okamžitému zpracování uživatelských požadavků. Zvyšuje celkový výkon na straně serveru 2,5 až 5krát ve srovnání se staršími řešeními bez této technologie.

„Blokování vykreslování znamená těžkopádné načítání souborů JavaScript nebo CSS,“ vysvětluje Chris McCarron z agentury GoGoChimp. „Prohlížeč se při otevírání stránky musí zastavit a stáhnout tyto velké soubory ještě před zobrazením samotného obsahu.
Největší přínos nového vykreslování poznáte u takzvaných cache misses. Jde o situace bez předem uložených dat ve vyrovnávací paměti. Systém je musí složitě získávat z hlavní paměti a to běžně způsobuje nepříjemné zpoždění.

Značka Rhone Apparel nasadila SFR v dubnu 2020 a okamžitě zaznamenala obrovské zlepšení:

• 15% nárůst tržeb
• 17% nárůst konverzní míry
• 12% pokles průměrné doby načítání stránky
• 37,95% pokles průměrné doby odezvy serveru
• 3% pokles míry okamžitého opuštění

Pokud vaše e-commerce platforma nemá rychlost načítání stránek jako nejvyšší prioritu, pak zbývající doporučení nebudou mít tak velký účinek. S vědomím, že toto máte se Shopify vyřešeno, můžete rychlost svého e-shopu ovlivnit tím, že se zaměříte na následující body a svůj web dále vylepšíte.

Hosting

Vaše služba e-commerce hostingu a infrastruktura mohou ovlivnit výkon vašeho e-shopu, a to zejména ve dnech s vysokou návštěvností a velkým počtem transakcí.

Seznam značkových prodejců, jejichž e-shopy padají během klíčových prodejních období, jako je Black Friday, například Lululemon, J.Crew a Lowe's, stále roste. 81 % respondentů jednoho průzkumu uvedlo, že 60 minut výpadku stojí jejich firmu více než 300 000 USD (cca 6 300 000 Kč).

Při zjišťování požadavků na hostingovou platformu se zaměřte na:

• Limity paměti nebo šířky pásma pro škálování během sezónních akcí
• Předpokládanou návštěvnost a špičkové zatížení, aby nedošlo k výpadku při náhlém nárůstu návštěvníků

Před každou velkou prodejní akcí požádejte svého poskytovatele o pomoc s přípravou na neočekávané nárůsty návštěvnosti nebo masivní příval objednávek. Ať už to jsou sezónní výprodeje, vánoční špička nebo jen nová kolekce, je to nesmírně důležité.

Výpadky nejsou nikdy příjemné a pro firmu s obratem 5 miliard USD (cca 105 miliard Kč) mohou být během největší sezóny naprosto zdrcující. Web společnosti JB Hi-Fi byl během nákupní horečky kvůli technickým problémům celé dvě hodiny nedostupný. „Sledovali jsme pády webů mnoha známých prodejců,“ dodává Chris Lang z JB Hi-Fi. „Dozví se o tom hned celá země a je to katastrofa pro zákazníky i samotnou značku. Udělali bychom tehdy cokoliv k odvrácení takového scénáře.“

Po přechodu na Shopify Plus zaznamenala tato značka rekordní tržby. Odbavila téměř dvojnásobnou online návštěvnost během hlavní prodejní sezóny a vše běželo naprosto plynule.

Díky spolehlivé cloudové infrastruktuře dosahuje e-shop platforma Shopify Plus celkové dostupnosti 99,98 %. Váš obchod se na ní načítá 2,97krát rychleji než u jiných konkurenčních SaaS řešení.

Architektura webu

E-shopy využívají rozmanité systémy k prezentaci informací uživatelům a vyhledávačům. S růstem firmy to ovšem bývá složitější. Javier Moreno ze Shopify k tomu dodává jasný postoj. „S růstem značky se weby stávají mnohem bohatšími na obsah. Tato krása má ale svou daň a bez aktivního sledování rychlosti načítání stránek váš web nutně zpomalí.“

Mnoho prodejců se při snaze zrychlit odezvu obrací na tzv. Headless commerce. Tento inovativní koncept kompletně odděluje vizuální frontendovou část od robustní backendové platformy. Prodejci s balíčkem Commerce Components by Shopify posouvají celou optimalizaci rychlosti načítání stránek ještě o úroveň výš. Využívají moderní technologie přesně v momentě, kdy je skutečně potřebují. Přestávají tak zbytečně přetěžovat prohlížeče složitým kódem a nezpomalují plynulý průchod zákazníka.

Spojnicový graf ukazující, jak infrastruktura, nadbytečný kód, hmotnost stránky, architektura, konfigurace, aplikace třetích stran a velikost prvků ovlivňují rychlost načítání stránky.

Výkon webu se s jeho růstem zhoršuje.

Nadměrné množství aplikací třetích stran

Pokud máte ve svém internetovém obchodě nainstalováno více než 20 e-shop aplikací, pravděpodobně je všechny nepoužíváte. Možná jste některé z nich nainstalovali na zkoušku a pak jste je zapomněli odstranit. Tyto aplikace ale stále běží na pozadí a mohou aktivně poškozovat rychlost načítání stránek vašeho webu.

Přizvěte vývojáře, aby odstranil všechny nepotřebné aplikace. Poté proveďte testy rychlosti stránek pomocí nástrojů jako GTmetrix nebo PageSpeed Insights, případně i ruční test pomocí vývojářských nástrojů v Chromu. Klikněte na kartu „Network“ a znovu načtěte stránku.

Kdykoli budete chtít nainstalovat novou aplikaci, položte si otázku: Převáží přidaná hodnota této aplikace možné zpomalení načítání?

Většina skriptů a CSS souborů pro aplikace stažené přes administraci Shopify Plus se vkládá do <head> vašeho souboru theme.liquid v rámci {{ content_for_header }}.

Aplikace musí být vykreslena dříve než se načte jakýkoli jiný kód.

„Právě kvůli tomuto napětí mezi rychlejším načítáním a hodnotou aplikací pro zážitek a prodej načítáme skripty přidané pomocí Script Tag API asynchronně, aby se načítání stránky nezastavilo,“ říká Jason Bowman, vedoucí týmu Solutions Engineering v Shopify Plus. „Skripty přidané přímo do <head> ale často mají okamžitý dopad na výkon."

Způsoby, jak správně měřit rychlost načítání stránek

Každý nástroj pro testování rychlosti používá jinou metodu hodnocení, stejně jako každý tým bude mít odlišnou definici dobré rychlosti webu. Nástroje, které uvádějí čas „načtení stránky“, musí ve svých výsledcích zvolit jeden konkrétní časový ukazatel, například „time to first byte“ (TTFB).

Tyto testy rychlosti načítání stránek použijte jako vodítko pro své rozhodování, ale vždy si zachovejte zdravý odstup. Musíte najít rovnováhu mezi rychlostí a vytvořením uživatelského rozhraní, které optimalizuje cestu vašeho zákazníka.

Google PageSpeed Insights

PageSpeed Insights je nástroj Google Labs, který vám poskytne personalizovaná doporučení pro zlepšení výkonu webu. Upozorní také na prvky na vašem webu, které zpomalují stránku, jako jsou CSS a JavaScript.

„Dbám na to, aby byl každý projekt, na kterém pracuji, průběžně testován pomocí nástroje Google PageSpeed Insights nebo podobného nástroje,“ říká Josh Stutt. „Než můžete něco zlepšit, musíte vědět, jak si vedete a kde jsou vaše slabá místa.“

Můžete si dokonce prohlédnout výkon mobilního webu svých konkurentů. Znalost toho, co je s jejich webem špatně, vám pomůže vyhnout se stejným chybám.

Ukázka reportu z Google PageSpeed Insights.

GTMetrix

GTMetrix hodnotí rychlost vašeho webu známkou od A po F. Slučuje data z Yslow i PageSpeed Insights a poskytuje report o výkonu webu, který obsahuje:

• Rychlost načítání vaší stránky
• Analýzu Web Vitals a Lighthouse
• Možnosti optimalizace rychlosti webu
• Rozbor složení stránky podle požadavků a celkové velikosti v bytech

Ukázka reportu o výkonu webu z GTMetrix.

Pingdom

Pingdom.com ohodnotí výkon vašeho webu (v rozmezí od 0 % do 100 %). Má také užitečnou funkci tzv. „vodopádové analýzy“, která vám pomůže identifikovat další zásadní problematické oblasti. Toto řádkové hodnocení je užitečný referenční nástroj.

Ukázka reportu z Pingdomu pro e-shop.

Jak optimalizovat rychlost načítání stránek vašeho webu

• Používejte síť pro doručování obsahu (CDN)
• Nepřehánějte to s úpravami šablony
• Zvažte rychlý náhled na stránkách kategorií
• Odstraňte nepotřebná vyskakovací okna
• Zmírněte používání hero sliderů na úvodní stránce
• Komprimujte, zmenšujte a snižujte počet obrázků
• Používejte odlehčené vkládání videa (lite embeds)
• Omezte přesměrování a nefunkční odkazy
• Povolte líné načítání obsahu (lazy loading)
• Odblokujte prohlížeč od skriptů blokujících parsování
• Organizujte měřící kódy přes Google Tag Manager
• Dejte si pozor na nadměrné Liquid smyčky

Používejte síť pro doručování obsahu (CDN)

Síť pro doručování obsahu, neboli síť pro distribuci obsahu (CDN), je skupina serverů rozmístěných po celém světě. Rozděluje zátěž při doručování obsahu přes server nejblíže v poloze vašeho návštěvníka, čímž zrychluje zážitek lokálních uživatelů.

Protože stále více e-shopů cílí na expanzi do zahraničí, je CDN, nebo v případě Shopify dvojité CDN, nepostradatelnou součástí výkonu platformy.

Shopify nabízí špičkovou CDN poháněnou technologií Fastly zcela zdarma. Aktuálně existuje o něco méně přístupových bodů Fastly po celém světě, ale na druhou stranu disponují mnohem větším výkonem. Tyto vysokokapacitní servery dokážou doručit obrovské množství dat přímo z mezipaměti. Týká se to jak statického, tak dynamicky generovaného obsahu. Výsledkem je vynikající poměr úspěšných načtení a bezproblémový prodej online.

Kvalitní CDN zkrátka zvyšuje celkovou rychlost a zároveň snižuje provozní náklady. „Získání licence společně s hostingem a CDN od Shopify Plus nám hned v prvním roce ušetřilo asi 100 000 USD (cca 2 100 000 Kč)“, potvrzuje Diana Harbour z módní značky Red Dress Boutique.

Největším problémem přitom bývá vizuální obsah. Právě ten často působí jako nejvýraznější brzda výkonu. Shopify naštěstí automaticky informuje CDN servery ve chvíli, kdy dojde ke změně jakýchkoli prvků na webu včetně obrázků nebo kódů JavaScriptu a CSS.

Jak na to se Shopify

Shopify obchody mohou použít filtr asset_url, který ke všem námi generovaným URL automaticky přidá čísla verzí. Například číslo verze připojené na konec URL může vypadat takto: ?v=1384022871. Tento filtr říká CDN, aby načetlo správnou verzi. Bez něj se vám po provedení změn v obsahu nemusí zobrazit očekávaný prvek.

Pokud navíc odkazujete na obsah přímo ve svém CSS, bude URL statická. Nebude ani nést verzi prvku, kterou Shopify automaticky aktualizuje.

Abyste zajistili automatické aktualizace, upravte syntaxi svého CSS tak, aby zahrnovala filtr asset_url. Informace o všech URL filtrech, které pomáhají načítat prvky, najdete v centru nápovědy Shopify.

Nepřehánějte to s úpravami šablony

Vizuální podoba e-shopu zásadně rozhoduje o zájmu zákazníka. Studie ukazují, že první dojem tvoří z 94 % samotný webový design. Tato podvědomá rozhodnutí probíhají v rekordním čase. Návštěvník si vytvoří názor na vaši značku během pouhé jedné desetiny sekundy.

Kvůli tomu existuje nevyhnutelný kompromis mezi plynulostí chodu a dechberoucí grafikou. Moderní Shopify šablony lákají na ohromné množství funkcí, ale ty s sebou bohužel často přináší složitý kód a nadměrně velké obrázky. „Rozhodně nepotřebujete motiv přeplácaný všemi možnými vychytávkami,“ radí Josh Stutt. „Úplně vám stačí čisté, rychlé a snadno ovladatelné prostředí. Mnohokrát jsem zažil více než 50% pokles míry okamžitého opuštění u nových návštěvníků jen díky prostému přechodu na jednodušší motiv.“

Nirav Sheth ze společnosti Anatta přidává další zkušenost. „Rychlé a jednorázové triky nevytvoří stabilní základ pro dlouhodobý výkon e-shopu. Pomůže pouze systematická práce. Celý proces zrychlení musí začít pečlivou optimalizací základní architektury zvolené šablony.“

Zvažte rychlý náhled na stránkách kategorií

Funkce rychlého náhledu zobrazuje produkty přímo ze stránky s výpisem produktů, aniž byste museli navštívit detail produktu.

Teoreticky by rychlý náhled měl vašim zákazníkům šetřit čas, ale ve skutečnosti může jejich zážitek na vašem e-shopu zhoršit:

• Přidává do zákazníkovy cesty krok navíc.
• Uživatel na něj může kliknout omylem, což je frustrující.
• Může být zaměněn za produktovou stránku.
• A hlavně může výrazně zpomalit dobu načítání vaší stránky.

Implementace takového vyskakovacího okna totiž mnohdy předběžně stahuje veškerá data o daném produktu. Systém se tak připravuje pro případ, že by návštěvník na tlačítko náhledu opravdu kliknul. Zcela přitom nezáleží na tom, zda jde o nativní součást motivu nebo o doplněk z externí aplikace.

V praxi to znamená stahování naprosto obrovského množství zbytečných dat. Problém drasticky narůstá obzvlášť v kategoriích s dvaceti nebo třiceti náhledy produktů na jedné obrazovce. Zda vaši zákazníci tuto funkci reálně využívají, zjistíte velmi snadno přes takzvané mapování kliknutí. Jde o analytický nástroj založený na JavaScriptu. Sleduje přesný pohyb myši a eviduje, kam přesně návštěvníci vašeho webu klikají.

Pro podrobnou analýzu můžete využít například tyto nástroje:

• Hindsight
• Hotjar

Najděte rychlý náhled v Shopify

Mělo by být naprosto jednoduché najít tlačítko pro rychlý náhled. Zkontrolujte editor šablony, zda nabízí tuto možnost a zda je automaticky vypnutá nebo zapnutá. Pokud tuto možnost v editoru šablony nevidíte, zkontrolujte, zda nepochází z nějaké aplikace. Pokud ano, měla by to být otázka pár kliknutí.

Někdy ovšem první dva kroky vůbec nepomohou. Funkce pak bývá napevno zakódovaná přímo v samotné šabloně. K její identifikaci a bezpečnému odstranění budete potřebovat zkušeného vývojáře. S podobným technickým zásahem vám spolehlivě pomůže jakákoli prověřená e-commerce agentura.
Můžete také využít technologii AJAX a načítat detailní informace o produktu až v okamžiku, kdy návštěvník klikne na tlačítko náhledu. Další variantou je uložení omezené sady informací ve formě datových atributů přímo u položky v produktové mřížce. Následně jednoduše sestavíte dynamické HTML a vyskakovací okno pomocí JavaScriptu.

Obě popsané cesty jsou ale stále horší volbou než úplné odstranění rychlého náhledu. Systém totiž i nadále stahuje vybraná data pro každý produkt v dané kategorii. Jde o plynulejší řešení než masivní načítání kompletní sady velkých obrázků a všech odkazů najednou.

Odstraňte nepotřebná vyskakovací okna

Vyskakovací okna běžně slouží k propagaci speciálních nabídek. Často také cíleně motivují nakupující k dalšímu kroku na jejich nákupní cestě. Někdy jde o lákavý slevový kupón a jindy zase o snahu získat cenný kontakt pro e-mail marketing. Všechny tyto grafické prvky pomáhají zaujmout nové návštěvníky a otevírají důležité dveře pro budoucí komunikaci.

Používání vyskakovacích oken ale představuje poměrně křehkou disciplínu. Příliš mnoho blikající grafiky na jedné obrazovce nevyhnutelně poškodí celkový výkon vašeho webu. Tato okna navíc velmi často zbytečně odvádějí pozornost zákazníků od hlavního obsahu stránek připraveného pro maximální konverze.

Pro zamezení nechtěného zpomalování si raději nastavte přesná pravidla. Chytře nakonfigurované spouštěče oken zamezí stahování dodatečného kódu v nevhodnou chvíli. Můžete využít oblíbenou reakci na záměr opustit stránku nebo nastavit dostatečně dlouhé časové zpoždění. Prohlížeč tak získá prostor pro plynulé načtení obsahu a váš prodejní trychtýř neutrpí žádné škody.

Zmírněte používání hero sliderů na úvodní stránce

Rozsáhlé posuvné prezentace s velkými fotografiemi slouží k efektnímu představení sortimentu. Bohužel mají také jednu velkou nevýhodu. Perfektní vizuální zážitek vyžaduje obrovské rozlišení a špičkovou kvalitu obrázků. Tento datový objem extrémně prodlužuje dobu načítání stránek. Problém roste především ve chvíli automatické rotace čtyř až pěti obřích snímků za sebou.

Snižte proto počet posuvných ploch na hlavní stránce nebo celou funkci nadobro odstraňte. K perfektnímu upoutání pozornosti nakupujících naprosto stačí jedna promyšlená a kvalitní produktová fotografie doplněná o jasnou výzvu k akci. Náš lidský mozek totiž zpracovává jakýkoliv obraz zhruba 60 000krát rychleji než psaný text.

Pokud se posuvníku opravdu nechcete vzdát, dodržujte základní pravidla pro zachování dobré uživatelské přívětivosti:

• Držte se dvou až tří snímků
• Zobrazte snímky jako statické sekce obsahu namísto automaticky se otáčejících karuselů
• Jako univerzální řešení použijte srcset nebo Lazy Load

Například Chubbies používá místo tradičního hero slideru na úvodní stránce optimalizované obrázky. Spoluzakladatel Tom Montgomery říká: „Se Shopify jsme od prvního dne. Nikdo z nás není inženýr, takže je skvělé, že se můžeme spolehnout na experty Shopify a soustředit se na inovace.“

Komprimujte, zmenšujte a snižujte počet obrázků

Obrázky tvoří někde mezi 50 % až 75 % celkové velikosti vašich webových stránek. Toto číslo ale může být mnohem větší s tím, jak váš e-shop roste. Čím více produktů prodáváte, tím více obrázků na serveru. Každý obrázek použitý na stránce vytváří nový HTTP požadavek. Optimalizace obrázků pro web nejen zrychluje rychlost načítání stránek, ale pomáhá vám také říct více informací s minimem prostředků.

Alex Mirzaian, marketingový manažer Eightvape, říká: „Když neustále vytváříte obsah prostřednictvím blogových článků nebo denně vytváříte spoustu produktů, máte tendenci na web jen přidávat obrázky bez rozmýšlení. Komprese obrázků může hodně pomoci, když máte na webu tisíce obrázků.“

Velikost obrázku můžete zmenšit naprosto bez ztráty kvality pomocí bezztrátové komprese nástroji jako TinyJPG nebo TinyPNG.

Dejte si také pozor na prázdné zdroje obrázků – <img src = ' '> – ve svém kódu. Ty zbytečně zatěžují prohlížeč tím, že na vaše servery posílají další požadavek. Jednoduchým řešením jsou CSS „sprity“, které slučují více obrázků, jako jsou ikony, do jednoho, čímž omezují počet jednotlivých požadavků na obrázky ze serveru a právě tím zrychlují rychlost načítání stránek, nebo spíše omezují celkové zpomalení.

Vestavěné parametry velikosti obrázků od Shopify vám umožňují stáhnout co nejmenší možný obrázek při zachování kvality. Vyžádá si od sítě CDN naprosto přesnou velikost a prohlížeč tak vůbec nemusí ztrácet čas složitým zmenšováním na straně prohlížeče.
Maria Harutyunyan z agentury Loopex Digital řešila obrovské problémy s pomalým načítáním u jednoho z klientů. „Zmenšili jsme je a zkomprimovali, což okamžitě zrychlilo rychlost načítání stránek. Obrázky nyní zabírají o 60 % méně místa a načítají se mnohem rychleji."

Používejte odlehčené vkládání videa (lite embeds)

Video se rychle stává jazykem internetu. Přibližně 91 % firem používá video jako efektivní marketingový nástroj. V závislosti na tom, jak je na vašem webu vloženo, ale může způsobit velké rozdíly v době rychlosti načítání stránek.

Standardní kód pro vkládání z vašeho YouTube kanálu nejen že váš web brzdí, protože se některé soubory stahují ještě předtím, než návštěvník klikne na tlačítko Přehrát, ale používá také značku <iframe>, kde jsou šířka a výška přehrávače pevně dané. Vaše video se také nepřizpůsobí velikosti obrazovky různých zařízení.

Řešením je odlehčené vkládání (tzv. lite embeds), které načítá videa přímo na vaší webové stránce. Při počátečním načtení stránky web vloží pouze náhledový obrázek videa a samotný přehrávač (a veškerý jeho JavaScript navíc) se načte, až když uživatel klikne na náhled a rozhodne se video sledovat. Neexistuje žádný dobrý důvod, proč by se mělo video načítat zároveň se stránkou.

Konkrétně mají náhledy YouTube videí přibližně 15 kilobytů, takže odlehčené vkládání může zmenšit velikost webových stránek téměř o celý megabyte.

Omezte přesměrování a nefunkční odkazy

Příliš mnoho přesměrování a nefunkčních odkazů silně poškozuje výkon a sráží vaše pozice ve vyhledávačích.
Udělejte si v odkazech naprostý pořádek. Dočasná přesměrování typu 302 vašemu e-shopu z pohledu optimalizace vyloženě škodí. Spouštějí totiž další HTTP požadavky a celkově zpomalují přenos dat.

Místo toho sáhněte po přesměrování s možností uložení do mezipaměti nebo využijte nativní funkci přímo v administraci Shopify. Ta standardně využívá trvalý kód 301. Vždy také myslete na jedno zásadní pravidlo. Nikdy nesměrujte URL adresy na stránky ukrývající další smyčku přesměrování.

Nefunkční odkazy na smazané obrázky nebo soubory stylů neustále zvyšují počet chyb a poškozují technický stav domény. K jejich spolehlivému odhalení poslouží například nástroj Broken Link Checker. Pro návštěvníky s překlepem v adrese pak nezapomeňte vytvořit vlastní stránku error 404. Pomůže jim s orientací a nasměruje je přesně tam, kam potřebují.

Prodejce Gymshark využívající Shopify Plus směruje lidi, kteří dorazí na nefunkční odkaz, k jeho dvěma největším kategoriím: dámskému a pánskému oblečení.

Povolte líné načítání obsahu (lazy loading)

Líné načítání je technika, která zabraňuje okamžitému načtení veškerého obsahu na webové stránce. E-shopy, které používají líné načítání, zobrazují obsah pouze tehdy, když uživatelé aktivují určité spouštěče.

Líné načítání uvidíte v praxi ihned po návštěvě detailu produktu. Okamžitě po příchodu návštěvníka se zobrazí pouze obsah viditelný nad ohybem (above the fold), jako je název položky, obrázky a popis produktu. Doplňkový obsah se objeví, když uživatel roluje pod tuto sekci. Veškerý UGC obsah i karusely ze sociálních sítí a recenze kupujících čekají na svůj správný čas. Server tak hned na začátku nedostane obrovskou nálož požadavků a vaše rychlost načítání stránek zůstává v optimálních hodnotách.

Chris McCarron z agentury GoGoChimp popisuje nedávný případ z praxe. „Pod ohybem každé webové stránky byl ohromující počet obrázků. Problém je v tom, že webový prohlížeč stahuje současně každý obrázek na stránce, bez ohledu na to, které obrázky jsou viditelné. Líné načítání ale stáhne obrázek, až když jej lze v prohlížeči zobrazit.“

Odblokujte prohlížeč od skriptů blokujících parsování

Než může prohlížeč zobrazit stránku vašemu návštěvníkovi, musí projít procesem zvaným „parsování HTML“. Skripty blokující parsování ale tento proces přeruší: když prohlížeč narazí na takový skript, musí vše zastavit a soustředit se pouze na spuštění tohoto skriptu, než může pokračovat v čemkoli dalším.

Naštěstí existuje jednoduché řešení a stačí k němu atribut „async“ nebo „defer“.

Blokuje parsování: <script src="jquery.js"></script> Neblokuje parsování: <script src="jquery.js" defer></script>

Za zmínku stojí, že samotný JavaScript prohlížeče v základu nebrzdí. Skutečný problém představuje pouze nešťastný způsob jeho volání. Po úpravě kódu vždy pečlivě otestujte plnou funkčnost e-shopu z pohledu běžného zákazníka.

Organizujte měřící kódy přes Google Tag Manager

Zákaznická data pohánějí vaše e-commerce strategie, digitální strategie a marketingové plány. Sběr těchto dat ale může také zpomalit rychlost načítání stránek. Na vině jsou často všechny ty JavaScriptové sledovací značky (např. pro obecnou analytiku, konverze, cíle a behaviorální retargeting).

Sběr dat bývá také obrovskou zátěží na čas a zdroje pro vaše vývojáře i marketingové týmy. Systémy pro správu značek (TMS), jako Google Tag Manager, naštěstí zhušťují všechny tagy do jednoho JavaScriptového požadavku. Pokud chyba jednoho kódu způsobí pád webu, tento nástroj vám také pomůže problémovou značku rychle odstranit.

Nirav Sheth dodává, že když Anatta optimalizovala rychlost webu jednoho e-shopu z oblasti kosmetiky, „to, co posunulo rychlost webu více než cokoli jiného, byla kombinace využití Shopify API a vyčištění Google Tag Manageru.“

K tomu, abyste mohli spravovat všechny značky svého obchodu Shopify Plus na jednom místě pomocí Google Tag Manageru, vám stačí jediný úsek kódu. Chcete-li se dozvědět více, přečtěte si pokyny v centru nápovědy Shopify Plus.

Dejte si pozor na nadměrné Liquid smyčky

Liquid je výkonný programovací jazyk platformy Shopify. Existují ovšem případy, kdy musíte pečlivě zvážit přidané výhody oproti technickým kompromisům. Pokud zrovna řešíte, jak naprogramovat e-shop, musíte si hlídat efektivitu zápisu.

Opakování pomocí cyklu forloop je přesně takovým případem. Znamená to situaci, kdy systém musí prohledat všechny produkty v kategorii kvůli nalezení určité podmínky (například přesné ceny nebo štítku).

Tyto funkce mohou být velice užitečné například při výpisu variant u jednoho produktu. Skvěle fungují také v kategoriích s menším počtem položek, ale vždy si dejte pozor na dopad na dobu načítání.

Zkontrolujte zdrojový kód své šablony a ujistěte se, že nespouštíte smyčky forloop opakovaně při hledání stejných informací. K tomu dochází typicky při spolupráci více vývojářů, kteří mohou omylem duplikovat úkoly. Odstranění těchto duplicit zásadně zrychlí načítání vaší stránky.

Často je mnohem jednodušší nasadit prostou smyčku product_options_with_values. Prostudujte si proto dokumentaci, abyste plně pochopili logiku šablonovacího jazyka Shopify a fungování Liquid smyček.

Jak provést test rychlosti webu

Core Web Vitals je skupina metrik, které pomáhají vyhodnotit rychlost webu. Na webech, které splňují prahové hodnoty těchto metrik, byla u uživatelů o 24 % nižší pravděpodobnost, že během načítání web opustí.

• Plně načtená stránka: Toto je nejtradičnější měřítko toho, jak dlouho trvá plné načtení vaší stránky.
• Time to first byte: Doba, za kterou stránka zahájí proces načítání
• First meaningful paint: Doba, za kterou návštěvníci webu dokáží načíst dostatek stránek, aby jim porozuměli.

Google PageSpeed Insights hodnotí každou z těchto metrik Core Web Vitals statusem: Dobré, Vyžaduje zlepšení a Špatné. Pod každým hodnocením uvidíte také doporučení pro rychlost webu personalizovaná pro váš web.

Optimalizace rychlosti pro mobilní zařízení

Trend mobilního nakupování bude nadále sílit.

Navzdory vysokému podílu nákupů z telefonu nejsou všichni zákazníci ochotni utrácet na pomalých webech. Pouhé zlepšení odezvy o 0,1 sekundy může zvednout prodeje o 8,4 %. Soustřeďte se proto pečlivě na optimalizace konverzního poměru pro mobilní zobrazení.

Značka firemního oblečení Merchology zjistila mizerné konverze u návštěvníků z telefonů. Rozhodla se proto kompletně přepracovat svůj web přesně pro tyto potřeby. Dva měsíce po spuštění dosáhla Merchology 40% nárůstu mobilních konverzí.

Zde je návod pro zajištění maximálního výkonu vašeho mobilního obchodu.

Vypněte automatické přehrávání videa na mobilu

Ne všichni uživatelé mobilního internetu mají zrovna silné připojení. Možná jde o zákazníka Allbirds, který si prohlíží web prodejce uprostřed túry, když se boty, jež má na sobě, rozpadají. Nebo o zákazníka Firebelly Tea, který si objednává další balení čajových sáčků, zatímco čeká na parkovišti, až jeho děti skončí ve škole.

Tak či onak, tito lidé se možná budou chtít podívat na videa, která prodejci používají ke komunikaci s potenciálními zákazníky na svém mobilním webu. Automatické přehrávání těchto videí ale může způsobit vážné zpomalení rychlosti načítání stránek.

Mobilní síťové připojení musí při nastaveném automatickém přehrávání videa stáhnout velký soubor. Když je to nahrazeno statickým náhledem a naopak volitelným tlačítkem pro přehrávání, je to velký rozdíl. Návštěvníci získají svůj první smysluplný pohled v rekordním čase.

Optimalizujte mobilní pokladnu

Na proces placení se při zrychlování e-shopů často zapomíná. Nejvíce pozornosti získává úvodní obrazovka a produktové kategorie. Nechcete logicky ztratit zákazníka hned při prvním kontaktu.

Pokud ale pokladnu do optimalizace nezahrnete, s velkou pravděpodobností vás čeká velmi často opuštěný košík. Lidé si sice ručně vyberou požadované zboží. Pokud je ale v závěru přivítá zdlouhavé načítání, musí produkt opravdu milovat pro úspěšné dokončení nákupu. Kvůli technickým chybám tak zbytečně přijdete o impulzivní nakupující a jejich e-commerce nákupní košík zůstane nevyužitý.

Systém Shop Pay umožňuje zákazníkům proletět pokladnou naprosto plynule. Podle interních dat mají prodejci s touto funkcí 1,91krát vyšší míru dokončení objednávky na mobilu než obchody s běžným procesem. Nativní Shopify checkout tak tvoří zásadní konkurenční výhodu.

„Většina našich zákazníků dnes objevuje nové produkty na cestách přes telefon. Pokud musí složitě vyplňovat formulář, okamžitě je ztrácíme,“ popisuje Benjamin Sehl ze značky Kotn. „Povolení Shop Pay opravdu proměnilo nejbolestivější bod nákupu v naprosté potěšení. Systém je navíc propojený s obrovským ekosystémem a i noví zákazníci mohou nakoupit doslova jedním kliknutím.“

Optimalizujte rychlost načítání stránek

Získání podpory celého týmu pro investici času a prostředků do optimalizace výkonu je naprosto klíčové. Tato data a ověřené postupy jasně ukazují, jak zvýšit prodej, a pomohou vám postavit přesvědčivé argumenty.

Mnoho z těchto úprav zvládnete hravě svépomocí. Když potřebujete složitější zásah, můžete si přizvat na pomoc certifikovaného partnera Shopify Plus. Zkušený tým vám přesně poradí s maximálním zrychlením vašeho obchodu.