Jak můžeme zrychlit své webové aplikace? 4. díl

Minimizace HTML

Hlavním cílem minimizace HTML je snížit objem přenášených dat. To je zajištěno díky odmazání nepotřebných znaků v podobě mezer a tabulátorů. Může vyvstat otázka, zda je minimizace HTML skutečně potřeba.

Když jsem se o této možnosti zmiňoval na Twitteru, přišlo mi několik negativních nebo neutrálních odpovědí – „je to zbytečné“ nebo „znepřehlední to kód“.

Tento postup jsem testoval v několika variantách na různých projektech a došel jsem k několika závěrům:

• Ušetří se přenášená data.
• Rychlejší vykreslení v prohlížeči.

HTML je jednou z nejpodceňovanější součástí každého webu. Často je k vidění “plýtvání” značkami, což vytváří větší nároky na vykreslení (i v době, kdy jsou vykreslovací jádra prohlížečů velmi rychlá).

Úspora přenesených dat

Jako ukázkový příklad jsem si vybral server Lupa.cz a jejich úvodní stránku. Tento zpravodajský server prošel nedávnou inovací vzhledu a tedy i jasnou úpravou HTML kódu.

HTML kód v neupravené podobě má celkovou velikost 53775 B a obsahuje velké množství „bílých znaků“. Pokud by se všechny tyto nechtěné mezery odstranily, stránka by se zmenšila na na 50063 B (tedy cca 48,8 KB). Dosáhlo by se úspory 3712 B.

V případě velké návštěvnosti, například 1000 lidí denně, by úspory na přenášených datech činily 3,7 MB.

Při využití komprese (viz Jak můžeme zrychlit své webové aplikace? 3. díl) by rozdíl v přenášených dat nebyl tak markantní, avšak je zde další důležitý ukazatel – rychlost vykreslení.

Rychlejší vykreslení

Důležitějším faktorem, proč minimizovat HTML kód, je zrychlení načítání stránky v samotném prohlížeči, což lze vidět například použitím prohlížeče Google Chrome se zapnutým módem Speed Tracer a Developer Tools.

Jak můžete vidět na obrázku, vykreslení stránky s neupraveným HTML trvalo prohlížeči déle než 2,6 vteřiny. Zpracování HTML kódu pak trvalo přibližně 237 ms (bez započítání samotného vykreslení s úpravou přes JS nebo CSS).

Při minimizaci HTML by došlo k viditelnému zrychlení zpracování HTML. Prohlížeč projde jednotlivé značky postupně bez nutnosti procházení a přeskakování mezer:

Jak můžete vidět na obrázku, vykreslení stránky s minimizovaným HTML trvalo prohlížeči méně jak 2 vteřiny. Zpracování HTML kódu pak trvalo přibližně 198 ms (bez započítání samotného vykreslení s úpravou přes JS nebo CSS).

Celkový rozdíl ve vykreslení je pak více jak 0,5 vteřiny, což už je velký rozdíl.

Externí soubory

Nesprávným odkazováním na externí soubory se může doba potřebná na vykreslení stránky protáhnout i v řádech vteřin. Důvodem může být nejen samotné odkazování, ale také množství souborů, na které se odkazuje (přečtěte si o spojování externích souborů v článku Jak můžeme zrychlit své webové aplikace?).

Nejvíce problematické jsou JavaScripty. Ty jsou při svém stažení prohlížečem ihned analyzovány (parsovány) a provedeny. JavaScript totiž může u aplikace změnit:

• Vzhled,
• Chování.

Po stažení je veškeré další stahování pozastaveno, dokud není JavaScript zpracován. Tím se pozastavuje vykreslování a formátování stránky pomocí CSS, stažení dalších JavaScriptových souborů, atp.

Je tedy potřeba, aby byl JavaScript odkazován jako poslední z externích souborů.

Odkazování v hlavičce

Pokud budou JavaScriptové soubory odkazovány jako první, nebo střídavě s CSS styly, načtení samotné stránky se prodlouží.

Na ukázku jsem připravil jednoduchý web, kde jsou odkazovány soubory v tomto pořadí:

1. CSS
2. JavaScript
3. JavaScript
4. CSS
5. JavaScript

Využil jsem standardní knihovny jQuery, jQuery UI, Modernizr a předpřipravené CSS.

Na obrázku můžete vidět, že po stažení prvního JavaScriptu se veškeré další stahování pozastavilo až do jeho zpracování. Ten však může být paralelně stažen s CSS styly. Celkově se web načítal 3,75 vteřin.

Jak se změní čas potřebný pro nahrání webu, pokud bychom změnili pořadí na:

1. CSS
2. CSS
3. JavaScript
4. JavaScript
5. JavaScript

Při správném odkazování dosáhneme je možné dosáhnout výrazného zrychlení načítání webu. Jak můžete vidět na obrázku, nahrání webu trvalo 2,68 vteřin.

Rozdíl je nejen v samotném načtení webu – 1,07 vteřin, ale i ve zpracování souborů – přibližně 240 ms.

Více informací můžete najít na Best Practices for Speeding Up Your Web Site od Yahoo!

Další způsoby odkazování

Několikrát jsem se setkal s řešením, kdy byly odkazy na externí soubory přiřazovány ne zrovna vhodným způsobem, například:

• JavaScript pomocí zápisu document.write('<script><\/script>');
• CSS styly pomocí @import url(''); uvnitř souboru s CSS styly.

V těchto případech prohlížeč neví, co je obsahem odkazovaného souboru a veškeré stahování a zpracovávání zastaví až do doby, než bude odkazovaný soubor načten a zpracován.

Pokud bychom přikládali externí soubory zmíněným JavaScriptovým zápisem, nejprve by se musel zpracovat první JavaScriptový blok – vypsání <script> tagu – a následně by se zpracovával další JavaScript.

Na obrázku můžete vidět, že i když jsou soubory správně seřazené, zpracování souborů trvalo 2,14 vteřin. V porovnání s předchozím příkladem (1,68 vteřin) se tak čas potřebný pro zpracování prodloužil téměř o 0,5 vteřiny.

V článku Jak můžeme zrychlit své webové aplikace? jsem zmiňoval jako hlavní možnost zrychlení webových aplikací snahu minimalizovat počet HTTP požadavků – například spojováním souborů do jednoho.

V případě použití @import url(''); v těle CSS stylů bude potřeba tyto odkazované soubory stáhnout a zpracovat. Bude vytvořen další HTTP požadavek a odkazovaný soubor bude samostatně zpracováván – vše ostatní bude pozastaveno.

Pokud uvedeme odkazy v hlavičce stránky ve správném pořadí, vnořený odkaz ve formě @import způsobí, že se po vykonání předchozích požadavků pozastaví vše ostatní až do doby, než bude odkazovaný soubor zpracován.

To vede opět k prodloužení načítání. V tomto případě byl čas potřebný na zpracování externích souborů 1,9 vteřiny (nahrání celé stránky trvalo 2,93 vteřin). V porovnání se správným řešením (1,69 vteřin pro zpracování a 2,68 vteřin) tak došlo opět ke zpomalení nahrávání přibližně o 300 ms.

Slovo závěrem

Tento díl byl posledním ze série o možnosti zrychlení webových aplikací. Osobně doufám, že se vám seriál líbil a načerpali jste pro řešení svých webů nové inspirativní nápady.

Přečtěte si ostatní díly

• Jak můžeme zrychlit své webové aplikace? – minimalizace HTTP požadavků spojováním externích souborů a CSS sprites, minimizace CSS a JavaScriptových souborů.
• Jak můžeme zrychlit své webové aplikace? 2. díl – ukládání dat do mezimapěti, komprese obsahu.
• Jak můžeme zrychlit své webové aplikace? 3. díl – obrázky pro web a jejich optimalizace.