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

Tento díl je pokračováním seriálu a technikách umožňující zrychlení načítání webových stránek a aplikací. V předchozím článku Jak můžeme zrychlit své webové aplikace? 3. díl jsem se zabýval správným používáním obrázků a jejich optimalizací.

V prvním díle Jak můžeme zrychlit své webové aplikace? jsem se zabýval potřebou minimizace obsahu. V tomto článku se na to pokusím navázat formou minimizace HTML a postupy správného odkazování na externí soubory.

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.

Úvodní stránka s neupraveným HTML - zdroj Lupa.cz.
Úvodní stránka s neupraveným HTML – zdroj Lupa.cz.

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.

Úvodní stránka Lupa.cz s minimizovaným HTML.
Úvodní stránka Lupa.cz s minimizovaným HTML.

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.

Vykreslení úvodní stránky Lupa.cz s neupraveným HTML trvalo více jak 2,6 vteřiny.
Vykreslení úvodní stránky Lupa.cz s neupraveným HTML trvalo více jak 2,6 vteřiny.

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:

Vykreslení úvodní stránky Lupa.cz s minimizovaným HTML trvalo méně jak 2 vteřiny.
Vykreslení úvodní stránky Lupa.cz s minimizovaným HTML trvalo méně jak 2 vteřiny.

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čtení webu se střídavým odkazováním trvalo 1,93 vteřin (celkově pak 3,75 vteřin).
Načtení webu se střídavým odkazováním trvalo 1,93 vteřin (celkově pak 3,75 vteřin).

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
Načtení webu se správným odkazováním trvalo 1,69 vteřin (celkově pak 2,68 vteřin).
Načtení webu se správným odkazováním trvalo 1,69 vteřin (celkově pak 2,68 vteřin).

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.

Správné pořadí odkazovaných souborů, JS soubory jsou však odkazován pomocí JavaScriptu v těle stránky.
Správné pořadí odkazovaných souborů, JS soubory jsou však odkazován pomocí JavaScriptu v těle stránky.

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.

Soubory jsou odkazovány ve správném pořadí, avšak styly_1.css obsahuje odkaz na další soubor se styly.
Soubory jsou odkazovány ve správném pořadí, avšak styly_1.css obsahuje odkaz na další soubor se styly.

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

Komentáře

  1. Ten úvodný problém som riešil. Momentálne fungujem štýlom, že mám na webe minimalizovaný každý JS a CSS súbor (+spojené dohromady čo sa dalo) + u mňa samozrejme aj nekomprimovaná verzia pre prípadné úpravy. Argument o neprehľadnosti je len obyčajná výhovorka lenivcov aby sa nemuseli babrať s komprimáciou po každej úprave.

    Spomenutá zámena obrázkov za CSS mi pomohla zatiaľ asi najviaa 🙂 okrem obsahu, ktorý som tým ušetril sa dosť rapídne zminimalizoval aj počet požiadaviek. Google webmaster tools by o tom mohol hovorit svoje 🙂

    btw: do buducna by som odporucil aj povenovat sa veciam ako pouzivanie univerzalnych rieseni a zbytocneho kodu. videl som uz napriklad nasadene frameworky na tak malych weboch ze pri tom rozum zastaval, pricom zo skusenosti viem ze prave univerzalne riesenia byvaju vyhodne len pre vyvojara, uzivatel si vo vysledku vacsinou musi dlhsie pockat.

  2. Zaujímavý článok, ktorý v podstate ukázal správne riešenie, avšak zabudol si na niektoré faktory. Podľa toho, čo pozerám na výsledky, tak tvoj prehliadač podporuje iba 2 súčasné HTTP pripojenia – dosiahnuť sa dá však aj väčšie číslo. Samozrejme to ale funguje tak, že stránky sa načítajú rýchlejšie, keď sa najprv stiahne CSS-ko. Na to upozornil aj Yahoo v Performance Rules (http://developer.yahoo.com/performance/rules.html).

Napsat komentář: hrki Zrušit odpověď na komentář