Zvyšujeme obchodní účinnost webů a marketingovou přesvědčivost

91 tipů na optimalizaci konverzí e-shopu 9. část - Optimalizace rychlosti načítání

Aleš Linhart - 27.03.2013

Lidé mají internet tolik v oblibě proto, že díky němu mohou ušetřit mnoho času při hledání informací i nakupování. Bude-li váš e-shop příliš pomalý, mnoho zákazníků se na něm nezdrží a zamíří raději ke konkurenci. Snažte se proto maximálně optimalizovat rychlost načítání na svém e-shopu. Pokud chcete zjistit, v jakém stavu optimalizace rychlosti načítání je váš e-shop můžete využít PageSpeed Tools od Googlu.

75. Využijte cache prohlížeče

Cachování je dvojitá výhra: minimalizujete tím počet HTTP požadavků a podstatně snížíte velikost stahovaných prvků. Kromě toho, že se zrychlí vaše stránky, může mít tato úprava za následek snížení nákladů na webhosting, neboť se na e-shopu sníží provoz přenášených dat.

76. Odložte parsování JavaScriptu

Při načítání stránku musí vyhledávač parsovat obsah mezi <script> tagy, což prodlužuje dobu načítání stránky. Minimalizování JavaScriptu a správným umístěním v HTML kódu stránky můžete pomoci rychlejšímu načítání stránky.

77. Optimalizujte obrázky

Pokud optimalizujete každý řádek kódu webu, nezapomeňte ani na optimalizaci obrázků. Vhodnou kompresí můžete docílit výrazného zmenšení velikosti obrázku bez toho, aby byla jeho kvalita jakkoliv zhoršena.

78. Zmenšujte obrázky reálně ne pomocí HTML

Občas se stává, že jsou obrázky zmenšovány v HTML kódu. Viditelný výsledek je stejný v případě, že zobrazíme obrázek o rozměrech 10x10 px nebo zobrazíme obrázek o rozměrech 250x250 px zmenšený v HTML na rozměr 10x10 px. Ovšem při rychlosti načítání webu je přístup ke zmenšování obrázků v HTML velmi nepraktický, protože prohlížeč musí stáhnout celý obrázek o rozměrech 250x250 px, který má výrazně větší velikost, než obrázek 10x10 px.

Chcete-li tedy na e-shopu zobrazit obrázek s rozměry 10x10 px musí na serveru existovat takový obrázek a nesmí být zmenšován obrázek větších rozměrů.

79. Spojujte malé obrázky do CSS sprites

Stahování více malých obrázků je časově náročnější, než stahování jednoho většího. Proto je pro zrychlení stránek využíván CSS sprites. Jedná se o techniku, když se na jednom větším obrázku nachází více menší obrázků (například ikonek). Při načítání stránky se tak stáhne pouze jeden obrázek a přes CSS se následně zajistí, aby se na příslušných místech zobrazovaly příslušné menší obrázky z toho jednoho velkého.

80. Minimalizujte přesměrování

Každé přesměrování stojí určitý čas, a proto je nutné jej co nejvíce minimalizovat. Minimalizaci zajistíte tím, že všude na e-shopu i jinde na internetu budeme odkazovat na skutečně existující stránky a nikoliv na stránky, ze kterých bude návštěvník přesměrován jinam.

81. Povolte kompresi

Komprese pomocí gzip dokáže ušetřit mnoho bajtů posílaných po síti. Nejčastěji se komprese využívá u HTML, CSS a JavaScript souborů. To umožňuje výrazně snížit čas potřebný pro přenost těchto souborů po síti a zrychlit tím chod celého e-shopu.

82. Minifikujte JavaScript a CSS

Minifikace je proces, kdy s minifikovaných souborech dochází k odstranění nedůležitých bajtů. Minifikace se zaměřuje mimo jiné na odstranění nadbytečných mezer a komentářů, čímž dochází ke snížení velikosti těchto souborů a zrychluje se jejich stahování.

83. Minimalizujte velikosti požadavků

Udržujte cookies a hlavičky požadavků co nejmenší můžete, aby se HTTP požadavky vešly do jednoho packetu.

Delicious Save this on Delicious

Články