Filed under: Programming · Date: Thu Feb 11 17:12:00 2010
It is possible to reduce number of HTTP requests for a web page by using data URIs to inline small documents, like images, in the HTML page or CSS files. Recently I did just that to cut down the number of requests and perceived latency on a application I've been developing.
The end result of the optimization was not very noticeable. It reduced the number of requests made to the server by 8, accoring to Yslow. There may be some minor benefits in the long, because the optimized CSS files have expires headers. However, we're now serving two different kinds of CSS files, since IE versions 6 and 7 did not display the inlined images. That means worse proxy performance for the CSS files: There's now a "Vary: User-Agent" header.
If yoy're considering using data URIs for your project, I'd say it's not worth it.
Eight less requests for a page load is a huge improvement, if the number of requests is low to beging with. For us it was 64. The measured loading time did not improve much.
The large number of requests is due to using third party applications, like TinyMCE editor, which pull resources dynamically. Most of the requests are for javascript files. That is a target for next optimization: Combining the dynamically requested javascripts to one big javascript file, which can be cached more efficiently. That requires another layer of logic, as we want to retain the ability to upgrade the third party applications easily.
HTML is not allowed. Use Textile for formatting. URIs will be made into links automatically.