Jak můžeme zrychlit své webové aplikace?

Na konferenci WebExpo 2010 mě zaujala přednáška „Web rychlejší než Blesk“. Očekával jsem, že se dozvím zajímavé techniky a postupy, pomocí kterých je možné webové stránky a aplikace zrychlit. Přednáška pro mě však byla zklamáním, neboť byly představeny pouze možnosti využití cache v rámci cloudu a prezentování novinek v prohlížeči Internet Explorer 9.

Protože některé techniky umožňující rychlejší načítání webových stránek ovládám, rád bych se podělil o některé postupy, které v rámci svých webových projektů uplatňuji a které dokáží zrychlit načítání a běh aplikací i o desítky procent.

Proč zrychlovat webové stránky

Zdlouhavé načítání webu může v mnoha případech odradit návštěvníky. I když je v dnešní době internetové připojení velice rychlé, stále je možné najít uživatele internetu s pomalejším připojením nebo s mobilním internetem.

Je potřeba také myslet na to, že i vyhledávače sledují rychlost načítání webových stránek a v případě jejich zdlouhavého načítání může dojít k určitým postihům (více informací naleznete v článku Using site speed in web search ranking na Webmaster central blog).

Jaké jsou možnosti?

Webové stránky nebo aplikace je možné zrychlit několika způsoby:

  • Minimalizace HTTP požadavků,
  • Snížení velikosti externích souborů,
  • Snížení objemu dat stahovaných ze serveru.

Samozřejmě je také možné webovou aplikaci zrychlit optimalizací samotného zdrojového kódu webu, avšak tímto tématem se v článku nezabývám.

Možností je opravdu více, v tomto článku se zmíním možnosti ohledně minimalizace HTTP požadavkůsnížení velikosti externích souborů.

Minimalizace HTTP požadavků

Jedním z nejefektivnějších způsobů, jak zrychlit načítání webu, je snaha o co nejmenší počet stahovaných dat ze serveru, například:

  • Sjednotit externí soubory – CSS styly nebo JavaScript je vhodné umístit do vždy do jednoho souboru, i když jeho výsledná velikost bude vyšší. Každý stažený soubor musí prohlížeč po jednom zpracovat a následně využít. To může zpomalovat zpracování ostatních načítaných souborů (více informací naleznete v článku Jak můžeme zrychlit webové aplikace? 4. díl).
  • Využít cachování – díky cachování (ukládání do mezipaměti) je možné opravdu efektivně minimalizovat počet všech načítaných externích souborů (více informací naleznete v článku Jak můžeme zrychlit webové aplikace? 2. díl).
Stahované externí soubory na Twitter.com (zobrazeno v Developer Tools prohlížeče Google Chrome)
Stahované externí soubory na Twitter.com (zobrazeno v Developer Tools prohlížeče Google Chrome)

V mnoha případech však stačí efektivněji využívat jednodušších možností, například CSS sprites.

CSS sprites

Tato technika je dnes na moderních webových stránkách velice populární. Umožňuje minimalizaci HTTP požadavků v podobě efektivnějšího načítání obrázků na pozadí nebo těch, které nemají významnou informační hodnotu. Nenačítají se totiž všechny obrázky po jednom, ale pouze jedna velká „obrazová mapa“.

Představme si, že máme vytvořenou HTML stránku se seznamem, ve kterém je pro každou položku použita nějaká ilustrující ikona, jak ukazují následující ukázky:

HTML kód:

<html>
<head>
<link rel="stylesheet" href="styly.css" type="text/css" media="all" />
</head>
<body>
<ul>
<li class="tel">123456789</li>
<li class="www">http://www.mujweb.cz</li>
<li class="email">muj@email.cz</li>
<li class="icq">987654321</li>
</ul>
</body>
</html>

CSS styly:

li.tel { list-style-image: url(tel.png); }
li.www { list-style-image: url(www.png); }
li.email { list-style-image: url(email.png); }
li.icq { list-style-image: url(icq.png); }

Takto nakódovaná stránka bude v prohlížeči vypadat následovně:

Takto nějak může vypadat výsledek výše uvedeného kódu
Takto nějak může vypadat výsledek výše uvedeného kódu

Výsledek je v prohlížeči jasný a přehledný. Avšak toto řešení vytváří pro každý obrázek jeden HTTP požadavek a tím prodloužení načtení celé stránky.

Ikony se načítaly jednotlivě pro každou položku seznamu
Ikony se načítaly jednotlivě pro každou položku seznamu

Jak ukazuje obrázek, celkem bylo vytvořeno 6 požadavků, včetně načtení samotné stránky.

Představte si, že by v seznamu bylo více položek a pro každou by se načítal obrázek zvlášť. To by značně prodlužovalo celkový čas pro načtení celé webové stránky. V tomto případě byl nahrávací čas 9 ms.

Právě díky CSS sprites je možné počet stahovaných obrázků snížit pouze na jeden, který bude obsahovat všechny požadované ikony. Sice bude mít větší velikost, ale celkové načtení stránky bude rychlejší (podívejte se v článku Jak můžeme zrychlit své webové aplikace? 3. díl na zásady tvorby obrázků pro CSS sprites).

Ukázka CSS sprites
Ukázka CSS sprites

V našem případě by bylo potřeba patřičně upravit HTML kód:

<html>
<head>
<link rel="stylesheet" href="styly2.css" type="text/css" media="all" />
</head>
<body>
<ul>
<li><span class="tel"></span>123456789</li>
<li><span class="www"></span>http://www.mujweb.cz</li>
<li><span class="email"></span>muj@email.cz</li>
<li><span class="icq"></span>987654321</li>
</ul>
</body>
</html>

a CSS styly:

ul { list-style: none; padding-left: 16px; }
ul span { 
background: url("css-sprite.png") no-repeat;
float: left;
width: 16px;
height: 16px;
margin: 2px 5px 0 0;
overflow:hidden; }
span.tel { background-position: 0 -16px; }
span.www { background-position: -16px -16px; }
span.email { background-position: 0 0; }
span.icq { background-position: -16px 0; }

Takto upravená stránka vypadá v prohlížeči stejně jako v předchozím případě:

Stránka s využitím CSS sprites vypadá stejně jako bez použití této techniky
Stránka s využitím CSS sprites vypadá stejně jako bez použití této techniky

Jak ze samotných úryvků kódu vyplývá, celkový počet HTTP požadavků se sníží právě díky sjednocení ikon do jednoho souboru:

Celkový počet HTTP požadavků se snížil díky sjednocení ikon do jednoho souboru
Celkový počet HTTP požadavků se snížil díky sjednocení ikon do jednoho souboru

Díky CSS sprites došlo ke snížení jak celkového počtu HTTP požadavků, ale také ke snížení celkového času pro nahrání stránky na 7 ms (v předchozím případě 9 ms.).

Tato technika je velice užitečná a dochází k opravdu znatelnému zrychlení načítání webových stránek. Dnes je standardem a využívají jí všechny moderní webové stránky a aplikace, konkrétně například Twitter, Google nebo Facebook.

Obrazová mapa, kterou pro CSS sprites používal Twitter
Obrazová mapa, kterou pro CSS sprites používal Twitter

Snížení velikosti externích souborů

Webové stránky nyní neodmyslitelně tvoří externí soubory, například CSS styly nebo soubory s JavaScriptem. Soubory se nahrávají a zpracovávají vždy před samotným vykreslením stránky. Proto je důležité dbát na jejich co nejmenší velikost.

Existuje několik způsobů, jak lze zmenšit tyto externí soubory i o několik desítek procent a zrychlit tak načtení samotné stránky.

Nejběžnějším a nejpoužívanějším způsobem je tzv. minifikace. Její princip spočívá v odstranění mezer a tabulátorů, tzv. bílých znaků. Tímto způsobem lze snížit velikost CSS stylů a JavaScriptu. Například lze minifikovat JavaScriptový soubor o velikosti 36 kB na velikost 15 kB – což je ve výsledku snížení o více jak 41 %.

Minifikovaná produkční verze souboru jQuery 1.4.2
Minifikovaná produkční verze souboru jQuery 1.4.2

Dalším způsobem je tzv. obfuskace. Její princip spočívá v převedení souboru na jednoduchý zápis se zapojením co nejjednodušších identifikátorů. Tímto způsobem lze snížit velikost JavaScriptových kódů. Například produkční verze jQuery o velikosti 163,8 kB byla snížena na 59,4 kB a v případě minifikace byla velikost výsledného souboru 79,7 kB.

Obfuskovaná produkční verze souboru jQuery 1.4.2
Obfuskovaná produkční verze souboru jQuery 1.4.2

Metoda obfuskace má však nevýhodu v tom, že může v některých případech generovat chyby a v „přeformátovaném“ souboru se chyby opravdu špatně opravují. Proto je potřeba dávat pozor na takto „komprimované“ soubory.

Nástroje

Ke zmíněným způsobům jsou určené vhodné nástroje, která Vám snížení velikosti externích souborů usnadní.

Pro CSS:

Pro JavaScript:

Nástrojů je samozřejmě více, ale osobně doporučuji tyto zmíněné nástroje, které běžně používám.

YUI Compressor je možné používat v příkazové řádce Windows
YUI Compressor je možné používat v příkazové řádce Windows

Pokračování v dalším článku

Protože možností pro zrychlení webových aplikací je více, v článku Jak můžeme zrychlit své webové aplikace? 2. díl, zmiňuji možnosti využití Cache a komprimace obsahu.

Doufám, popisované techniky zrychlí Vaší webovou aplikaci a pomohou Vám udržet návštěvníky a vyhledávače na Vaší straně.

Pokud používáte jiné nástroje pro snížení velikosti obsahu, budu rád, pokud se o ně podělíte v komentářích s dalšími čtenáři mého blogu a se mnou samotným.

Komentáře

  1. zatial dobry clanok, napriklad o CSS sprites som doteraz nepocul (mozno preto ze nie som az tak zamerany na web a grafiku)
    inak, k tomu javascriptu, niekde som cital, ze je dobre minimalizovat/odstranit spracovanie javascriptu na onLoad metodu – vraj najprv spracuje script a az potom dalej nacitava html stranku

  2. Při zpracování JavaScriptu prohlížeč vše ostatní zastaví, neboť neví, co bude následovat. Proto se např. doporučuje umisťovat JavaScript na konec stránky.

    Já se této problematice budu věnovat v dalším článku.

  3. Chválím článek, na českém internetu podobných článků moc není.

    Ohledně zpracování JS – podle mě se prohlížeč při zpracování zastaví, protože pracuje v jednom vlákně. Nehledě na to, že blokuje paralelní zpracování dalšího externího obsahu. S tím, že by nevěděl, co následuje to podle mě moc nesouvisí.

  4. je mi 60 let,mám sice vysokou školu kde jsme probírali programování, začátky byly vývojové diagramy a pod., nebo na základě vystavené rovnice pomocí operačních členů nand. a pod. sestavit pc, ale na základě dotazu jsem očekával, jako každý jiný konzument odpověď – stáhni – ulož- instaluj- stiskni a pod.Vím, že se ozvou chytrolíni, kteří mne zmasakrují, ale tito lidé si neuvědomují, že má generace se to opravdu musela učit, ne v tom vyrůstat, děkuji

Napsat komentář