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
- Reducing HTTP request requirements
- Choosing the correct data format for transmission
- Ensuring that network availability and performance concerns are addressed
- Carefully polling for user input
- Saving state with the fragment identifier
What follows is an outline of this chapter:
- Ajax Optimization
- Common Problems with Ajax
- Proper Application of Ajax
- Rolling Your Own Ajax Solution
- Relying on Ajax Libraries
- Reduce Whitespace Carefully
- Use String Constant Macros
- Avoid Optional Constructs and Kill Dead Code Fast
- Shorten User-Defined Variables and Function Names
- Remap Built-in Objects
- Inline Localized Functions
- Assume Default Values
- Every Byte Counts
- Bundle Your Scripts
- Lazy-Load Your Code
- Pace Yourself
- Monitor User Rendering Time
- Practice Error Awareness
- Clean Up After Yourself
- Memory leaks and garbage collection in Internet Explorer
- Go Native
- Clock Your Runtime
- Minimizing HTTP Requests
- Choosing Data Formats Wisely
- Addressing the Caching Quandary of Ajax
- Method 1: Output No Caching Headers on the Server Side
- Method 2: Make Requests with Unique URIs
- Method 3: Make Requests with an Old If-Modified-Since Header
- Method 4: Create Your Own Cache
- Addressing Network Robustness is h1
- Timeouts, Retries, and Ordering
- Addressing Server and Content Error
- Polling Carefully
- Understanding the Ajax Architecture Effect
- The Location Hash Technique
- 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).
- 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,
- 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 »