Ajax Optimization Chapter 8

First described by Jesse James Garrett, Asynchronous JavaScript and XML (Ajax) is a new way to boost the interactivity of websites.

Ajax is a cross-platform set of technologies that allows developers to create web pages that behave more interactively, like applications. It uses a combination of Cascading Style Sheets (CSS), XHTML, JavaScript, and some textual data - usually XML or JavaScript Object Notation (JSON) - to exchange data asynchronously. This allows sectional page updates in response to user input, reducing server transfers (and resultant wait times) to a minimum. Properly coded, Ajax pages replace the old full-page paint, decide, click, and wait approach with streamlined partial page redraws, thereby boosting response times, interactivity, and usability.

Ultimately, the goal of Ajax is to increase conversion rates through a faster, more user-friendly web experience. Unfortunately, unoptimized Ajax can cause performance lags, the appearance of application fragility, and user confusion. It can even harm your search engine rankings. The purpose of this chapter is to help you avoid these possible pitfalls and reap the rewards of Ajax.

We recommend the following best practices for optimizing the performance, stability, and usability of Ajax applications.

  • Appropriately applying Ajax to a problem
  • Using a well-constructed and supported Ajax library
  • Minimizing your JavaScript code footprint
  • Reducing HTTP request requirements
  • Choosing the correct data format for transmission
  • Ensuring that network availability and performance concerns are addressed
  • Employing a JavaScript cache
  • Carefully polling for user input
  • Providing a fallback mechanism for search engines and accessibility when JavaScript is turned off
  • Saving state with the fragment identifier

What follows is an outline of this chapter:

Footnotes

Garrett, J. February 18, 2005. "Ajax: A New Approach to Web Applications."
Adaptive Path, http://www.adaptivepath.com/publications/essays/archives/000385.php (accessed April 15, 2008).
Ajax was a mythological Greek hero
who played an important role in Homer's Iliad. He is described as the strongest of all the Achaeans. Although not the origin of this technology's name, it is certainly a suitable lineage for the power the technology provides.
Yahoo!'s YUI Ajax library
was 143.4 KB unoptimized versus 38.46 KB after minimization, or about 73.2% smaller overall. For the individual files, yahoo.js was 28.5 KB originally versus 5.86 KB minified, event.js was 79 KB unoptimized versus 17 KB minified, and connection.js was 35.9 KB unoptimized versus 13.6 KB optimized. These numbers were for version 2.3.0 of YUI.
We have done extensive testing on this default (the two connection per hostname recommendation).
There are ways to modify it in the browser, but by default, two is the limit of simultaneous connections, at least for JavaScript files. See http://www.w3.org/Protocols/rfc2616/rfc2616-sec8.html for more details.
Neuberg, B. August 15, 2006. "Tutorial: How to Profile and Optimize Ajax Applications."
Coding in Paradise, http://codinginparadise.org/weblog/2006/08/tutorial-how-to-profile-and-optimize.html (accessed February 11, 2008).
Fielding, R. et al. June 1999. "Hypertext Transfer Protocol--HTTP/1.1."
RFC 2616, http://www.w3.org/Protocols/rfc2616/rfc2616-sec8.html (accessed February 11, 2008).
Note that innerHTML has been added to the HTML 5 draft.
See http://www.w3.org/html/wg/html5/diff/.
Zimmerman, H. 1980. "OSI Reference Model--The IS0 Model of Architecture for Open Systems Interconnection."
IEEE Transactions on Communications COM-28 (4): 425-432.
For more in-depth error correction and prevention, see the "Networking Considerations" chapter
written by T. Powell) in my book, Ajax: The Complete Reference (McGraw-Hill Osborne Media).
The term Comet is not an acronym.
The general introduction of the term is attributed to Alex Russell from Dojotoolkit.org sometime in early 2006 (see http://alex.dojotoolkit.org/?p=545).

« CSS Optimization | Ajax Optimization | Advanced Web Performance Optimization »