“Over the hill” are increasingly interested in the Data technique: CSS Sprites URI

    Many already know the technique of optimizing sites based on data: uri technology. Recently, more and more interest in a relatively new technology shows the interest of the global community of developers. On the Internet you can already find a lot of articles on this topic. I am glad that one of the first people to think seriously about developing cross-browser data: uri is “our man” - Evgeny Stepanishchev aka bolk . Well, this is not about that, it’s so for the story ...

    I came across a “foreign” blog www.ravelrumba.com , whose author has been actively engaged in researching the effectiveness of data: uri css sprites recently. As evidenced by a number of interesting articles about his work.
    CSS Images and Data URIs
    Data URIs for CSS Images: More Tests, More Questions

    I decided to support him and conducted an analysis of the download speed of the test pages he developed.

    I made a series of requests for test pages with measurements of the number of connections and download speed.

    Original site



    Average download speed ~ 4.8 seconds
    Number of queries = 34

    Data URI CSS # 1

    lab2.ravelrumba.com/data-uri/datauri-1 Css Embed was

    used to generate sprites. As a result, all styles and sprites are included in one resulting css file. Results Average download speed ~ 4.3 seconds Number of queries = 3

    Data URI CSS # 2


    To generate sprites, the online service Duris.Ru was used.

    As a result, the styles are divided into main and sprites. Sprites are placed in a separate css and are connected at the end of the page. Also, two images larger than 32KB were not included in the sprites, but were left in the main styles file.


    Average download speed ~ 2.6 seconds
    Number of queries = 6


    • Page load time - datauri2 <datauri1 <original
    • Number of queries - datauri1 <datauri2 << original
    • DOM ready - datauri2 = original <datauri1

    We can definitely say that using data: uri sprites will make your server much easier to process the number of connections (in this example, 5x-10x).
    And also, with proper use of the data: uri css sprites technique, you can significantly accelerate the overall loading of the site.

    Request - help yourself and others

    Go to the test pages, and check your loading time, so we will have a more general picture. We write the results in comments. Only the download time is of interest, do not forget to conduct a series of downloads in order to eliminate random delays in the channel. And also, do not forget to clear the cache before a new download, or simply press Ctrl + F5.

    To save time, experimental pages were developed without browser support <IE8

    Test results by habruzers

    GreLI o: 3.47 d1: 3.16 d2: 2.96
    art_linux Safari 4, Mac OS X 10.6 - o: 1.84 d1: 1.20 d2: 0.95
    freemandigger FF 3.5, Linux (Ubuntu) x86_64 - o: 2.91, d1: 2.22, d2: 2.34
    kolpeex Opera 10.10, Windows 7 - o: 2.66, d1: 1.82, d2: 2.03
    TecHMeaT Vista, Chrome - o: 5.03, d1 2.74, d2 2.38
    SKYnv Opera 10.10, Windows 7 - o: 1.88, d1 0.65, d2 1.42

    Also popular now: