Wednesday, January 25th, 2006

Using Ajax to Improve the Bandwidth Performance of Web Applications

Category: Editorial

<>p>Christopher Merrill over at webperformance.com wrote up an article on the performance impacts of Ajax development in which he measured bandwidth results for an application using full page refreshes vs. Ajax techniques.

The Goal

In order to test the theory, we decided to see if we could cut the bandwidth use of an application by at least 50%. We selected a rather simple internal data-analysis application. The application consists of a typical page layout with a central section containing the changing content. The header, footer and navigation menu do not change during the application operation. We modified the application so that it can be accessed in either traditional (page-refresh) mode or AJAX mode. We then used our measurement tool (Web Performance Analyzer) to record and analyze the bandwidth utilization of each application.

Conclusion

In applications that have a significant part of each page containing content that is identical in multiple page requests, using AJAX-style methods to update only the relevant parts of a web page can bring significant bandwidth savings. Using less than 100 lines of javascript, we were able to quickly convert an existing web application to use AJAX page-update methods to drastically reduce (>60%) the bandwidth requirements of our sample application.

It is important to note that the application converted in our test was ridiculously simple. Achieving the same bandwidth reduction on a sophisticated application will likely not be as easy, if it is possible at all. However, when applied to extremely large-scale applications or applications with very tight bandwidth considerations, savings of 10% could bring a hefty cost savings.

Ajax Test Results

Performance tests are never blanket statements. In the right place you can utilize Ajax to minimize bandwidth. It is also VERY easy to use Ajax to generate a heck of a lot more bandwidth than required.

Common sense kicks in on when it makes sense to do fine grained calls for data, versus full page refreshes.

Related Content:

3 Comments »

Comments feed TrackBack URI

I’m working on a school administration web app where Ajax is used in this kind of way to minimize bandwidth. One frequently-used dynamic page on the site consists of a huge form with up to ~1250 input elements (on average, ~200 input elements). A common scenario would entail a user accessing the page, filling in parts of the form, saving, and continuing to work on the form. Previously, upon saving, the form data would be sent to the server and the page would reload with the newly-saved data. If the page had tons of data to save, and tons of users were using it at the same time, the site got very slow.

Using extensive JavaScript on page load, hashing to detect for changes to minimize data sent to the server, and Ajax, we have reduced bandwidth by a large amount. Now upon saving, the massive form is merely hidden (using JavaScript & CSS) for a few seconds while a saving animation is displayed, and Ajax is used to send the data to the server to be saved in a DB. The form is then shown again for the user to continue working.

I don’t have any concrete numbers to back up my claim, but under heavy load, the site works noticeably much better without having to send so much data to the server as well as reload the page each save. Just thought a real-world example would provide some insight.

Comment by Georges Bilodeau — January 25, 2006

Alexei White also has a good look at this benefit of AJaX over here:
http://www.ajaxinfo.com/default~viewart~18.htm

Comment by Dave Johnson — January 25, 2006

[...] Ajaxian's blog has a nice summary of how Ajax applications can actually decrease bandwidth usage. (They are summarizing Christopher Merrill's research at webperformance.com [...]

Pingback by That’s What She Said — October 2, 2006

Leave a comment

You must be logged in to post a comment.