Any good webmaster knows the cardinal rules of website optimization. Yahoo! wrote them all up years ago on its Developer Network site. And the more of these rules you can adhere to, the faster your site will load for your visitors. But, more and more often as sites turn to using asynchronous technologies like AJAX to make their sites more responsive and act more like applications, the old rules lose their effectiveness.
Today, the website wizards behind Digg have revealed a new technology called MXHR, or Multi-Part XML HTTP Requests, as a method for optimizing delivery of Digg's complex AJAX-enhanced site. The implementation of MXHR is an addition to Digg's User Interface Library, called DUI.Stream. While still in a fairly rough early stage, Digg believes that MXHR will eventually give it a huge boost in un-cached page rendering efficiency.
]]> There's a couple of problems that Digg has with using traditional optimization techniques. First, the site violates the first rule in a big way, since it uses multiple HTTP connection requests in order to render all parts of the page. Dialog boxes, comments, user icons and more all have to be delivered quickly and with equal priority, and multiple requests was the only way to go until recently.
Second, it can't rely on too much caching to help speed page load times. Digg is a discussion board as much as it is a news site, so caching is a huge problem. Active stories can sometimes have hundreds of new threaded comments being created every minute, and caching would cause huge discrepancies on how much of the conversation each client would actually see from moment to moment.
These issues are what MXHR is designed to optimize. Utilizing DUI.Stream to open only one HTTP connection between server and client, the separate 'page objects' such as dialog boxes, CSS and more can be bundled and sent through the same open connection. By eliminating, in some cases, hundreds of separate HTTP connection requests for a page render, it can approach the rendering speed of a fully-cached page. Plus, this allows the server to control the order in which each page element will be built. This will result in the page appearing almost instantaneously for the user with the the hidden framework being backfilled as needed.
Digg provides two examples of the DUI.Stream library in action, the first being an un-cached text demo, and the second an un-cached image demo. While the first example isn't too amazing, from what we saw the new library performs on par with traditional rendering, the second example with icons is stupidly faster. It's absolutely no contest that MXHR is the clear winner there.
Code is provided in the post for you developer-types out there to play around with along with a GitHub repository of examples. Digg is looking for feedback and suggestions on how to improve on this so please go take a look! We can't wait to see this tech get deployed so that we can have all the bells and whistles of Web 2.0 architecture plus all the speed of a well-optimized site.
]]>