Now that you've learned how to crunch your content, let's look at some more advanced server- and client-side techniques for increasing web performance.
On the server-side, this chapter explores methods that you can use to boost performance by:
- Optimizing parallel downloads
- Caching frequently used objects
- Using HTTP compression
- Deploying delta encoding
- Rewriting URIs with
mod_rewrite
On the client side we'll investigate procedures that you can use to improve the speed of content delivery including:
- Delaying script loading
- Progressive enhancement
- Loading JavaScript on Demand (Remote Procedure Calls)
- Inline Images with Data URIs
Although these techniques take some additional effort, they boost both perceived and actual web page speed. What follows is an outline of this chapter:
- Advanced Web Performance Optimization
- Server-Side Optimization Techniques
- Optimizing Parallel Downloads
- Caching Frequently Used Objects
- Using HTTP Compression
- Figure 9-8 + Code. File size savings in HTTP compression
- Compressing Content in Apache
- Average Compression Ratios for HTTP Compression
- Use of HTTP compression among the Fortune 1000
- JavaScript optimization and gzip
- Delta encoding (delta compression)
- Same URI delta compression
- Different URI delta compression
- Production delta compression
- Delta encoding and RSS
- The Benefits of a Content Delivery Network
- Rewriting URIs with mod_rewrite
- Client-Side Performance Techniques
- Delay Script Loading
could be "Delay or Accelerate Script Loading" to account for cache example
- Use Progressive Enhancement
- News Harvester: Overlaying static HTML with DHTML
- Progressively enhanced tabs
- Load JavaScript on demand (remote procedure calls)
- Improvements to JavaScript on demand
- Consider JavaScript libraries to avoid problems
- Use an iframe for external JavaScript
- Cache Offsite Files on the Server and Load Locally
was h3 now h2
- JavaScript Optimization and Packing
- Extreme optimization not advised
- Inline Images with Data URIs
- Summary
Further Reading
- High Performance Web Sites: Essential Knowledge for Front-End Engineers
- After you've tried everything else, Steve Souders' shows 14 specific rules you can use to squeeze 20% to 25% more speed out of your website. O'Reilly Media, 2007.
- Web Performance Tuning: Speeding Up the Web, 2d ed.
- Patrick Killelea's primarily server-side how-to on boosting the performance and reliability of websites. O'Reilly Media, 2002.
Footnotes
- Theurer, T., and S. Souders. April 11, 2007. "Performance Research, Part 4: Maximizing Parallel Downloads in the Carpool Lane."
- Yahoo! Interface Blog, http://yuiblog.com/blog/2007/04/11/performance-research-part-4/ (accessed February 11, 2008). Theurer provided the author with an updated figure.
- Breen, R. December 18, 2006. "Circumventing browser connection limits for fun and profit."
- Ajax Performance, http://www.ajaxperformance.com/?p=33 (accessed February 11, 2008). Figure 9-2 used with permission.
- Theurer, T. November 28, 2006. "Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests."
- Yahoo! User Interface Blog, http://yuiblog.com/blog/2006/11/28/performance-researchpart-1/ (accessed February 11, 2008).
- Port80 Software. July 2007. "Port80 Surveys HTTP Cache Control on the Top 1000 Corporations' Web Sites."
- Port80 Software, http://www.port80software.com/surveys/top1000cachecontrol/ (accessed February 11, 2008).
- Bent, L. et al. 2004. "Characterization of a Large Web Site Population with Implications for Content Delivery."
- In WWW 2004 (New York: May 17-22, 2004), 522-533.
- The mod_gzip software for Apache 1.3,
- and a link to a 2.x version, are available from SourceForge at http://
sourceforge.net/projects/mod-gzip/. A development version of mod_gzip for Apache 2.0 is available at http://www.gknw.com/development/apache/httpd-2.0/unix/modules/.
- See Table 18.2, "Content Encoding Average Compression Ratios for Different Web Site Categories,"
- in my
book Speed Up Your Site: Web Site Optimization (New Riders).
- Destounis, P. et al. 2001. "Measuring the mean Web page size and its compression to limit latency and
improve download time."
- Internet Research 11 (1): 15. Analyzing five popular websites (CNN.com, Disney.
com, IBM.com, Microsoft.com, and Netscape.com), Destounis found a mean compression gain of 75.2%
across 9,281 HTML pages. The mean web page size was 13,540 bytes.
- Savant, A., and T. Suel. 2004. "Server-Friendly Delta Compression for Efficient Web Access."
- In Proc. of the
8th International Workshop on Web Content Caching and Distributing, 303-322.
- Mogul, J. et al. 1997. "Potential benefits of delta-encoding and data compression for HTTP."
- In SIGCOMM
1997 (Cannes, France: September 14-18, 1997), 181-194.
- Mogul, J. et al. January 2002. "Delta encoding in HTTP."
- RFC 3229, http://www.ietf.org/rfc/rfc3229.txt (accessed February 11, 2008).
- Scoble, R. September 8, 2004. "Full text RSS on MSDN gets turned off."
- Scobleizer, http://radio.weblogs.com/0001011/2004/09/08.html#a8195 (accessed February 11, 2008).
- Wyman, B. September 13, 2004. "Using RFC3229 with Feeds."
- As I May Think, http://www.wyman.us/main/2004/09/using_rfc3229_w.html (accessed February 11, 2008).
- Wyman, B. October 3, 2004. "Massive Bandwidth Savings proven!"
- As I May Think, http://wyman.us/main/2004/10/massive_bandwid.html (accessed February 11, 2008).
- Google's "Gears" API includes the ability to run scripts asynchronously in the background.
- Available at Google Gears.
- Chipman, S.G. September 26, 2005. "09.26.2005-Safari & createElement('script')."
- slayeroffice, http://slayeroffice.com/archives/?p=172 (accessed February 11, 2008).
- Eisenzopf, J. September 1, 1999. "Using RSS News Feeds."
- "Mother of Perl" column, WebReference.com, http://www.webreference.com/perl/tutorial/8/ (accessed February 11, 2008).
- Masinter, L. August 1998. "The 'data' URL scheme."
- RFC 2397, http://www.ietf.org/rfc/rfc2397.txt (accessed February 11, 2008).
- Lawson, B. December 19, 2007. "IE8 passes Acid2 test."
- The Web Standards Project, http://www.webstandards.org/2007/12/19/ie8-passes-acid2-test-2/ (accessed February 12, 2008).
- For our inline image size comparison,
- the folder image was 526 bytes for the Base64 code, versus 409 bytes
gzipped, versus 377 bytes for the folder image GIF.
- Mozilla Developer Center. February 12, 2007. "The data URL scheme."
- Mozilla Foundation, http://developer.mozilla.org/en/docs/The_data_URL_scheme (accessed February 11, 2008).
- Herrera, B. March 25, 2005. "A Cross-Browser Method for Embedding Images in Self-Contained HTML Documents."
- BennHerrera.com, http://www.bennherrera.com/EmbeddedImage/EmbeddedImageArticle.html (accessed February 12, 2008).
« Ajax Optimization |
Advanced Web Performance Optimization |
Website Optimization Metrics »