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
Website gzip compression makes it possible to reduce the file size of a web file (like HTML, PHP, CSS and Javascript files) to about 30% or less of its original size before these files get sent to the browser. Offers you the power to enable and disable Gzip compression on your WordPress site. Supports Apache HTTP Server. If you need help or plugin is not working for you, consider the premium.
Gzip Compression Ratio For Text
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
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
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.
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.
The vast majority of websites today use some kind ofcompression, delivering their content, as most modern browserssupport compression. Compression is useful when applied to text(html, javascript, js), as images (usually png) are alreadycompressed. The result of compression is remarkable bandwidthsaving, so the site becomes more responsive. This is also a SEOadvantage.
Compression will slightly increase CPU usage, but in most casesthis is not a problem, comparing to compression advantages.
The most common compression solution is gzip compression. Almost allweb servers support gzip compression. Nginx has built-in httpcompression. This is probably a reason why Nginx rapidly gainspopularity.
Here I describe how to setup and test gzip compression in aDebian system with Apache using Apache module mod_deflate. Mod_deflate is the Apache2 successor ofApache v1.* mod_gzip. For other popular web servers you can findinformation here: IIS, Nginx.
Installation
In latest Debian version (Debian 6 or Squeeze),mod_deflate is installed and enabled. If not:
Edit website configutation file, for example:
add the following lines:
Explanation of above Apache directives:
- Line 1: Enable gzip compression
- Line 2: Do not compress images
- Line 3: Do not compress already compressed files
- Line 4: Do not compress pdf
- Line 6-8: Some exceptions for old browsers
That’s all. Don’t forget to restart Apache.
Gzip Compression Algorithm
As an alternative, you can use an .htaccess file inyour webroot directory (with the same Apache directives).
Gzip compression using PHP
If your site is PHP based, there is an alternative (notrecommended) method to apply gzip compression. Just makethe following changes to php.ini, save and restartApache:
Check gzip compression using mod_deflate logs
In order mod_deflate to keep logs, add the followinglines to website configuration file (and restart Apache).
To check mod_deflate log file:
Example
Comments on above log file entries:
- Line 1: http://www.pontikis.net (compressed html document 4468bytes, original 18229 bytes, compression ratio of 24%)
- Line 2: relevant log for layout.css
- Line 3: relevant log for jquery.js
- Line 4: relevant log for http://www.pontikis.net/blog/
- Line 5: image (people.png) was not compressed
- Line 6: relevant log forhttp://www.pontikis.net/labs/jui_datagrid/demo/
- Line 7: relevant log for http://www.pontikis.net/feed/ (xmldocument)
You probably need to remove logging in a production server,after you check compression results.
Check gzip compression with online tools
Suggested tools:
- GIDzip test http://www.gidnetwork.com/tools/gzip-test.php
- DNSqueries.com test http://www.dnsqueries.com/en/check_http_gzip.php
- HTTP Compression Test http://www.whatsmyip.org/http-compression-test/
Check http headers
Gzip compression can be detected from http headers, looking forContent-Encoding: gzip. In this example, the pagehttp://www.pontikis.net/blog/ is examined:
Chrome developer tools
Go to http://www.pontikis.net/blog/, press CTRL+SHIFT+I (orMenu button → Tools → Developer tools) and go to Network tab
Firebug (Firefox)
Go to http://www.pontikis.net/blog/, press F12 to activateFirebug and go to Net tab
Redbot.org
Using the online tool Redbot.org
We appreciate your feedback and suggestions. Leave us a commentbelow.
Entrepreneur Full-stack developer Founder of MediSign Ltd. I have over 15 years of professional experience designing and developing web applications. I am also very experienced in managing (web) projects.