Optimization Freshness - Browser Behavior When Using Data: URI CSS Sprites

Recently, more and more publications about using data: uri css sprites began to appear on the internet. Let me give you two links from the blog Steve Souders, world-famous "optimizer" working in Google.

CSSEmbed - automatically data: URI-ize
Aptimize: realtime spriting and more

Our domestic hero “web optimizer” sunnybear raised a question much earlier about the use of data: uri in css and we jointly conducted a number of studies. At that time, a lot of interesting moments and features came out about which we wrote in previous articles . The last experiments revealed a number of previously unknown moments about the browsers with data uri css sprites.

')
The problem is that with the inept use of data: uri css sprites technology, the download (display) speed of the site may slow down.

Consider an example

Usually, when using data: uri css sprites, background images are separated from the main styles and converted to base64, then placed in a style file that is connected separately. Due to the fact that all (or almost all) background images are placed inside this file, its size is quite large.

Connect data: uri to HEAD

If we include both style files (main and base64 images) in HEAD, the site freezes until the download of these styles is frozen, and since the weight of the data: uri css file is large, this time can be quite significant.

HEAD connection example

For greater clarity, in this example, a 10-second delay was made to issue data: uri css.

Browser results

Do not display the page until the download is complete data: uri css:
- Chrome 3.0.195.33
- FF 3.5.5
- Safari 4.0.3
- IE 8.0.6001

Renders the page immediately without waiting for the end of the download data: uri css:
- Opera 9.62

Connect data: uri to FOOTER (near </ body>)

If we connect the main style file to HEAD, and the style file with base64 images in the FOOTER “freeze” does not occur, we get the desired desired optimization effect, the page loads instantly + at the end of loading data: uri css (after a timeout) we display all base64 images.

Connection example in FOOTER

Browser results

Does not display the page until the download of data: uri css is complete:
- IE 8.0.6001

Draw the page immediately without waiting for the download of data: uri css:
- Chrome 3.0.195.33
- FF 3.5.5
- Safari 4.0.3
- Opera 9.62

findings

Css sprites is highly recommended when using data: uri technology
1) share base styles and styles files with base64 images (data: uri css)
2) connect data: uri css at the end of the document, as close as possible to the closing </ body> tag
3) use js-css bridge (antifreeze) to connect data: uri css in IE

PS: I am glad for the stability of my adventures with IE, even in version 8 I often meet pleasant surprises that make my work more interesting.

ADVERTISING
Fly Aeroflot