Gzip in Action
Three examples for Rule 4 demonstrate the different degrees of compression you can deploy across your site.
- Nothing Gzipped
- HTML Gzipped
- Everything Gzipped
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, ...