Two seconds might not seem like long. When it comes to your website, though, a lot can happen in that short span of time.

According to Google, an increase in page load time from one to three seconds increases bounce rate by 32% — that’s a significant portion of your audience heading elsewhere due to just a bit of lag.

Clearly, the bar is high when it comes to website performance. To stay in the ring with your competitors, you’ll need to prioritize reducing your page load times in order to show visitors, leads, and customers what they want, when they want it (i.e. as quickly as possible).

In this port, we’ll be discussing one cornerstone of web technology that keeps the internet blazing fast: compression — specifically a type of compression called GZIP.

You’ve probably compressed files before by “zipping” them. However, most people don’t know that compression methods like GZIP are also key in sending billions of web pages from servers to users every day.

In this post, I’ll explain what GZIP compression is, how it works on the web, and how to use it to optimize your website. But first, let’s zoom out to better understand file compression as a concept.

Download Now: Free Intro Guide to HTML & CSS

What Is Compression?

In broad terms, compression is the process of reducing file sizes and is accomplished using a compression algorithm. A compression method can either be lossy, meaning some information is lost in the compression process, or lossless, which means all information from the original file is preserved in the compressed file.

Here’s why this is relevant to your website: At its core, a website is a group of related files stored on a web server. When you enter a URL into your browser, your browser sends a request (typically an HTTP GET request) to the web server that hosts your desired content. The server processes your request, retrieves the right files from its database — including HTML and any associated CSS, JavaScript, and media files — then sends the files to your browser as an HTTP response. Finally, your browser renders the files into what you see as a web page.

a diagram of an http interaction between a browser and a web server

Image Source

This seems like a lot of work to load a cat video, but it’s true — every time you load a page, a web server must transmit all the necessary data to your computer. Each data transfer requires some amount of time, largely depending on the size of the transferred files — the more data there is to send, the longer it takes for a page to load in your browser.

According to httparchive, the median size of a data transfer like this is around 2,000 kilobytes, the data equivalent of roughly 100 pages of plain text. With media-heavy pages, the size can be three to four times larger.

How, then, do we keep the internet fast? The solution, as you may guess, is that web servers compress files before sending them to browsers — they turn our 100-page text document into more like a 30-page essay. The reasoning is simple: smaller files mean less work that servers and browsers need to do to transfer them. Once the browser receives the compressed response, it quickly decompresses the contents and we’re happy with the faster load time.

Compression works well with code like HTML because its syntax is repetitive. Compression algorithms generally work by finding repeated information in a file and abbreviating it somehow. HTML uses tags like <div> and <p> over and over and compression methods work to temporarily eliminate these repetitions and shorten files — GZIP is one such method.

What Is GZIP Compression?

GZIP is a compression technology frequently used for transferring data quickly over the internet. “GZIP” refers to a compression method, software used to compress files with this method, and the file format that results from GZIP compression (usually indicated by the file extension .gz).

GZIP is the current standard for file compression on the web. Research by W3Techs shows that of the websites that compress their content, more than 99% employ GZIP.

GZIP was introduced in 1992 and originally intended for use by GNU (hence the “G” in GZIP) as a free and open-source alternative to proprietary compression methods at the time. This accessibility contributed to GZIP’s ubiquity.

We won’t go into specifics of how exactly GZIP compresses files — in essence, GZIP implements the lossless DEFLATE algorithm, which locates and removes duplicate characters on text files. For now, you just need to know why GZIP is often preferred over similar compression methods.

Why Do We Use GZIP Compression?

GZIP is effective, but it’s not the only compression method out there. In fact, it’s not even the best method in terms of size reduction.

GZIP can reduce the amount of data by up to 70%. Not bad, except tests comparing compressed file sizes across different compression algorithms have shown that alternative algorithms like Brotli outperform GZIP for text-based assets. If this is true, why do we still rely so much on GZIP?

The main reason is that GZIP tends to be faster than comparable methods. It compresses files in a fraction of the time that other methods take. This speed is crucial for data transfers over the web. After all, the point of compression is to speed up websites — what’s the point if the compression itself slows things down?

Also important is the fact that GZIP compression uses fewer resources than comparable methods. It requires relatively little computing power and temporary memory space to work. This is key when considering server space and the fact that half of global web traffic is mobile — GZIP is effective for sending web pages to high- and low-powered devices alike.

Before we continue, note that GZIP compression is not the same as ZIP compression. ZIP is another lossless compression format that is more often used for storing files than transferring them.

How To Check GZIP Compression

For a file transfer to work with GZIP, two things must happen. First, the web browser tells the web server that it can accept GZIP-compressed files. This is accomplished by including the Accept-Encoding HTTP header in the browser’s request:

 
Accept-Encoding: gzip, deflate

Most browsers today include this header in requests by default.

Second, the web server processes this header and decides to either compress the requested files or leave them be. If the files are compressed with GZIP, the server includes the following header in its response:

 
Content-Encoding: gzip

...which tells the browser that the files must be decompressed with the GZIP method.

If you want your website files to be sent compressed, you must enable your server to handle GZIP requests. Your site’s web server may or may not have GZIP compression enabled by default, depending on your site’s configuration. Lucky for us, it’s easy to check without unpacking your server’s contents. Here are a few ways to find out:

Online GZIP Compression Test

Many free websites will confirm if GZIP is enabled — just paste the URL of a webpage and see your results. Some websites will also provide a brief report explaining how much GZIP reduced the file size:

the results from a GZIP compression check tool

Image Source

Online Speed Test

Many free speed tests like Google’s PageSpeed Insights and Pingdom include a recommendation to use GZIP on certain files if necessary. Here’s a warning from the Google PageSpeed Insights tool:

a GZIP compression warning from google site speed checker

Check the HTTP Header in Developer Tools

To check for GZIP compression without an external tool, you can use the developer tools panel in your browser. Most browsers let you inspect page elements and view performance information this way.

First, load the web page you want to check in your browser. Then, open the developer tools panel and select the Network tab. You’ll see a list of all the resources sent by the web server (if not, you may need to reload the page). Click one resource to view its contents. Make sure you have the Headers tab selected, then scroll down to the content-encoding header to see which method was used.

Here’s what a resource compressed with GZIP looks like using Chrome Developer Tools:

the contents of a resource viewed in chrome developer tools

How To Enable GZIP Compression

Since GZIP compression happens on the web server, the configuration process will depend on your hosting provider and server architecture.

If you find that GZIP compression is not implemented on your web server, we recommend checking your hosting provider’s documentation for instructions on enabling GZIP compression before trying the methods below. Your host may not recommend or even allow you to modify server files.

If you have this permission, here are some solutions for common web server setups:

How To Enable GZIP Compression on an Apache Web Server

Those with websites on Apache servers can enable GZIP compression via the .htaccess file, which controls various server permissions. Add the following code to your .htaccess file, then save the file:

 
<IfModule mod_deflate.c>
         AddOutputFilterByType DEFLATE application/javascript
         AddOutputFilterByType DEFLATE application/rss+xml
         AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
         AddOutputFilterByType DEFLATE application/x-font
         AddOutputFilterByType DEFLATE application/x-font-opentype
         AddOutputFilterByType DEFLATE application/x-font-otf
         AddOutputFilterByType DEFLATE application/x-font-truetype
         AddOutputFilterByType DEFLATE application/x-font-ttf
         AddOutputFilterByType DEFLATE application/x-javascript
         AddOutputFilterByType DEFLATE application/xhtml+xml
         AddOutputFilterByType DEFLATE application/xml
         AddOutputFilterByType DEFLATE font/opentype
         AddOutputFilterByType DEFLATE font/otf
         AddOutputFilterByType DEFLATE font/ttf
         AddOutputFilterByType DEFLATE image/svg+xml
         AddOutputFilterByType DEFLATE image/x-icon
         AddOutputFilterByType DEFLATE text/css
         AddOutputFilterByType DEFLATE text/html
         AddOutputFilterByType DEFLATE text/javascript
         AddOutputFilterByType DEFLATE text/plain
          AddOutputFilterByType DEFLATE text/xml
</IfModule>

This will compress all HTML, CSS, JavaScript, XML, and font files. After saving, check your compression with any of the methods described in the previous section.

How To Enable GZIP Compression on an NGINX Web Server

NGINX server software only compresses HTML files by default. If your server uses NGINX, you can enable GZIP compression on your site’s files by opening your nginx.conf file and finding the following line:

 
gzip on;

Directly below this line, paste the following code:

 
gzip_vary on;
gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml;
gzip_min_length 1000;
gzip_proxied no-cache no-store private expired auth;

Then, save the file and reload your NGINX configuration before testing compression.

gzip_types specifies the file types that are compressed. You can add or remove items from this line as you see fit. gzip_min_length is the minimum length that the response must be to be compressed. Here, it’s set to 1000 bytes (one KB), but this can be changed if desired.

How To Enable GZIP Compression in WordPress

WordPress is CMS software, not a server configuration. However, if you run a WordPress website you can install a performance plugin that modifies server files for you. This is possible with performance optimization suites like WP Super Cache, WP Rocket, or PageSpeed Ninja. There’s also the Enable Gzip Compression, which does exactly what the name implies on Apache servers.

Again, just because you can install and use a plugin doesn’t mean you have permission to change your server’s configuration. Consult the proper documentation or contact your host if you encounter problems enabling GZIP compression this way.

Compress to Impress

Remember, the goal of all of this tech talk is to give your visitors the best user experience possible by delivering the fastest pages possible. “Speeding up a site” may seem like a black box if you’re unfamiliar with what actually determines page speed in the first place.

By implementing compression on your web server, you’ll give visitors the content they want with no extra cost. You’ll capture more impressions, drive higher engagement, and convert more visitors into customers. Site speed greatly affects your online success, so there’s no time to waste!

New Call-to-action

 css introduction

Originally published Dec 16, 2020 7:00:00 AM, updated January 12 2021

Topics:

Website Performance