Pomalý e-shop nie je len technický problém — je to obchodný problém. Výskum Googlu z roku 2023 ukázal, že každých 100 ms oneskorenia načítania stránky znižuje konverzný pomer o 0,3 až 1 %. Štúdia Deloitte zistila, že zlepšenie rýchlosti o 0,1 sekundy viedlo u maloobchodných e-shopov k zvýšeniu konverzií o 8,4 % a priemernej hodnoty objednávky o 9,2 %. Napriek tomu väčšina majiteľov e-shopov rieši pomalé načítanie až vo chvíli, keď im začnú klesať tržby — a aj vtedy hľadajú riešenie na nesprávnom mieste.
Najprv merajte, potom opravujte
Pred každou optimalizáciou potrebujete vedieť, kde presne problém leží. Najčastejšia chyba je nasadiť nový hosting alebo skomprimovať pár obrázkov a potom sa čudovať, prečo sa nič nezlepšilo.
Základné nástroje, ktoré by ste mali poznať:
Google PageSpeed Insights (pagespeed.web.dev) — zadajte URL e-shopu a dostanete skóre od 0 do 100 pre mobilnú aj desktopovú verziu. Dôležité sú dáta z reálnych používateľov (CrUX data), nie len laboratórny test. Skóre pod 50 na mobile je kritický stav.
Core Web Vitals sú tri metriky, ktoré Google používa ako signál pre zoraďovanie vo vyhľadávaní:
| Metrika | Čo meria | Dobrá hodnota |
|---|---|---|
| LCP (Largest Contentful Paint) | Ako rýchlo sa načíta hlavný obsah stránky | pod 2,5 s |
| INP (Interaction to Next Paint) | Ako rýchlo stránka reaguje na kliknutie | pod 200 ms |
| CLS (Cumulative Layout Shift) | Ako veľmi stránka "skáče" pri načítaní | pod 0,1 |
Google Search Console → sekcia "Prostredie pre web" zobrazí, ako si stojíte na základe dát od reálnych návštevníkov vášho webu — nie simulovaného testu.
Príklad z praxe: Autodíly Procházka z Pardubíc mali PageSpeed skóre 38 na mobile. Po audite zistili, že hlavný problém je LCP 6,8 s spôsobený obrázkom prvého produktu v hero sekcii, ktorý mal 2,1 MB a nebol prednačítaný. Samotná oprava tohto jedného problému posunula LCP na 2,9 s a celkové skóre na 61.
Optimalizácia obrázkov: najväčší rýchlostný zisk za najmenej práce
Obrázky tvoria priemerne 50–70 % celkovej váhy stránky e-shopu. Sú to produktové fotky, bannery, ikony, logá. A drvivá väčšina e-shopov ich servíruje nesprávne.
Formát: Prejdite na WebP. Je to formát podporovaný všetkými modernými prehliadačmi a priemerne je o 25–35 % menší ako JPEG pri rovnakej vizuálnej kvalite. Ak máte Shoptet alebo WooCommerce, existujú pluginy, ktoré konverziu urobia automaticky. Vlastné riešenie by malo konvertovať obrázky pri nahrávaní.
Veľkosť: Servírujte obrázky v rozlíšení, v ktorom sa skutočne zobrazujú. Produktová fotka, ktorá sa zobrazuje 400×400 px, nemusí mať 2000×2000 px. Použite atribút srcset pre rôzne veľkosti obrazoviek.
Lazy loading: Obrázky, ktoré sú pod viditeľnou časťou stránky, nie je treba načítavať okamžite. Atribút loading="lazy" na <img> tagoch hovorí prehliadaču, aby s nimi počkal, kým sa používateľ nescrolluje bližšie. Výnimka: prvý obrázok na stránke (hero alebo prvý produkt) nikdy nedávajte do lazy loadingu — ten naopak prednačítajte pomocou <link rel="preload">.
Kompresia: Nástroje ako Squoosh, ImageOptim alebo automatizované pipeline (Sharp pre Node.js) dokážu zmenšiť súbory o 40–80 % bez viditeľnej straty kvality.
Praktický tip: Vykonajte rýchly audit — otvorte DevTools v Chrome (F12), záložka Network, filter Img, reload stránky. Zoraďte obrázky podľa veľkosti. Horná päťka pravdepodobne tvorí 80 % váhy obrázkov — a práve tam začnite.
JavaScript bloat: čo brzdí váš e-shop
Priemerná stránka e-shopu dnes obsahuje 400–600 kB JavaScriptu. Pred desiatimi rokmi to bolo 50–80 kB. Väčšina tohto nárastu neprináša žiadnu hodnotu pre zákazníka — sú to analytické skripty, chatboty, skripty A/B testovacích nástrojov, widgety recenzií a tracking pixely.
Každý z týchto skriptov:
- blokuje alebo spomaľuje vykresľovanie stránky
- spotrebúva procesor zariadenia (kritické na starších telefónoch)
- pridáva sieťové požiadavky
Čo auditovať a kto je vinník:
| Typ skriptu | Typická váha | Naozaj ho potrebujete? |
|---|---|---|
| Google Tag Manager (s 15 tagmi) | 80–150 kB | Auditujte, čo v GTM máte |
| Facebook Pixel | 50 kB | Len ak aktívne inzerujete |
| Hotjar / Microsoft Clarity | 60–120 kB | Len ak dáta aktívne čítate |
| Live chat widget | 80–200 kB | Zvážte, koľko konverzií generuje |
| Page builder (Elementor a pod.) | 200–400 kB | Najväčší problém |
| Recenzné widgety tretích strán | 30–80 kB | Zvážte vlastnú implementáciu |
Page buildery sú špeciálna kategória. Nástroje ako Elementor alebo Divi generujú obrovské množstvo zbytočného CSS a JavaScriptu. Ak váš e-shop stojí na WordPresse s Elementorom, samotný page builder môže zodpovedať za 30–50 % celkovej váhy stránky.
Príklad z praxe: Módny butik Elegance Praha prešiel z WooCommerce s Elementorom na vlastnú šablónu písanú "natvrdo". Bez akejkoľvek inej zmeny klesla váha JavaScriptu z 890 kB na 180 kB. PageSpeed skóre na mobile vzrástlo z 41 na 79. Konverzný pomer sa zlepšil o 14 % za prvý mesiac.
Server-side rendering vs. client-side pre produktové stránky
Toto je architekturálne rozhodnutie, ktoré zásadne ovplyvňuje výkon — a mnohé e-shopy ho robia nesprávne.
Client-side rendering (CSR): Prehliadač stiahne prázdny HTML súbor, stiahne JavaScript, spustí ho, JavaScript teprve načíta produktové dáta a vykreslí stránku. Výsledok: pomalé prvé načítanie, zlé LCP, problémy s indexovaním.
Server-side rendering (SSR): Server vráti hotový HTML s produktovými dátami priamo v odpovedi. Prehliadač vykreslí stránku okamžite. JavaScript sa pridá až potom pre interaktivitu.
Pre produktové stránky e-shopu je SSR takmer vždy správna voľba. Dáta sa menia relatívne málo (sklad, cena), stránky sú indexované Googlom a zákazníci ich navštevujú po prvýkrát — nemajú nič v cache.
Praktický tip: Ak používate Next.js, používajte getStaticProps pre produktové stránky s revalidáciou každých 60–300 sekúnd (ISR). Pre produkty s veľmi dynamickými cenami alebo zásobami použite getServerSideProps. Vyhýbajte sa useEffect na načítavanie základných produktových dát — to je klasická CSR chyba, ktorá poláme vaše LCP.
Optimalizácia pokladne: kde zákazníci skutočne odchádzajú
Priemerné opustenie košíka je 70 %. Časť z toho je nevyhnutná — ľudia porovnávajú ceny, zatvoria záložku, vyrušia ich. Ale veľká časť je spôsobená zlou pokladňou.
Faktory, ktoré zákazníkov odrádzajú:
Povinná registrácia je zabijakom konverzií. Štúdia Baymard Institute zistila, že 26 % zákazníkov opustí pokladňu, keď sú nútení si vytvoriť účet. Vždy ponúknite možnosť nákupu ako hosť — registráciu môžete ponúknuť po dokončení objednávky.
Počet krokov pokladne: ideál sú 2–3 kroky (košík → doprava a platba → potvrdenie). Každý extra krok spôsobuje odchody. Informácie o doprave a platbe, kontaktné údaje a fakturačná adresa môžu byť na jednej stránke.
Transparentnosť nákladov: zákazníci neznášajú prekvapenia. Poštovné a poplatky ukážte čo najskôr — ideálne už v košíku. Ak sa zákazník dozvie o poplatku za platbu kartou až v poslednom kroku, pravdepodobne odíde.
Platobné metódy: Čo zákazníci v SR a ČR očakávajú:
- Platobné karty (Visa, Mastercard)
- Bankový prevod / platba QR kódom
- Dobierka (stále 15–25 % objednávok v mnohých segmentoch)
- Apple Pay / Google Pay (rýchlo rastie, najmä na mobile)
- Odložená platba (užitočná pre vyššie priemerné hodnoty objednávky)
Príklad z praxe: Športový e-shop RunCzech pridal tlačidlá Apple Pay a Google Pay. Na mobilných zariadeniach vzrástla konverzia v pokladni o 22 % — zákazníci nemuseli opisovať číslo karty na malej klávesnici.
Mobilný výkon: priorita číslo jedna
V priemere pochádza 60–70 % návštevnosti e-shopov z mobilných zariadení. Napriek tomu je väčšina e-shopov optimalizovaná primárne pre desktop.
Mobilné testovanie musí prebiehať na skutočných zariadeniach, nie len v simulácii Chrome DevTools. Telefón za 200 € s priemerným 4G pripojením je realistický model vášho zákazníka. PageSpeed test v režime "Mobile" simuluje práve tieto podmienky.
Špecifické mobilné problémy:
Tapové ciele príliš malé: tlačidlá a odkazy musia mať minimálne 44×44 px plochu pre kliknutie. Malé tlačidlo "pridať do košíka" znamená, že zákazník naň musí niekoľkokrát kliknúť, čo je frustrujúce a spôsobuje odchody.
Načítanie fontov: systémové fonty sa načítavajú okamžite, vlastné webfonty pridávajú 50–300 ms latencie. Obmedzte sa na 1–2 vlastné fonty a použite font-display: swap.
Zbytočné presmerovania: každé presmerovanie z http:// na https://, z www. na bez www., alebo z mobilnej subdomény na hlavnú doménu pridáva 100–300 ms. Servery by mali odpovedať priamo bez reťaze presmerovaní.
Rýchle výhry vs. dlhodobé opravy
Nie každá optimalizácia stojí rovnakú investíciu. Tu je prehľad toho, čo možno urobiť rýchlo a čo vyžaduje väčšiu prácu:
| Problém | Náročnosť opravy | Potenciálny dopad na výkon |
|---|---|---|
| Kompresia a prevod obrázkov na WebP | Nízka (plugin alebo skript) | Vysoký |
| Pridanie lazy loadingu na obrázky | Nízka (1 atribút) | Stredný |
| Odstránenie nepoužívaných tracking skriptov | Nízka (GTM audit) | Stredný až vysoký |
| Pridanie guest checkout | Nízka (konfigurácia) | Vysoký (konverzie) |
| Pridanie Apple/Google Pay | Nízka (integrácia platobnej brány) | Vysoký (mobile konverzie) |
| Prechod na CDN pre statické súbory | Stredná | Stredný |
| Preload kritických fontov a obrázkov | Stredná | Stredný |
| Prechod z CSR na SSR pre produktové stránky | Vysoká | Veľmi vysoký |
| Prepísanie šablóny bez page builderu | Vysoká | Veľmi vysoký |
| Optimalizácia databázových dotazov | Vysoká | Veľmi vysoký (pri veľkých katalógoch) |
Vždy začnite s nízkou náročnosťou a vysokým dopadom — to je kvadrant, kde dostanete najlepšie výsledky za najmenej peňazí. Prepísanie architektúry má zmysel až potom, čo ste vyčerpali jednoduchšie možnosti.
Praktický tip: Nastavte si automatické mesačné sledovanie Core Web Vitals cez Google Search Console alebo nástroje ako Sentry Performance. Výkon sa časom degraduje — každý nový plugin, každý nový tracking skript pridáva trochu váhy. Bez merania to nezistíte, kým problém nebude veľký.
V BASAD Studios stavíme e-shopy s dôrazom na výkon od prvého riadku kódu — žiadne zbytočné page buildery, optimalizované obrázky, SSR tam, kde má zmysel. Ak máte pocit, že váš e-shop by mohol zarábať viac, ozvite sa nám alebo sa pozrite na našu službu e-shopy.