Home arrow Design Usability arrow Page 2 - 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 - Gzip in Action
(Page 2 of 2 )

Three examples for Rule 4 demonstrate the different degrees of compression you can deploy across your site.

Nothing Gzipped
   http://stevesouders.com/hpws/nogzip.html

HTML Gzipped
   http://stevesouders.com/hpws/gzip-html.html

Everything Gzipped
   http://stevesouders.com/hpws/gzip-all.html

In addition to the 48.6K HTML document, each example page contains a 59.9K stylesheet and a 68.0K script. Table 4-3 shows how the total page size varies with the amount of compression that is performed. Compressing the HTML document, stylesheet, and script reduces this page size from 177.6K to 46.4K, a size reduction of 73.8%! Compression typically reduces the content size by approximately 70%, but it varies depending on the amount of whitespace and character repetition.

Table 4-3. Page weight savings for different levels of compression

                         Components (HTML 

Example

CSS, JS)

Total size

Size savings

Response time

Time savings

Nothing Gzipped

48.6K, 59.9K, 68.0K

177.6K

-

1562 ms

-

HTML Gzipped

13.9K, 59.9K, 68.0K

141.9K

34.7K (19.7%)

1411 ms

151 ms (9.7%)

Everything Gzipped

13.9K, 14.4K, 18.0K

46.4K

130.2K (73.8%)

731 ms

831 ms (53.2%)

The page with everything compressed loads ~831 milliseconds faster than the non-compressed example, a response time reduction of 53.2%. This was measured over a 900 Kbps DSL line. The absolute response time values vary depending on Internet connection, CPU, browser, geographic location, etc. However, the relative savings remain about the same. A simple change in your web server configuration, compressing as many components as possible, dramatically improves the speed of your web pages. 


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