Many already know the technique of optimizing sites based on data: uri technology. Recently, the interest of the global developer community has become more and more of a relatively new technology. On the Internet you can find already a lot of articles on this topic. I am glad that one of the first to think seriously about the development of cross-browser data: uri is “our person” - Yevgeny Stepanishev aka bolk . Well, this is not about that, it’s for history ...

I came across a “foreign” blog, www.ravelrumba.com , the author of which has recently been actively engaged in research into the effectiveness of data: uri css sprites. 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 analyzed the loading speed of the test pages developed by him.

I have made a series of requests for test pages with measuring the number of connections and download speeds.
')

Original site

lab2.ravelrumba.com/data-uri/org

results



Average download speed ~ 4.8 seconds
Number of requests = 34

Data URI CSS # 1

lab2.ravelrumba.com/data-uri/datauri-1

For the generation of sprites used the development of Css Embed

As a result, all styles and sprites are included in one resulting css file.

results



Average download speed ~ 4.3 seconds
Number of requests = 3

Data URI CSS # 2

lab2.ravelrumba.com/data-uri/datauri-2

To generate sprites used online service Duris.Ru

As a result, the styles are divided into basic and sprites. Sprites rendered 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.

results



Average download speed ~ 2.6 seconds
Number of requests = 6

findings

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

Definitely we can say that using data: uri sprites your server will be much easier to handle the number of connections (in this example, in 5x-10x).
And also with the correct use of the data: uri css sprites technique, you can significantly accelerate the overall site load.

Please help yourself and others.

Go to the test pages, and check the load time, so we will have a more generalized picture. We write the results in the comments. Only download time is interested, 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.

In order to save time, experimental pages were developed without the support of browsers <IE8

Habruzer test results

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 4.0.266.0 - o: 5.03, d1 2.74, d2 2.38
SKYnv Opera 10.10, Windows 7 - o: 1.88, d1 0.65, d2 1.42