Why Is Content-Encoding Important To Web Performance?

Let’s start by defining content-encoding. In the context of web performance content encoding is a way for websites to shrink files before sending them to your browser, making pages load faster. It reduces the amount of data that needs to be downloaded, which helps improve website speed and performance.

If you’ve ever used a .zip file then you’ve experienced content encoding. The web doesn’t use zip, but it does use a variety of other options.

Here’s how it works. Without content-encoding, the web server sends an html file, which is plain text, and the browser renders it. WITH content-encoding the server first compresses the file, then sends it. The browser understands the compression format, decompresses it, and renders it. Images and other files are also compressed.

Why does this matter you ask?

Because the compressed files are dramatically smaller! Here’s an example, we’ll use the source of wordpress.org.

Look at those differences!

What To Do With This

Ironically there’s not much a web developer can do to turn this on or off, or choose a compression type. The host does that. You can ask, but they probably have a standard. So why do you care? Because some hosts don’t have it turned on at all!

So now I’m going to show you how to check.

Open a terminal window and put this in:

curl -I -H 'Accept-Encoding: gzip,deflate,br,zstd,compress' https://wordpress.org | grep content-encoding

and you’ll want to see something similar to this:

content-encoding: br

If you get nothing at all, then the host doesn’t have it turned on. You can request it be turned on, or perhaps it might be beneficial look for a new host.

Let’s breakdown what is going on in that command:

Curl is essentially a browser. It makes a request for a URL and brings back a web page. But in this case we don't want the page, we want just the headers, the communication between browser and server, so we use the -I flag.

Then we want to send a header, so we use -H, and we tell it what kinds of encoding we can accept - in this case any of these: "gzip,deflate,br,zstd,compress", all of which are standard and accepted by all modern browsers.

Then we put in the URL, wordpress.org.

That would get us all of the headers, including the one we want. But if we want to sift out JUST what we want, we can pipe it to grep, and search the headers with this:

| grep content-encoding

Here’s what it looks like on my command line:

An Alternative

If you’re not comfortable with the command line, or curl isn’t installed, you can use the HTTP Header Checker from KeyCDN. If you put in a URL you’ll get something like this:

* Bonus points if you spot Olaf The Snowman in the headers!

Compression Types

All of the common compression types are used in the command above. They vary in ability to compress, but any of them are better than nothing at all. The current best and most common is called Brotli.

Here’s a list with links to learn more about them.

• gzip
• deflate
• br
• zstd
• compress

Summary

While content encoding is rarely something you as a website owner or developer will configure, knowing what it is, and being able to tell it’s working, is an important tool.

As I mentioned at the beginning, most hosts have this already configured, but simply assuming things are configured properly can only lead to tears.

Additional Reading

• Mozilla Developer Docs
• nginx Docs
• Apache Commons

The post Why Is Content-Encoding Important To Web Performance? appeared first on Performance Hub.