Způsob zvýšení zisku e-shopu č. 5: Rychlejší načítání stránek

Rychlost načítání stránek je často opomíjený faktor, který však může mít velký vliv na obchodní výkonnost webu. Shopzilla zvýšila tržby o 12 % po provedení základních změn. Podle případové studie KISSmetrics stojí sekundové zpoždění u komerčního webu, který vydělává 2 000 Kč denně, okolo 50 000 Kč za rok. Podívejte se na několik jednoduchých způsobů, jak zrychlit váš web.

Proč se zajímat o rychlost načítání stránek? Protože spadá jak pod SEO, tak pod UX. Ovlivňuje zisk a oblíbenost webu. Vyhledávače se snaží předkládat uživatelům kvalitní výsledky. A s tím souvisí nejen hodnota informací, ale i uživatelský prožitek.

Uživatelé jen neradi čekají. Je prokázáno, že pomalé weby méně používají a častěji je opouštějí. V dnešní době navíc mnoho z nás používá k prohlížení stránek mobilní zařízení. Zboží si často „osaháme“ pomocí mobilu nebo tabletu, a když jsme rozhodnuti ke koupi, použijeme počítač. Rychlost je tedy primární.  

Co je pomalý web?

Přestože je každý web unikátní, existují určité společné znaky. Zpomalené stránky odrazují návštěvníky. Mnoho chyb je v praxi způsobených ignorováním základních pravidel. Naštěstí i aplikace několik jednoduchých postupů dokáže někdy i velké změny k lepšímu.

Zrychlování webu v kostce

Oblast rychlejší načítání stránek je rozsáhlá. V tomto článku jsem se zaměřil pouze na nejčastější problémy. Pokud se o této tématice chcete dozvědět více informací, doporučuji kurz Adama Martinika.

Mezi běžné problémy patří:

• obrázky;
• JavaScript a CSS.

Obrázky a rychlost načítání stránek

Podívejme se na typický nešvar. Obrázky jsou typem obsahu, který často zpomaluje web. Na co se tedy zaměřit?  

Zkontrolujte váš web pomocí vhodného nástroje, například PageSpeed Insights nebo WebPagetest. Zkuste také stránky projít z pohledu robota vyhledávače – se zakázaným JavaScriptem a cookies. Kontrolujte velikost obrázků a pokud bude příliš velká, použijte některý z níže uvedených postupů.

Jak zvýšit rychlost stránek pomocí úprav obrázků:

• používání náhledových obrázků místo originálů;
• JPG formát pro fotky, PNG pro grafy;
• definování velikosti předem;
• komprese;
• kešování – načítání z mezipaměti.

Používání náhledových obrázků místo originálů – mnoho e-shopů i jiných webů zobrazuje weby v kategoriích tím způsobem, že pouze změní rozměry u originálů. Tento postup není vhodný, protože u větších souborů a většího počtu položek je výsledný objem dat zbytečně velký. Řešením je tedy vytvoření skutečně náhledových obrázků s menší velikostí.

Dalším faktorem je formát obrázku. U běžných fotek je vhodnější jpg, u grafů png.

Dobrou metodou je definování velikosti obrázku předem (atributy width a height). Pokud tyto atributy nejsou vyplněny, obrázek se zobrazí později a může narušit uživatelské pohodlí tím, že změní rozmístění prvků na stránce.  

Komprese obrázků je efektivní způsob, jak původní obsah zmenšit, aniž by došlo k výrazné ztrátě kvality. Formát png se dá komprimovat bezztrátově, formát jpg se zvolenou ztrátou. Kompresi můžete použít jednorázovou, nebo automatickou. V prvním případě oceníte aplikace jako TinyPNG a JPEG Optimizer. Při automatické komprimaci se používají různé knihovny. V PHP jde například o imagejpeg, u Ruby rmagick.           

Jelikož se obrázky mění méně často než jiné druhy obsahu, je vhodné u nich využívat kešování. Obrázky se uloží a načítají z mezipaměti, čímž se zvýší rychlost zobrazování stránek. Způsobů, jak používat kešování, je více. Jejich základní přehled najdete zde. Kešování můžete samozřejmě využít i u dalších externích souborů (JavaScript, CSS, fonty…).

Oblíbenou metodou je také funkce CSS Sprites. Pokud máte více malých obrázků (typicky ikony sociálních sítí), je lepší místo načítání každého obrázku zvlášť použít jeden hlavní, který obsahuje jednotlivé prvky. Tím se sníží počet dotazů na server.

V případě rozsáhlých webů jsou často používány CDN. Jedná se o sítě určené k hromadné distribuci obsahu. Výhodou je, že nabízejí spolehlivost, rychlost a také to, že (většinou) platíte pouze za data, která se skutečně zobrazí.

JavaScript (+ CSS) a rychlost načítání stránek

JavaScript je spolu s obrázky dalším častým „zpomalovačem“. Základním doporučením je používání JavaScriptu v jednom externím souboru (stejně jako CSS) a následná minifikace. Vhodnou on-line aplikací je Online YUI Compresso. Pro různé redakční systémy existují pluginy (pro WordPress třeba WP Minify). Je ale třeba mít na paměti, že minifikovaný kód je sice rychleji načten, na druhou stranu se s ním špatně pracuje. Je určen pro strojové čtení.

Vhodné nástroje

• PageSpeed Insights – analyzátor přímo od Googlu
• WebPagetest – kontrola rychlosti načítání stránek. Dokumentace zde
• Prerender – „Google Analytics na poli zrychlování stránek“. Komplexní nástroj s množstvím funkcí
• New Relic – další komplexní nástroj