Tahle případová studie bude kousek jiná, nepůjde o návštěvnost ani PNO. Podíváme se na to, jak jsme sem museli vypořádat s přechodem, redesignem a následnou technickou optimalizaci našeho e-shopu vzdusin.cz. 

Když jsme se na začátku roku 2020 vytvořili značku Aerium, rozhodli expandovat na slovenský a maďarský trh, chtěli jsme přijít i s novým svěžím vzhledem e-shopu a novým backendem. Původní systém byl již více jak šest let starý a neustálé úpravy přestaly dávat smysl.

Stále běžíme na open source platformě OpenCart, i když již značně upravené naším potřebám. Po půl roce fungovaní slovenské a maďarské verze přišlo i na českou verzi, postupně jsme přepsali starý kód, spojili všechny 3 mutace do jedné administrace, a nakonec vlastně i do jednotného vzhledu.

Byl to náročný rok, a to nejen kvůli koroně, ale nám se tohle spojení podařilo a objednávky se začali sypat. Co jsme ale zanedbali byla optimalizace pro návštěvníky, nemyslíme tím design, ale právě rychlost načítání webu, a hlavně na mobilech, které tvoří přes 60 procent návštěv našeho e-shopu.

Jak jsme na tom vlastně byli po spuštění?

No, řekněme si narovinu, nic moc, open source platforma, množství externích modulů, a ještě větší množství vlastních úprav dospěli k tomu, že web byl prostě pomalý, vyjádřeno čísly, jsme ze 100 bodů dle hodnocení Page Speed Google měli na mobilu jen 23 bodů a pro počítače to bylo 45. Věděli jsme že tady máme dluh který je potřebné dodělat, navíc s myšlenkou nato, že to nemůžeme odkládat protože Google od jara 2021 plánuje weby se slabou optimalizací penalizovat a zobrazovat ve výsledcích na nižších místech.

Úkoly byli jasné, výsledky z Googlu nám přesně potvrdili, kde jsme udělali chyby. Tak jsme se do toho pustili.

Co jsme udělali

Prvním krokem bylo navýšení prostředků na serveru, přeci jen, byl nastaven výkonem na slovenskou a maďarskou verzi, která sice rostla, ale nebyla tam taková návštěvnost jako když jsme přidali českou verzi do společné multisite struktury.

Takže jsme navýšili logicky navýšili počet procesorů a počet RAM. Tohle jinak doporučuji u každé větší aplikace/ e-shopu. Sice se vám může zdát, že máte dostatečný výkon, ale přijdou Vánoce, nárůst návštěv je několikanásobný a tam se ukáže zda to váš server zvládá. Není nic horšího než to ladit během hlavní sezóny.

Optimalizace kódu

Poté jsme se vrhli na optimalizaci kódu, vyhodili nepotřebné moduly, statické věci jako například strom kategorii již nenatahujeme z databáze ale vypisujeme ze souboru. Prostě jsme si kód museli znovu projít a najít věci které jsme počas vývoje prohlédli, nebo nenapsali úplně správně. I přesto, že se na webu mohlo zdát, že tam žádná změna není a vypisuje to stále to stejné.

Dalším důležitým krokem byla optimalizace v tomto případě zmenšení velikosti externích skriptů a také css souborů. Pomocí minifikace jsme 3 css soubory spojili do jednoho a rázem místo 130 kB stačilo 28 kB dat. To stejné jsme udělali i pro javascript, kde jsme kód který nebyl kritický k načtení při návštěvě stránky posunuli do patičky. Typickým příkladem byl efekt pro fotogalerii. Zde je velice užitečné se pohrát s možnostmi pro DEFER a ASYNC, ale to je spíše pro vašeho programátora.

Takhle to vypadalo u nás před danou změnou:

Optimalizace obrázků

Důležitým bodem byla optimalizace obrázků, Opencart sice vykresluje obrázky v zmenšené formě, podle nastavení v administraci, co znamená že místo obrázku o velikosti 3000x1000px vykreslí zmenšený 500x200px ale i tak když máte web plný obrázků produktů jako je to u nás, tak není často potřeba načítat obrázky v patičce nebo mimo pole které zákazník vidí při návštěvě webu. Princip je ten, že všechny tyhle obrázky nahradíte jedním zástupným obrázkem, tzn placeholderem a pomocí kódu docílíte toho že obrázky produktů se načtou až když k nim uživatel zaskroluje. Z toho je určitě jasné že takhle místo 30 obrázků načtete jenom jeden a tudíž vysoce zrychlíte načtení webu.

 

Nezapomínejme i na formát obrázku. Jestli chcete ušetřit velikost přenášených dat, použijte WebP formát, který má nejmenší velikost bez ztráty kvality obrázku. I Google Page insights vás na to upozorní.

Statické části webu je důležité přidat do cache. To je vlastně paměť prohlížeče, takže uživatel při další návštěvě nebude muset stahovat některé obrázky a soubory opakovaně. 

Použití CDN

Zásadní změna nastala i při nasazení externí služby Cloudflare (www.cloudflare.com). Kouzlo zrychlení vašeho webu spočívá v tom, že díky CDN se jeho části nenačítají přímo z vašeho serveru, ale z datového centra, které je vašemu návštěvníkovi geograficky nejblíž. Fyzická vzdálenost má totiž znatelný vliv na dobu načítání.

Rychlost ale není jediná výhoda. Používáním CDN ušetříte i spousty přenesených dat u vašeho hostingu. Pokud máte u hostingu datové kvóty a za jejich překročení musíte platit, díky CDN můžete ušetřit zhruba 30%.

Jaký byl výsledek

Jak jsme tedy dopadli? Z již zmiňovaného čísla 23 jsme vyletěli na číslo 72 pro mobily a 90 pro počítače.

 

Což je skvělé hodnocení. A jistá záruka do budoucna, že bude náš web dostatečně rychlý a dostupný našim zákazníkům a nebudou muset dlouho čekat načtení našich stránek.

ŽÁDOST O KONZULTACI ZDARMA

Máte dotaz či poptávku? Pošlete nám zprávu a my vám zavoláme zpět.

Za první telefonickou konzultaci nic neplatíte.

Odesláním souhlasíte s tím, že zpracujeme výše uvedené údaje za účelem Vašeho kontaktování v souvislosti s Vaším dotazem či poptávkou.

Nechcete čekat? Volejte hned.

+420 797 724 661  

Rádi Vás uslyšíme Po - Pá 08:00 - 17:00

Pomáhali jsme značkám

Fleurop logo
Concept logo
My Fair Landia logo
Logo Vzdušín
KetoFit logo
VŠMVV logo
Remko logo
Wellmall logo
esthetx
Incomputer logo
Zdravýspánek.cz logo
Laser esthetic logo
Jake & James logo
Nature No Tea logo
Bioplace logo
Wooden Hero logo
Silver Republic logo
Tvůj lék logo