Home arrow Design Usability arrow Gzip Components in Action
DESIGN USABILITY

Gzip Components in Action


In this conclusion to a three-part series on reducing the size of the HTTP response with gzip encoding, you'll finish configuring gzip components and finally see them in action. This article is excerpted from chapter four of the book High Performance Web Sites: Essential Knowledge for Frontend Engineers, written by Steve Sounders (O'Reilly; ISBN: 0596529309). Copyright © 2007 O'Reilly Media, Inc. All rights reserved. Used with permission from the publisher. Available from booksellers or direct from O'Reilly Media.

Author Info:
By: O'Reilly Media
Rating: 5 stars5 stars5 stars5 stars5 stars / 6
January 19, 2011
TABLE OF CONTENTS:
  1. · Gzip Components in Action
  2. · Gzip in Action

print this article
SEARCH DEVARTICLES

Gzip Components in Action
(Page 1 of 2 )

Edge Cases

The coordination of compression between servers and clients seems simple, but it must work correctly. The page could easily break if either the client or server makes a mistake (sending gzipped content to a client that canít understand it, forgetting to declare a compressed response as gzip-encoded, etc.). Mistakes donít happen often, but there are edge cases to take into consideration.

Approximately 90% of todayís Internet traffic travels through browsers that claim to support gzip. If a browser says it supports gzip you can generally trust it. There are some known bugs with unpatched early versions of Internet Explorer, specifically Internet Explorer 5.5 and Internet Explorer 6.0 SP1, and Microsoft has published two Knowledge Base articles documenting the problem (http://support.microsoft.com/ kb/313712/en-us and http://support.microsoft.com/kb/312496/en-us). There are other known problems, but they occur on browsers that represent less than 1% of Internet traffic. A safe approach is to serve compressed content only for browsers that are proven to support it, such as Internet Explorer 6.0 and later and Mozilla 5.0 and later. This is called a browser whitelist approach.

With this approach you may miss the opportunity to serve compressed content to a few browsers that would have supported it. The alternativeóserving compressed content to a browser that canít support itóis far worse. Usingmod_gzipin Apache 1.3, a browser whitelist is specified usingmod_gzip_item_includewith the appropriateUser-Agent values:

  mod_gzip_item_include reqheader "User-Agent: MSIE [6-9]"
  mod_gzip_item_include reqheader "User-Agent: Mozilla/[5-9]"

In Apache 2.x use theBrowserMatch directive:

  BrowserMatch ^MSIE [6-9] gzip
  BrowserMatch ^Mozilla/[5-9] gzip

Adding proxy caches to the mix complicates the handling of these edge case browsers. Itís not possible to share your browser whitelist configuration with the proxy. The directives used to set up the browser whitelist are too complex to encode using HTTP headers. The best you can do is addUser-Agentto theVaryheader as another criterion for the proxy.

 Vary: Accept-Encoding,UseAgent

Once again,mod_gziptakes care of this automatically by adding theUser-Agentfield to theVaryheader when it detects that youíre using a browser whitelist. Unfortunately, there are thousands of different values forUser-Agent. Itís unlikely that the proxy is able to cache all the combinations ofAccept-EncodingandUser-Agentfor all the URLs it proxies. Themod_gzipdocumentation (http://www.schroepl.net/projekte/ mod_gzip/cache.htm) goes as far as to say, ďusing filter rules evaluating the User- Agent HTTP header will lead to totally disabling any caching for response packets.Ē Because this virtually defeats proxy caching, another approach is to disable proxy caching explicitly using aVary: *orCache-Control: privateheader. Because theVary: *header prevents the browser from using cached components, theCache-Control: privateheader is preferred and is used by both Google and Yahoo!. Keep in mind that this disables proxy caching for all browsers and therefore increases your bandwidth costs because proxies wonít cache your content.

This decision about how to balance between compression and proxy support is complex, trading off fast response times, reduced bandwidth costs, and edge case browser bugs. The right answer for you depends on your site:

  1. If your site has few users and theyíre a niche audience (for example, an intranet or all using Firefox 1.5), edge case browsers are less of a concern. Compress your content and useVary: Accept-Encoding. This improves the user experience by reducing the size of components and leveraging proxy caches.
  2. If youíre watching bandwidth costs closely, do the same as in the previous case: compress your content and useVary: Accept-Encoding. This reduces the bandwidth costs from your servers and increases the number of requests handled by proxies.
  3. If you have a large, diverse audience, can afford higher bandwidth costs, and have a reputation for high quality, compress your content and useCache-Control: Private. This disables proxies but avoids edge case bugs.

There is one more proxy edge case worth pointing out. The problem is that, by default, ETags (explained in Chapter 13) donít reflect whether the content is compressed, so proxies might serve the wrong content to a browser. The issue is described in Apacheís bug database (http://issues.apache.org/bugzilla/show_bug. cgi?id=39727). The best solution is to disable ETags. Since thatís also the solution proposed in Chapter13, I go into more detail about ETags there.


blog comments powered by Disqus
DESIGN USABILITY ARTICLES

- Responsive Web Design: More Than Just a Buzz...
- Add New Website Features to Please Users
- Gzip Components in Action
- Configuring Gzip Components
- Gzip Components
- Create Great JavaScript and CSS Menus Simply
- Design Principles that Shape a Web Site
- Creating Aqua Style Images
- Easy as A,B,C Ė dynamic A to Z indexes
- EasyChart: a Usability Teaching Tool to Demo...
- Building Friendly Pop-up Windows
- Back to School: Design Usability
- Using HTML_QuickForm To Manage Web Forms, Pa...
- Using HTML_QuickForm To Manage Web Forms, Pa...
- More Website Knick Knack

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials