Zrychlete své webové stránky

Webové stránky používají hlavně uživatelé, kteří nemají ani zdaleka tak výkonný stroj, jako má jejich vývojář. Ten si proto často neuvědomí, že se stránka vykresluje pomalu. Vyhněte se postupům, které vykreslování stránek zpomalují, a osvojte si techniky, pomocí kterých webové stránky znatelně zrychlíte. Projděte si nejběžnější osvědčené postupy shrnuté do několika stručných bodů bez zabíhání do přílišných podrobností. Popisují kroky jak na straně klienta, tak i na straně serveru.

6 hlavních zásad

• Odpovězte na HTTP požadavek rychle.
• Posílejte prohlížeči co možná nejmenší množství kódu.
• Snažte se mít stručný HTML kód.
• Neplýtvejte zdroji, když používáte video.
• Pište rychlý JavaScript.
• Mějte neustálý přehled o tom, co vaše aplikace dělá.

Snížení síťové náročnosti

• Zkontrolujte, že server neuvádí v HTTP odpovědi hlavičku Connection: close.
• Komprese obsahu - povolte komprimaci obsahu algoritmem Gzip pro všechno kromě obrázků.
• Používejte HTML5 App Cache – dejte prohlížeči k dispozici seznam souborů, které si má uchovat ve skryté paměti.
• Ukládejte do skryté paměti – určete, jak dlouho mají být obrázky na straně klienta nebo serveru uchovávány ve skryté paměti. Předejdete tím opakovanému stahování téhož obrázku.
• Podporujte podmíněné požadavky – uložte stránku na straně klienta do skryté paměti a obnovte ji, až když je k dispozici nový obsah. Prohlížeč se na nový obsah dotazuje HTTP hlavičkou If-Modified-Since.
• Nezapomeňte na skrytou paměť, když používáte XMLHttpRequest. 95% stránek zapomíná.
• Nezmenšujte obrázky prohlížečem – server by měl klientovi posílat obrázek v přesně takové velikosti, v jaké se vykresluje.
• Spojte všechny malé obrázky do jednoho – všechny malé obrázky, které jsou typicky součástí uživatelského rozhraní, spojte do jednoho velkého obrázku a vykreslujte jen potřebnou číst. Pokud načítáte přes 20 obrázků, měli byste uvažovat nad jejich spojením.
• Pokud se vaše webová aplikace dotazuje databáze, webových služeb, nebo si zkrátka dotahuje data odjinud, mějte na paměti, že v důsledku na tato volání čeká prohlížeč.
• Nepoužívejte HTTP 3xx přesměrování. Může to zdržet prohlížeč o několik sekund.
• Nepoužívejte HTML meta tag refresh. To už je lepší to HTTP přesměrování.
• Používejte CDN, pokud se vaši zákazníci nacházejí i mimo území Česka. Většinou stačí použít CDN jen pro statický obsah. Prohlížeč stahuje najednou nejvýše 6 zdrojů z jedné domény.
• Vyhněte se odkazování na zdroje na serverech třetích stran, které můžou být pomalé.
• Na velikosti písmen v URI záleží bez ohledu na to, jak se chová souborový systém serveru. Pro prohlížeč a jeho skrytou paměť jsou dva soubory se stejným názvem, ale lišící se velikostí písmen, odlišné.
• Mějte své zdroje na co nejmenším počtu odlišných domén a snižte tak počet požadavků na DNS server.

Zrychlení odezvy prohlížeče

• Načítejte své stránky v nejmodernějším vykreslovacím režimu prohlížeče. Používejte HTML5 Doctype nebo HTTP hlavičku X-UA-Compatible. Pokud to nejde jinak, můžete použít i HTML meta tag.
• Používejte nejvýše jednu javascriptovou knihovnu.
• Na CSS pravidla odkazujte vždy v HTML hlavičce. Prohlížeč nezačne vykreslovat stránku, dokud nebudou pravidla načtena. V opačném případě se bude stránka vykreslovat několikrát od začátku.
• Nevkládejte styly přímo do HTML pomocí tagu style ani do HTML tagu pomocí atributu style.
• Nevkládejte JavaScript přímo do HTML. Prohlížeč musí vyměnit parser a nemá dostatek informací k tomu, aby dobře optimalizoval kód.
• Odkazujte na javascriptové soubory před uzavřením tagu body, zejména pokud cílíte na starší prohlížeče. Nezapomeňte uvést atribut async.
• Neodkazujte na stejné javascriptové soubory vícekrát. Zní to jako samozřejmost, ale 52% stránek má zdvojený kód.
• Nahraďte obrázky s barevnými přechody za CSS3 Gradients.
• Nahraďte obrázky pro zakulacené rohy za CSS3 Border Radius.
• Nahraďte javascriptové animace za CSS3 Animations.
• Pro skutečně malé obrázky používejte DataURI.
• V tagu video uvádějte atribut poster. Jinak musí prohlížeč video stáhnout a dekódovat jen proto, aby zobrazil první snímek.
• Obrázky ve formátu JPEG ukládejte do barevného prostoru YCbCr 4:2:0. Využijete tak možnosti dekódování obrázku pomocí GPU.
• Nepoužívejte doplňky prohlížeče – Flash, Silverlight, Quicktime. Žádný z nich není rychlejší, než HTML5 video tag. Tyto doplňky soutěží o výpočetní zdroje počítače s prohlížečem.
• Pokud se obrázky zobrazují až po nějaké akci, stáhněte si je předem pomocí HTML5 App Cache (pro starší prohlížeče je nutná javascriptové metoda).
• Načítejte javascriptové soubory dynamicky až ve chvíli, kdy jsou skutečně potřeba.
• Snažte se držet počet HTML elementů v DOM pod jeden tisíc.
• Nepoužívejte setInternal, ale využijte DOM Events nebo requestAnimationFrame.
• Využívejte vlastnost document.hidden a událost Visibilitychange a zastavte zbytečné činnosti, když stránka není zobrazena.
• Využijte funkce prerender a načtete jednu stránku ještě před tím, než na ní uživatel vejde.

CSS

• Odkazujte jen na ty styly, které stránka používá. Nesnažte se dát všechna CSS pravidla z celého webu do jednoho souboru za účelem snížení síťové náročnosti. Bylo by to na úkor rychlosti vykreslování.
• Nepoužívejte příkaz @Import k importování dalších CSS pravidel.
• Nepoužívejte pravidlo !important v CSS. Toto pravidlo výrazně zatěžuje CSS subsystém prohlížeče.

JavaScript

• Pokud možno nepoužívejte globální proměnné. Proměnné z vnějšku uzávěru používejte střídmě.
• Pokud voláte funkci uvnitř smyčky, volejte jí přes delegáta.
• K serializaci a deserializaci používejte funkci JSON.stringify respektive JSON.parse. Nativní funkce prohlížeče jsou vždy nejrychlejší.
• Ukládejte elementy do skryté paměti – kdykoliv to je možné, uložte volání document.body.all do proměnné a déle používejte ji.
• Pokud potřebujete iterovat elementy, možná vás napadne vygenerovat si HTML tak, aby byly jednotlivé elementy očíslované a pomocí těchto čísel je ve smyčce procházet. Mnohem rychlejší je však využít vlastností fistChild a nextSibling.
• Využijte Selector API. Dokument obsahuje metodu querySelectorAll.
• Minifikujte JavaScript pomocí vývojových nebo serverových nástrojů. Šetříte síť a zvyšujete rychlost JavaScriptu, protože jsou názvy proměnných kratší a runtime je najde rychleji.
• Používejte raději vlastnost innerHTML, než abyste sami stavěli hierarchii HTML elementů. Je to asi 10 až 15 krát rychlejší.
• Deserializace JSON je vždy rychlejší, než deserializace XML. Pokud máte na výběr, dotahujte si dynamická data ze severu raději v JSON.

modern.IE

Využijte nástroje modern.IE, který automaticky zkontroluje vaše stránky. Dozvíte se, jestli neobsahují časté chyby, navrhne vám doporučení jak jejich kód vylepšit a ukáže vám, jak se stránky zobrazí na nejrůznějších zařízeních.