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.

embedded folder icon

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).

Příklad stránky s jedním HTTP požadavkem!

Štítky: , ,

Konec.

«
»

4 komentářů - “Rychlost webu – díl III.”

  1. Martin H. (22. 6. 2010 v 22.36 )

    Zajímavé! Neznal jsem.

    btw. nefunguje ti link na ukázku

  2. Rival (22. 6. 2010 v 22.39 )

    Díky, link jsem opravil ;)

  3. Tomáš Fejfar (18. 10. 2010 v 15.57 )

    Mě tohle příjde jako fail. Protože konkrétně tvůj příklad se mi načítá neúměrně dlouho. Zvětšuje samotnou stránku (samotné HTML – např. 5k + obrázek 11kb) navíc znemožňuje cachování. Marně hledám výhodu. Jediná výhoda je např. v případě admineru, kde je to proto, že se distribuuje jako jeden soubor ;)

  4. Rival (18. 10. 2010 v 16.05 )

    Neříkám, že je to všelék, je to jen příklad a někde se to vyplatit může (jen jsem nezjišťoval kde ;)

Komentáře




Komentáře můžete sledovat přes RSS 2.0 kanál.


Pixmac - microstock with more than 10 millions images.

Pixmac je fotobanka s více než 10 miliony fotografií, ilustrací a vektorů.
Nejkomfortnější, nejpřívětivější a nejrychlejší fotobanka vůbec. Nákup fotografií a vektorů bez registrace do 3 minut!