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ů a 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).
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ě:
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.
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).
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ě:
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:
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.
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 %.
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.
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.
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.
Těším se na pokračování.
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
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.
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í.
Co je na úplně prvním screenshotu ve článku za aplikaci?
David: Nástroje pro vývojáře prohlížeče Google Chrome – viz https://www.manakmichal.cz/blog/clanek/10-ladime-webove-stranky-primo-v-prohlizeci-google-chrome
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
Tvrzení o načítání javascriptu před vykreslením je chybné. Atributy defer a async řeší právě tenhle problém.