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

lab2.ravelrumba.com/data-uri/org

Results



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

lab2.ravelrumba.com/data-uri/datauri-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.

Results



Average download speed ~ 2.6 seconds
Number of queries = 6

conclusions

• 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 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