Home arrow Design Usability arrow Page 2 - Gzip Components
DESIGN USABILITY

Gzip Components


Reducing the amount of time it takes to transfer an HTTP request and response across a network improves the user experience. There are a number of ways to do this. In this three-part article series, you'll learn how to do it by reducing the size of the HTTP response with gzip encoding. 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 / 3
January 03, 2011
TABLE OF CONTENTS:
  1. · Gzip Components
  2. · What to Compress

print this article
SEARCH DEVARTICLES

Gzip Components - What to Compress
(Page 2 of 2 )

Servers choose what to gzip based on file type, but are typically too limited in what they are configured to compress. Many web sites gzip their HTML documents. Itís also worthwhile to gzip your scripts and stylesheets, but many web sites miss this opportunity (in fact, itís worthwhile to compress any text response including XML and JSON, but the focus here is on scripts and stylesheets since theyíre the most prevalent). Image and PDF files should not be gzipped because they are already compressed. Trying to gzip them not only wastes CPU resources, it can also potentially increase file sizes.

There is a cost to gzipping: it takes additional CPU cycles on the server to carry out the compression and on the client to decompress the gzipped file. To determine whether the benefits outweigh the costs you would have to consider the size of the response, the bandwidth of the connection, and the Internet distance between the client and the server. This information isnít generally available, and even if it were, there would be too many variables to take into consideration. Generally, itís worth gzipping any file greater than 1 or 2K. Themod_gzip_minimum_file_sizedirective controls the minimum file size youíre willing to compress. The default value is 500 bytes.

I looked at the use of gzip on 10 of the most popular U.S. web sites. Nine sites gzipped their HTML documents, seven sites gzipped most of their scripts and stylesheets, and only five gzipped all of their scripts and stylesheets. The sites that donít compress all of their HTML, stylesheets, and scripts are missing the opportunity to reduce the page weight by up to 70%, as weíll see in the next section, ďThe Savings.Ē A survey of major web sites and what they choose to compress is shown in Table 4-1.

Table 4-1. Gzip use for 10 popular U.S. web sites

 

Web site

Gzip HTML

Gzip scripts

Gzip stylesheets

http://www.amazon.com

http://www.aol.com

some

some

http://www.cnn.com

http://www.ebay.com

http://froogle.google.com

http://www.msn.com

deflate

deflate

http://www.myspace.com

http://www.wikipedia.org

http://www.yahoo.com

http://www.youtube.com

some

some

 

The Savings

Gzipping generally reduces the response size by about 70%. Table 4-2 shows examples of size reductions for scripts and stylesheets (small and large). In addition to gzip, the results for deflate are also shown.

Table 4-2. Compression sizes using gzip and deflate

File type Uncompressed size Gzip size Gzip savings Deflate size Deflate savings
Script 3,277 bytes 1076 bytes 67% 1112 bytes 66%
Script 39,713 bytes 14,488 bytes 64% 16,583 bytes 58%
Stylesheet 968 bytes 426 bytes 56% 463 bytes 52%
Stylesheet 14,122 bytes 3,748 bytes 73% 4,665 bytes 67%

Itís clear from Table 4-2 why gzip is typically the choice for compression. Gzip reduces the response by about 66% overall, while deflate reduces the response by 60%. For these files, gzip compresses ~6% more than deflate.

Please check back for the second part of this three-part series.


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

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