How to enable gzip compression for your website
Most of the time, gzip compression will make your server perform better and more resource efficient. This tutorial will show you how to enable gzip compression for your nginx server.
What is gzip compression
Gzip is a method of compressing files (making them smaller) for faster network transfers. It is also a file format but that’s out of the scope of this post.
Compression allows your web server to provide smaller file sizes which load faster for your website users.
Enabling gzip compression is a standard practice. If you are not using it for some reason, your webpages are likely slower than your competitors.
Enabling gzip also makes your website score better on Search Engines.
How compressed files work on the web
When a request is made by a browser for a page from your site, your webserver returns the smaller compressed file if the browser indicates that it understands the compression. All modern browsers understand and accept compressed files.
How to enable gzip on Apache web server
To enable compression in Apache, add the following code to your config file
AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript
How to enable gzip on your Nginx web server
To enable compression in Nginx, you will need to add the following code to your config file
gzip on; gzip_comp_level 2; gzip_http_version 1.0; gzip_proxied any; gzip_min_length 1100; gzip_buffers 16 8k; gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript; # Disable for IE < 6 because there are some known problems gzip_disable "MSIE [1-6].(?!.*SV1)"; # Add a vary header for downstream proxies to avoid sending cached gzipped files to IE6 gzip_vary on;
As with most other directives, the directives that configure compression can be included in the http context or in a server or location configuration block.
The overall configuration of gzip compression might look like this.
server {
gzip on;
gzip_types text/plain application/xml;
gzip_proxied no-cache no-store private expired auth;
gzip_min_length 1000;
...
}
How to enable gzip on your WordPress
If you have a WordPress website and you can’t edit the Apache or Nginx config file, you can still enable gzip using a plugin like WP Super Cache by Automattic.
After installing the plugin, go to its Advanced Settings tab and check on the settings “Compress pages so they’re served more quickly to visitors. (Recommended)“ to enable gzip compression.
However, keep in mind that this plugin comes with a lot of more features, some of which you may not want. So if you don’t like the extra features, you can just use a more simple plugin like Gzip Ninja Speed Compression or Check and Enable Gzip Compression.
How to check if gzip is successfully enabled and working
Using Firefox to check gzip compression
If you are using Firefox, do the following steps:
- Open Developer Tools by one of these methods:
- Menu > Developer > Toggle Tools
- Ctrl + Shift + I
- F12
- Switch to Network Tab in the Developer Tools.
- Launch the website that you want to check.
- If gzip is working, the request to html, css, javascript and text files will have the Transferred column smaller than the Size column, where Transferred column displays the size of the compressed content that was transferred, and the Size column shows the size of the original content before compression.
Using Chrome to check gzip compression
If you are using Chrome, do the following:
- Open Developer Tools by one of these methods:
- Menu > More tools > Developer Tools
- Ctrl + Shift + I
- F12
- Switch to Network Tab in the Developer Tools.
- Launch the website that you want to check.
- Click on the request you want to check (html, css, javascript or text files), the request detail will be displayed.
- Toggle Response Headers of that request.
- Check for Content-Encoding: gzip.
- If gzip is working, the Content-Encoding: gzip will be there.
- Make sure you check the Response Headers and not the Request Headers.
Frequently Asked Questions
How efficient is gzip?
As you can see in the Firefox Developer Tools Network Tab, the compressed size is normally one third or one fourth the original size. This ratio differs from requests to requests but usually that’s the ratio for html, css, javascript and text files.
Will gzip make my server slower?
OK, that’s a smart question. Since the server has to do the extra work to compress the response, it may need some more CPU power. However, the CPU power that is saved during transferring the response usually makes up for that, not to say that more CPU power is saved. Therefore, at the end of the day, normally your server would be more CPU efficient.
Should I enable gzip for image files (and media files in general)?
Image files are usually already compressed, so gzip compressing the image will not save you a lot of bytes (normally less than 5%), but on the other hand requires a lot of processing resource. Therefore, you shouldn’t enable gzip for your images and should only enable gzip for html, css, javascript and text files.