3

oblasti optimalizace

3

praktické návody

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

   [digilabs_forms_content_lock form="odemceni-obsahu" conditional="popup“]  

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ý.

[/digilabs_forms_content_lock]

ŽÁDOST O KONZULTACI ZDARMA

Jste připraveni posunout své podnikání na další úroveň?

Jaký máte celkový rozpočet na marketing a reklamu?

K jaké investici se nejvíce blížíte? Tuto informaci potřebujeme proto, abychom si udělali lepší obrázek o rozsahu možné spolupráce.
20 000 KčS takovým rozpočtem vám v marketingu nedokážeme pomoci. A pravděpodobně ani naše konkurence.
50 000 KčPočítejte spíše s jednorázovými pracemi. Budeme se snažit, abyste příště klikli více doprava!
200 000 KčMáte menší projekt? Tento rozpočet nám na jeho pravidelné opečovávání bude stačit.
500 000 KčInvestice do kvalitního marketingu se vyplatí. Děkujeme, že jste si toho vědomi!
1 000 000 KčJde vidět, že to s vaší snahou myslíte vážně. Využijeme všech dostupných sil. Pozor — po zboží ve vašich skladech se jen zapráší.
100 000 000 KčStátní zakázky neděláme. Nebo jste vyhráli v loterii?

Odesláním formuláře souhlasíte se zpracováním Vašich údajů společností Next Vision pro účely kontaktování Vaší osoby v rámci odeslané poptávky či dotazu.

Pokud neradi čekáte, můžete nám rovnou zavolat.

+420 797 724 661

Petr Myšák, jednatel, kontakt

 

Spojeni budete s Petrem, který rád pomůže vašemu byznysu.
Telefonicky se s námi můžete spojit od pondělí do pátku v časech 8:00 - 16:30

Přečtěte si i další příběhy

Expanze e-shopu do zahraničí, do rumunska, PPC a SEO

Případová studie

Jak jsme za první rok prodali elektroniku za 13 mil. Kč na novém trhu

13mil. Kč tržeb
5měsíců do dosažení profitability
13% průměrné PNO
30% podíl tržeb Emagu
Zobrazit případovou studii
Případová studie Aerium privátní značka

Případová studie

Případová studie SEO a PR: Jak jsme prodali tisíce elektrokoloběžek vlastní značky AERIUM

198% nárůst prodejů
65% nárůst hledanosti brandu
42% nárůst návštěvnosti z Organicu
15% celkové PNO
Zobrazit případovou studii

Pomáhali jsme značkám

Fleurop logo
Concept 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