This content is reprinted from Real-World AJAX: Secrets of the Masters published by SYS-CON Books. To order the entire book now along with companion DVDs for the special pre-order price, click here for more information. Aimed at everyone from enterprise developers to self-taught scripters, Real-World AJAX: Secrets of the Masters is the perfect book for anyone who wants to start developing AJAX applications.

Improving Network Performance
Measuring Browser Network Performance
How do we measure the network performance of a Web application? There are a number of tools that can help us measure and diagnose network performance issues, but the best place to start is by taking a look at the initial page, where we load most of the JavaScript, CSS, and images that will be used during the lifetime of the AJAX application.

A useful resource for this is the Web Page Analyzer (www.Websiteoptimization.com/services/analyze/). With this online tool, you can enter the URL of the application and get an initial profile of how many resources it initially tries to load. Taking the popular Blinklist social bookmarking site as an example, we see the various statistics for the initial page of that application (www.blinklist.com/).

Take some of the recommendations of the analyzer with a grain of salt. You may have large amounts of JavaScript if your application is complex. If you have dozens or hundreds of large external resources, however, it's probably a sign that your page is too heavy.

What if your application doesn't load its resources upfront or you want more than a static snapshot? There are a number of tools available here, some browser-neutral, others browser-specific.

(An important tip when using these tools: make sure to clear your browser's cache; this will give an accurate picture of how loading a site or application for the first time will perform.) Of the browserspecific tools, there's TamperData for Firefox, which lets you modify or "tamper with" HTTP messages (https://addons.mozilla.org/firefox/966/), and for IE, ieHttpHeaders (www.blunck.se/iehttpheaders/iehttpheaders.html). Both of these tools will let you look at the browser's HTTP requests and responses in real-time, including the XML data being sent and received from XMLHttpRequest objects.

ieHttpHeaders doesn't have the same timing data as TamperData, which is unfortunate, as you won't be able to identify slow-running HTTP requests as easily. You'll have to match requests and responses by hand and calculate the difference between their timestamps to approximate how long a request took.

Among the browser-independent tools is Fiddler, an HTTP debugging proxy for the Windows platform (www.fiddlertool.com/fiddler/). You have to set your browser to use Fiddler as a proxy (which runs by default on localhost port 8888), and then view the HTTP request and response details much like the browser extensions above. Fiddler has timing data and can be used with Firefox, IE, Opera, and any other HTTP proxy.

For MacOS users, there's the commercial Charles Web Debugging Proxy, which behaves like Fiddler (www.xk72.com/charles/).

The strategy for diagnosing bottlenecks with these tools is fairly straightforward. Look for the requests that are 1) taking the longest amount of time, 2) transferring the most data and 3) occurring with the most frequency. Apply the same principle here as elsewhere in debugging and optimize the bottlenecks that will give you an order-of-magnitude improvement. Don't waste your time squeezing out fractional improvements. We'll be looking at techniques for eliminating these bottlenecks in the next few sections.

This content is reprinted from Real-World AJAX: Secrets of the Masters published by SYS-CON Books. To order the entire book now along with companion DVDs, click here to order.