Jak zrychlit e-shop na Shoptetu: konkrétní rady a časté chyby
Rychlý web není jen technická perlička, je to byznysová nutnost. Zákazníci odcházejí z pomalých stránek rychleji než byste řekli švec a Google pomalé weby prostě nemá rád.
Analýza společnosti Portent ukázala, že při načítání stránky za 1 sekundu je průměrná konverzní míra téměř 40 %. Při 2 sekundách klesá na 34 %, při 3 sekundách na 29 %. Rychlý web přináší konverze, vyšší návštěvnost, levnější PPC a má mnoho dalších výhod.
Pokud provozujete e-shop na Shoptetu, máte dobře postavený základ, ale i ten nejlepší e-shop potřebuje pravidelnou péči, pokud jde o rychlost webu.
Nechcete číst, ale prostě zrychlit váš Shoptet? Podívejte se na naší službu zrychlení Shoptetu.
Rychlost Shoptetu jako takového je velmi dobrá, ale pozor na úpravy šablony
Na e-commerce platformách jako je Shoptet nemáte přístup přímo na server, ale to není nutně špatně. Rychlost odezvy serveru (TTFB, Time To First Byte) bývá u Shoptetu výborná.
Shoptet rozhodně patří mezi technicky zdařilé e-commerce platformy, server běží jako švýcarské hodinky.
Problémy začínají až na frontendu, tedy v části webu, kterou vidí zákazníci. Když kodéři začnou výrazně měnit vzhled původní šablony, často musí použít hodně JavaScriptu.
Shoptet vám tedy dává kvalitní motor, ale jak rychle pojedete, záleží na tom, co do auta naložíte.
Uživatele totiž nezajímá jen samotná odezva serveru, ale celkový dojem, který ze stránky má přímo v prohlížeči. Rychlost webu měříme pomocí sady metrik uživatelského prožitku zvané Core Web Vitals.
Core Web Vitals jsou velmi důležitá čísla, protože pokud stránka splňuje jejich doporučené hodnoty, je mimo jiné 24 % méně pravděpodobné, že uživatelé odejdou před načtením. (Zdroj)
- Rychlost načtení (LCP) i stabilita layoutu (CLS) bude díky velmi dobrým serverům výborná. Problém ale nastává, když se dělají úpravy na míru.
- Rychlost odezvy na interakce (INP) je také v základu Shoptetu výborná (i díky naší pomoci), ale problém může vzniknout při úpravách webu nebo přidávání komponent třetích stran.
Podívejte se na hodnoty Core Web Vitals pro několik referenčních webů, které sledujeme:
Většina e-shopů na Shoptetu má velmi dobré hodnoty Core Web Vitals, ale jsou zde i výjimky, takže si na rychlost dejte dobrý pozor.
Základním cílem jsou „zelené" hodnoty Core Web Vitals pro celou doménu a v Google Search Console to mít také vše zelené.
TIP: Změřte si rychlost vašeho webu na Shoptetu.
Rychlý Shoptet existuje. Jen ho musíte správně nastavit a nekazit zbytečnostmi.
Pět typických pastí při úpravách Shoptetu
Každá úprava webu je jako přidání zavazadla do auta. Od určitého počtu úprav nebo jejich nešikovném provedení začne rychlost pokulhávat.
1) Nešikovné úpravy designu
Když chcete výrazně změnit vzhled šablony, často to znamená přepsat původní kód pomocí JavaScriptu. Diskutujte s designéry, zda opravdu potřebujete měnit úplně všechno. Někdy stačí jemné ladění výchozích šablon, jako je např. Classic, místo kompletní renovace.
Obrázek: layout se při načínáním na Shoptetu může nehezky rozbíjet.
Dalším krokem je požadovat od vývojářů vyhnout se negativnímu vlivu na Core Web Vitals při implementaci těchto změn. Ohroženy jsou zejména metriky LCP (rychlost načtení) a CLS (stabilita layoutu).
2) Přidávání doplňků a třetích stran bez sledování vlivu na rychlost
Každý nový doplněk nebo javascriptová komponenta je dalším kufrem v zavazadlovém prostoru vašeho auta. Před nasazením si položte otázku: „Opravdu to potřebuji?"
Externí služby vkládané přes Google Tag Manager (nástroj pro správu analytických kódů), marketingové skripty nebo reklamní systémy mohou vytvářet „dlouhé úlohy" (měřitelné metrikou TBT), které zpomalují reakce webu a zhoršují metriku INP.
Praktický tip: Projděte si jednou za čas externí skripty a doplňky a zeptejte se: „Používám ještě tento nástroj?“. Nemilosrdně mažte.
Hlavní zásada přidávání nových komponent do webu: vždy monitorujte rychlost, abyste věděli, jaký vliv bude mít přidání na rychlost.
3) Neoptimalizované obrázky
Moderní formáty WebP nebo AVIF dokážou ušetřit desítky procent velikosti oproti starým formátům JPEG nebo PNG.
Poproste podporu Shoptetu o zprovoznění ukládání obrázků do formátu WebP, který je výrazně datově efektivnější.
Důležitý je také lazy loading – odložené načítání obrázků, které nejsou ihned vidět na obrazovce. Proč stahovat fotky ze spodní části stránky, když je uživatel možná nikdy neuvidí. Toto pro vás ale Shoptet musí vyřešit sám, protože vy se do HTML kódu nedostanete.
4) Neošetřené velikost obrázků
Každý asynchronně načítaný prvek ve stránce by měl mít definovanou velikost. Může se jednat o obrázek, video, iframe nebo o jinou webovou komponentu.
V případě této e-shopové platformy jde hlavně o obrázky. Shoptet vám v tomto případě nepomůže, protože kromě konkrétních míst není možné upravovat HTML zdroj webu. Jsou zde ale možnosti, jak stejného efektu dosáhnout v CSS:
img {
min-height: 200px;
}
Možností je více. Podívejte se na náš článek, jak držet výšku prvků pro potřeby metriky CLS.
5) Špatný dodavatel úprav webu
Hledejte ověřené, dobře komunikující vývojáře s kvalitními referencemi. Upřednostňujte větší studia a dobře prověřujte levné freelance kodéry. Možná vás to překvapí, ale není nutné se soustředit na technické znalosti daného člověka nebo firmy.
Základ je komunikace. Velmi často se nám v PageSpeed.cz stává, že vývoj ani optimalizace neběží tak, jak bychom chtěli, právě kvůli nedostatečné komunikace vývojářů.
Vybírejte si lidi, kteří komunikují, jsou vstřícní a proaktivní. Tohle poznáte už v rané fázi vývoje.
Jak PageSpeed.cz pomáhá e-shopům na Shoptetu
Rychlost je vždy výsledek systematické spolupráce více stran. PageSpeed.cz zde figuruje jako garant rychlosti. Každému klientovi na Shoptetu pomáháme ve třech různých oblastech.
1) Monitoring PLUS: Hlídač rychlosti vašeho e-shopu
Optimalizace rychlosti totiž není sprint s cílem, ale nekonečný maraton. Web potřebuje stálou péči a pravidelný monitoring.
Náš monitoring PLUS funguje jako alarm. Hlídač vás upozorní na problémy dříve, než si jich všimnou zákazníci.
Díky Hlídači můžete rychlost do určité míry pustit z hlavy.
Služba poskytuje kontinuální přehled o výkonu vašeho Shoptetu, pomoc se zaměřením na konkrétní místa k optimalizaci a včasné varování při zhoršení metrik.
2) Optimalizace rychlosti vašeho Shoptetu
Máme za sebou desítky optimalizací napříč různými platformami. Naše analýzy odhalují konkrétní „nízko visící jablka", tedy problémy, které lze rychle vyřešit s velkým dopadem na rychlost.
Optimalizaci rychlosti webu Denatura.cz jsme dělali v několika fázích a spolupráce pokračuje, abychom udrželi rychlost na nových velmi dobrých hodnotách.
Pomáháme i dalším klientům na Shoptetu jako je Brainmarket.cz, Olivie.cz nebo ČistéDřevo.cz.
Portálu Srovname.cz přineslo zrychlení díky našim doporučením 25% nárůst konverzí. Rychlejší web také znamená lepší pozice v Google a nižší náklady na reklamu.
3) Spolupráce se samotným Shoptetem
Naše spolupráce přímo s vývojáři Shoptetu pak přinesla zlepšení INP všem e-shopům, zařazení většiny z nich do zelené škály hodnocení Core Web Vitals a pravděpodobně také lepší pozice v rámci SEO.
Zlepšení odezvy na interakce (metrika INP) po společné optimalizaci PageSpeed.cz a Shoptetu.
Většina webů na Shoptetu byla dle metodiky Googlu u této metriky v neoptimální, tedy oranžové hodnotě. To znamenalo nejen místy horší uživatelský prožitek, ale možná také horší hodnocení v rámci SEO nebo PPC.
Doufáme, že v této spolupráci budeme pokračovat, protože dopad optimalizace rychlosti na 40 tisících e-shopů je obrovský a misí PageSpeed.cz je zrychlit weby úplně všem.
Závěr: Shoptet má potenciál i v rychlosti, využijte ho
Shoptet dává vašem e-shopu velmi dobrý technický základ – server běží rychle a spolehlivě, výchozí šablony splní metriky Core Web Vitals.
Je jasné, že se základem si většina e-shopů nevystačí, ale se správným přístupem, se zapnutým monitoringem a dobrými vývojáři, jde zvládnout i růst komplexity e-shopu.
Pokud nevíte, kde začít, nebo hledáte konkrétní řešení pro váš Shoptet, v PageSpeed.cz jsme připraveni pomoci. Rychlost je naše práce.