Make the Web Faster

How gzip compression works

Authors: Kevin Khaw & Eric Higgins, Google Webmasters

Recommended experience: Working knowledge of HTTP and HTML

High level overview of a browser request with and without gzip compression

Server without gzip:

Browser:

  • Connects to server and requests page.
  • Server that browser supports gzip "Accept-Encoding: gzip".
Server:
  • No gzip support. Ignores gzip request. Sends uncompressed page.
Browser:
  • Receive page.
  • Display page.

Server with gzip:

Browser:

  • Connects to server.
  • Notifies server that browser supports gzip "Accept-Encoding: gzip".
Server:
  • Acknowledges gzip support.
  • Sends gzip encoded page with header "Content-Encoding: gzip".
Browser:
  • Receive page.
  • Decode gzip encoded page based on header "Content-Encoding: gzip".
  • Display page.

How gzip compresses

Simply put, gzip compression works by finding similar strings within a text file, and replacing those strings temporarily to make the overall file size smaller. This form of compression is particularly well-suited for the web because HTML and CSS files usually contain plenty of repeated strings, such as whitespace, tags, and style definitions.

Example

In this example, I'll demonstrate how using identical tags will compress a snippet of code further than using different tags.

In this first snippet, I count to 5 using progressive header tags.

Uncompressed: 69 bytes
Compressed: 85 bytes

<h1>One</h1>
<h2>Two</h2>
<h3>Three</h3>
<h4>Four</h4>
<h5>Five</h5>

By changing the header tags to identical div tags, my source code grows by 10 bytes, but once compressed, it shrinks down to 66 bytes, smaller than the source code used in the previous snippet!

Uncompressed: 79 bytes
Compressed: 66 bytes

<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>

Many developers might take this example to mean that using only div and span tags might be a way to force their pages to compress further. While this is certainly true in many cases, it's important to note that semantically correct markup is important for accessibility, and makes your pages easier to read. Nevertheless, there are optimizations that can be made using this method, and it'll be up to you, the developer, to decide where those are appropriate.

Additional resources

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.