Ajax Performance

Perceived Performance work from YUI — ImageLoader

When I talk about Ajax performance optimization, I typically refer to optimization as a 3 stage process: reducing sources of network latency as far as possible, reducing sources of client side latency as far as possible, and lastly, hiding whatever is left. That last step is based on the assumption that, at a certain point, you will always hit a wall in traditional performance optimization as there is a certain amount of content to transfer and code to run client side. The techniques for hiding whatever is left tend to play in the area of ‘perceived performance,’ juggling the order of events such that the user sees an interactive and available application as quickly as possible.

An experimental new library from the YUI team called ImageLoader (as seen on Ajaxian) provides a perceived performance boost by allowing the developer to defer loading of images that are not visible on initial page load until they are necessary to complete the user experience. These images could either be outside of the viewport (”below the fold” as the cool kids say) or inside of hidden widgets. By deferring these objects until later, we restrict the number of network events, and thus the latency, before the user thinks the page is loaded and interactive.

The devil is in the details, of course, so the trick to making this work is ensuring that the images are loaded without blocking the initial page load but before they are actually needed. ImageLoader provides two techniques for loading these deferred images: triggering the load off of some event or loading after some fixed time interval. I’m not sure I love either approach as they both seem to err more on the side of giving the user a latency event later in the page to avoid slowing the initial load. I think I would rather start loading the content, at least in the above the fold case, as soon as all other networking operations had completed. This would be something more like a priority queue, or a “Mega Defer,” though that requires routing all network operations through some JS layer.

Regardless, it’s exciting to see the YUI team focusing on codifying these advanced performance techniques into libraries. Having well documented solutions opens fancy optimizations to a much broader range of developers.