Best practices of the AJAX kind

AJAX [Asynchronous JavaScript And XML] arose as a new means to create interactive Web pages. Microsoft rolled out ASP.NET AJAX extensions to help developers cope. But, while AJAX is powerful, it can also be hard to work with. Some tips from online giant Yahoo have value for any would-be AJAX front-end developer.

In a recent blog on "Best Practices for Speeding Up Your Web Site," the Yahoo developer's forum highlighted a number of key elements for fast websites. They highlighted 34-best practices divided into seven categories: 1) content; 2) server; 3) cookies; 4) CSS; 5) JavaScript; 6) images; and 7) mobile.

Top-of-the-list recommendation is making fewer HTTP requests. The authors note that 80% of end-user response time is spent on the front-end downloading page components like images, stylesheets, and scripts. The easiest way to do this is to simplify the page's design and combine files, scripts, and CSS.

Using a content delivery network to disperse the delivery of static content can also make a big difference. They recommend Akamai Technologies, Mirror Image Internet, or Limelight Networks. Yahoo claims to have improved end-user response times by 20% just by moving the static content to these kinds of services. You can also extend the expiration of these static contents far into the future to reduce new requests because the client can store them locally.

Another strategy is to compress components into Gzip files, which are the most popular and effective compression method at this time. This can reduce the size of files by an average of 70%. In rare cases, this can create problems, but this is becoming less of an issue as the use of older browsers drop off.

You can also move stylesheets to the head of the document, to make the page appear to load faster, because the page renders progressively. Older browsers are unable to render content progressively when the stylesheet is at the bottom of the document. Scripts on the other hand should be put down at the bottom because they block parallel downloads.

Other components, like JavaScript and CSS should be stored in external documents rather than the main webpage document. Most browsers cache them better when they are stored externally. When stored in the browser, they get downloaded every time the page is opened.

Another trick is to reduce the number of unique host names in a website document. Most browsers have a built in DNS cache that lasts for about 30-minutes by default. When content needs to be pulled from multiple sites, the browser has to do a DNS lookup for each unique host name. But when all of the content comes from one host, the browser only has to do one lookup for the entire web page.