Jak zrychlit webové stránky a e-shop?

Neztrácejte zákazníky kvůli dlouhému načítání webu

Začněme zprudka několika statistikami. Je známo, že s pomalými stránkami si dláždíte cestu vstříc nižšímu obratu, opuštěným košíkům a horším pozicím ve vyhledávání. Aby byli návštěvníci vaší stránky ochotni nakoupit či dokončili jiný cíl, musí se jim s webem pohodlně pracovat.

• 37 % návštěvníků opustí vaši stránku, pokud doba jejího načítání překročí 5 vteřin,
• 70 % zákazníků přiznává, že rychlost načítání stránky má zásadní vliv na jejich nákupní chování,
• 49 % uživatelů mobilních telefonů odradí pomalé načítání webu při online nakupování a přechází proto na konkurenční web.

6 bodů, které ovlivňují rychlost (nejen vaší) stránky

Všimli jste si už někdy, že se vám ta samá stránka načetla napodruhé rychleji? Doba načítání webu se totiž odvíjí od mnoha faktorů. My jsme sepsali ty důležité do šesti bodů:

• Načítání kódů a stylů webu
• Velikost obrázků
• CSS
• JavaScript
• Webhosting
• Stabilita připojení

Pojďme teď každý z těchto důvodů prozkoumat blíže. 

1. Zrychlení webu vhodným obsahem

Texty, obrázky, videa – stručně řečeno obsah. To, kvůli čemu lidi na váš web chodí. A stačí udělat několik změn, aby se loading webové stránky značně zvýšil. V prvé řadě klientům nastavujeme načítání klíčových částí webu skrze preload (to, co vidí návštěvník jako první – menu, carousel,...). Pro zbytek stránky, ke kterému teprve doscrollujete a tudíž se může zobrazit o okamžik později, využíváme tzv. lazyloadingu. 

My využíváme lazyload na obrázky, videa, iframe mapy, pdf soubory nebo svg ikony editovatelné z CMS. Jeho výhodou je fakt, že sám dokáže automaticky zjistit, jestli umí daný prohlížeč zobrazit koncovku webp. Pokud ne, vloží soubor ve formátu jpg nebo png. Zároveň si zjistí šířku samotného zařízení, které návštěvník používá, a podle něj použije obrázek v ideálním rozměru.

Cachování neboli zapnutí mezipaměti

Viditelnou změnu v rychlosti načítání webu vidíme i díky tzv. cachování obsahu webu. O čem je řeč: při prvním zobrazení vaší webové stránky se návštěvníkovi uloží většina jejího vzhledu do mezipaměti počítačového zařízení. Jakmile někdo zavítá na váš web opakovaně, stránka se načte rychleji díky dříve uloženým datům. Smysl nám dává cachovat jakékoliv soubory na souborovém systému (například obrázky, videa,...) a veškerý obsah vygenerovaný z CMS.

Cachování zároveň v pravidelných intervalech přenačítá a přeukládá obsah. To je také důvodem, proč jako administrátor webu nevidíte své úpravy ihned po uložení, ale s menším zpožděním. Tento menší diskomfort však za to zrychlení, které cachování dokáže, stojí.

2. Komprimace obrázků zmenší velikost webu

Jedním z nejčastějších problémů, na které u pomalých webových stránek narážíme, jsou nezkomprimované obrázky. Vždy proto v první řadě optimalizujeme velikost obrázků. V PUXdesign se nám osvědčil formát webp a následné generování obrázků podle velikosti zařízení. Využíváme proto odlišný formát pro klasický desktop, tablet nebo mobilní telefon. Znamená to sice více práce, ale věřte, že se vyplatí.

Stojí za to také ukládat obrázky s rozlišením na míru umístění webu (úplně si vystačíte se 72 DPI). A pokud obrázek není to první, co návštěvník na stránce vidí, použijeme už zmíněný lazyloading.

3. Provádíme minifikaci CSS kódu

Pokud jste někdy stahovali nebo exportovali zazipovaný soubor, snadno pochopíte užitečnost minifikace CSS zdroje. Jedná se o to, abyste všechny CSS soubory sjednotili do jednoho centrálního. Načítání webu se tímto krokem viditelně zrychlí. Druhým krokem je odstranit všechny nefunkční znaky či mezery v samotném kódu. Jsou totiž zbytečné a načítání webu jen zdržují.

4. Nezapomínáme ani na minifikaci JavaScriptu

Obdobně jako u CSS kódu, i pro JavaScript lze provést minifikaci. Všechny použité soubory spojíte v jeden hlavní JavaScript. Pro plynulý chod stránky vložíte jen nejdůležitější JavaScript. Na všechny ostatní dodatečné pluginy, jsou-li na webu opravdu potřeba, pak využijte vložení přes requirejs.

Pozornost si zaslouží i Facebook Pixel nebo Hotjar 

Nemusí to být na první pohled patrné, ale svou roli v rychlosti webové stránky mohou sehrát i měřicí JavaScripty. Takový Facebook Pixel nebo Hotjar proto na webech nastavujeme tak, aby se jejich funkce zapnula až 1,5 sekundy po načtení stránky. Díky tomuto posunutí nemají měřicí kódy negativní dopad na dobu prvotního načítání obsahu webu.

5. Zrychlit web lze i vhodným hostingem

Svou roli v rychlosti načítání stránky hraje i hosting. Chcete české stránky zaměřené na tuzemské návštěvníky? Pak dává smysl mít i webový hosting geograficky umístěný v Česku. Mějte na paměti dvě věci: zjistěte si jeho historii a pečlivě si ověřte,jestli (a jak časté) jsou u něj výpadky. Určitě nechcete webové stránky, které v pravidelných intervalech nefungují. Nakonec si ještě ověřte, jak funguje technická podpora hostingu. Pokud někdy půjde do tuhého, budete ji potřebovat.

Rychlý web i s trafficem z celého světa

A co když jste klient, který vyžaduje web zobrazující se rychle nejen v Česku, ale po celém světě? I s tím si v PUXdesign umíme poradit. Pro hosting webů s mezinárodním cílením používáme cloudové služby jako Amazon AWS nebo Microsoft Azure v kombinaci s CDN (content delivery network).

Jinou variantou, se kterou pracujeme, je řešení headless CMS Orchard ve spojení s javascriptovým frameworkem Gatsby. Touto kombinací vystavujeme do CDN jen statické HTML, které se načítá opravdu velmi rychle.

6. Rychlost webu vs. mobilní zařízení

Není tajemstvím, že značná část návštěvníků přichází na web z mobilních zařízení. Respektive mobilní web traffic tvoří něco přes 50 % celosvětového pohybu na webu. Proto je tak důležité, abyste měli dostatečně rychlé načítání stránek pro telefony. Berte v potaz také to, že návštěvníci z mobilů se často připojují skrze data – tomu by měly odpovídat i velikosti obrázků, dokumentů nebo třeba gifů. Nic totiž nerozčílí člověka tolik, jako když mu návštěva jedné webové stránky spotřebuje data na celý nadcházející měsíc.

Jak změřit rychlost svého webu?

Všechno důležité už víte. Teď už zbývá jen zjistit, kde si můžete rychlost webu změřit, ideálně zdarma. K tomuto účelu slouží například Google Page Speed, WebPageTest, TestMySite, Pingdom Tools či GTmetrix. V Česku z tohoto výčtu mezi uživateli bezkonkurenčně vede Google Page Speed. V PUXdesign pracujeme nejčastěji právě s Google Page Speed nebo Pingdom.

Tito pomocníci nám dokáží – mimo měření rychlosti – určit i problematická místa na webu, která je potřeba opravit. Občas se i u optimalizovaného webu objeví nová doporučení nebo pravidla, takže se je neustále snažíme hlídat a přizpůsobovat se jim.

Nad některými věcmi se lze zamyslet už při samotné tvorbě webu: potřebuji mít hromadu externích skriptů na webu? Nemám špatnou strukturu zdrojového kódu? Jsou použité obrázky zkomprimované? Některé z úkonů zvládnete určitě i sami.