Rychlost webu – díl III.
V díle třetím ukážu jednu praktiku, která se hodí pro malé obrázky, typicky třeba ikonky, menší loga apod., kde lze ušetřit 100% HTTP requestů, které jsou největším žroutem času při načítání webu. Technika se jmenuje DATA URIs a podporují ji tyto prohlížeče – Firefox, Safari, Chrome, Internet Explorer od verze 8. Kompletní specifikaci najdete v RFC 2397.
Základním faktem je, že místo URL obrázku zapíšete do „src“ nebo v CSS do“url“ zapíšete toto schéma: data:[<mediatype>][;base64],<data>
Například:
<img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/
/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp
V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7"
width="16" height="14" alt="Ikona složky">
Výsledkem bude taková hezká ikona, bez jediného HTTP requestu.
Na straně serveru potom musíte toto schéma z obrázku vygenerovat, například podle tohoto článku – http://www.sitepoint.com/blogs/2010/06/05/reducing-http-requests-with-generated-data-uris/ … a rozhodně doporučuji DATA URI kešovat, protože na straně serveru je víc takových operací náročných na paměť. Ale každý ušetřený HTTP požadavek za to stojí! Podívejte se ještě na můj příklad, jak mít stránku bez HTTP požadavků (zjistíte v záložce Síť ve FireBugu).
