High Performance Web Sites

Gzip in Action

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 6-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 6-3. Page weight savings for different levels of compression

Example	Components (HTML, 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 noncompressed 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, ...