Using AJAX to improve the bandwidth performance of Web site programs

Introduced

As a Web performance testing company, we have been concerned about the impact of new development technologies in improving the performance of Web page programs. Many of our users are experiencing problems that affect their performance only because of the size of their web pages. Simply put--the page is too big to achieve the desired performance under limited bandwidth conditions. In many cases, the basic elements that are included in different pages are the same. For example, the page header, footer, navigation bar are rarely changed, and in some programs there is even no change. This inspires us to save considerable bandwidth if the program only updates the parts of the page that need to be changed.

Goal

To verify the theory, we decided to see if the program could save at least 50% of the bandwidth. We have chosen a fairly simple internal data analysis program. The program consists of a typical page layout: The middle is the content part of the change. There are no changes to the page header, footer, or navigation bar section. We have edited the program so that it can be accessed through traditional page refreshes and Ajax methods. Next we use the test tools (Web Performance Analyzer) to analyze the bandwidth utilization of two different ways of web pages.

Results

The first result of the experiment was a bit surprising to us. When it comes to Ajax architecture, we thought it would be a bother to choose a suitable AJAX structure to use in our program. After doing some simple experiments with some popular web architectures and taking into account the dangers of JavaScript functions, we decided to use some of the simple javascrip functions we chose to achieve our goal. We were able to get the code snippets we needed from a wide variety of javascript/ajax usage guides on the web, and we modified the program to take advantage of Ajax by no more than 100 lines of Javascript code. No frame structure is required.

Scenario/mode	First-page size	Typical page size	Total bandwidth
Page-refresh	44k	20H	210k
Ajax	47k	2.5k	81k

Total Bandwidth Saving >61%

Where does the bandwidth savings come from?

Here's a screenshot from the Test tool (Web Performance Analyzer) that shows the size of the traditional and Ajax two different versions of page transfer data. You can see URLs (links) and sizes from the image below, and AJAX-mode programs do make the home page bigger. In our test, about 3 K is larger. This is not surprising, because this page contains additional JavaScript programs to drive AJAX patterns. If you choose an AJAX frame structure, it is estimated to be much larger.

Most notably, however, the size of the typical page dropped from about 10K to an average of about 2.5K--down 75%.

Illustration 1: Bandwidth required for traditional Web page refresh mode

Diagram the bandwidth required for 2:ajax mode