Tato případová studie není úplně typická. Nepůjde v ní o návštěvnost ani o podíl nákladů na obratu (PNO). V hlavní roli bude zvýšení rychlosti webu. Jak jsme probudili k čilému životu do té doby docela lenivé stránky? Co vše jsme museli udělat lépe, aby byl partnerský e-shop vzdusin.cz o 200 % rychlejší?

Pěkný, ale pomalý web

Na začátku roku 2020 jsme se rozhodli s projektem vzdusin.cz expandovat pod značkou Aerium na slovenský a maďarský trh. Po šesti letech úprav stávajícího systému jsme se pustili do jeho zásadnějších změn. Chtěli jsme především osvěžit vzhled e-shopu a předělat jeho správcovskou část (backend). 

Zůstali jsme věrni otevřené (Open source) platformě OpenCart, byť již značně upravené podle našich potřeb. Po půl roce fungování slovenské a maďarské verze došlo i na českou verzi. Postupně jsme přepsali starý kód a spojili všechny tři mutace do jednotné administrace s totožným vzhledem.

Byl to náročný rok. Nejen kvůli koroně. Nicméně tohle spojení se nám podařilo a objednávky se začaly sypat. Co jsme však zanedbali, byla optimalizace stránek. S designem jsme byli spokojeni, ale rychlost načítání webu nás trápila. Zejména na mobilech, přes které přistupuje na e-shop více jak 60 % návštěvníků.

Řekněme si na rovinu, web byl prostě pomalý. Open source platforma, množství externích modulů, spousta vlastních úprav. To vše stálo za nelichotivým výsledkem v hodnocení PageSpeed Google. V něm jsme ze 100 maximálně dosažitelných bodů získali pouze 23 u mobilů a 45 u počítačů. Slabota. Bylo jasné, že musíme zapracovat na zlepšení. Zejména když Google od jara 2021 plánuje weby se slabou optimalizací penalizovat a zobrazovat je ve výsledcích na nižších místech.

Výsledky z Googlu nám přesně potvrdily, kde jsme udělali chyby. Bylo co opravovat.

Zrychlujeme

Prvním nápravným krokem bylo posílení serveru. Přeci jen byl nastaven výkonem na slovenskou a maďarskou verzi. Ta sice rostla, ale návštěvnost neměla takovou, jako když jsme přidali do společné sítě webů (multisite) českou mutaci.

Takže jsme logicky zvýšili počet procesorů a pamětí s náhodným přístupem (RAM). Mimochodem tohle 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 a nárůst návštěv je několikanásobný. Pak se teprve ukáže, zda to váš server zvládá. Není nic horšího než ladění během hlavní sezóny.

Optimalizace kódu

Poté jsme se vrhli na optimalizaci kódu. Vyházeli nepotřebné moduly a co je statické – jako například strom kategorií – již nenatahujeme z databáze, ale vypisujeme ze souboru. Prostě jsme kód museli znovu projít a odhalit položky, které jsme během vývoje zanedbali. Taková změna sice není na podobě webu vidět, ale pro optimalizaci je důležitá.

Dalším podstatným krokem bylo zmenšení velikosti (minifikace) externích skriptů a také CSS souborů. Tři takové soubory jsme spojili do jednoho a rázem místo 130 kB stačilo 28 kB dat. To stejné jsme udělali i pro JavaScript. Kód, který nebyl kritický k načtení při návštěvě stránky, jsme posunuli do patičky. Zrychlení pak můžeme pozorovat typicky ve fotogalerii. Zde je velice užitečné si pohrát s atributy Defer a Async. To už bychom se ale ponořili hlouběji do programování.

Slabé časy před optimalizací

Optimalizace obrázků

Důležitá byla také optimalizace obrázků. OpenCart je sice vykresluje ve zmenšené podobě podle nastavení v administraci, což znamená, že původní velikost obrázku např. 3000 x 1000 px zredukuje na 500 x 200 px. To ale nemusí stačit. Když máte jako my web plný obrázků, mnohdy je není potřeba načítat v patičce nebo mimo pole, které zákazník vidí. Princip spočívá v náhradě více obrázků jedním zástupným, tzv. placeholderem. Pomocí kódu pak docílíte načtení obrázků produktů, až když k nim uživatel zaskroluje. Místo 30 obrázků načtete jenom jeden, čímž web zrychlíte.

 

Nezapomínejme i na formát. Jestli chcete snížit množství přenášených dat, použijte formát WebP. Kvalitu obrázku zachová a je nejúspornější. I Google PageSpeed Insights vás na to upozorní.

Statické části webu je pak 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í sítě pro doručování obsahu (Content Delivery Network – CDN)

Zásadním způsobem se projevilo 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íže. Vzdálenost má totiž na dobu načítání znatelný vliv.

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

Web rychlejší o více jak 200 % pro mobily a o 100 % pro počítače

A jak jsme dopadli? Z 23 bodů pro mobily jsme vyletěli na 72 a ze 45 bodů pro počítače na 90. To je skvělé hodnocení. A zároveň jistá záruka do budoucna, že zákazníci nebudou trpět při zdlouhavém načítání stránek, protože web je dostatečně rychlý a dostupný.

ŽÁ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