Enabling GZIP compression on your site

GZIP or not

To obtain better loading time of your site onto the browsers you should setup the GZIP compression. Instead of transmitting the plain version of your HTML, CSS, JS files the server will compress them then send them over to the browser that will unzip them and show them to you. This gain of speed will make difference in loading time.

What is GZIP:

GZIP original logoGZIP is a file format and a software used to compress and uncompress files. The GZIP compression is activated on the serveur side and allow to reduce the size of the HTML an other text based file formats, it will not work with pictures and other binary format which use another type of compression. In certain cases people have seen reduction of size up-to 70%. This is one of the most easy optimisation that you can put in place on your site.

GZIP or not GZIP:

GZIP or notTo verify if your server is configured to provide the GZIP compression, you can use this free site to check the status of the GZIP setup, or this corporate site for the GZIP configuration of your site
Configuring properly the GZIP compression will only give you bonus points in the eyes of any search engines such as Google, Yahoo as you site is smaller and therefore easier, faster to browse. It will give you extra points in your aim to get a better SEO for your site.

How to activate GZIP:

Apache Server

On an Apache server you need to create (if it does not already exist) a file: .htaccess that contain the below lines:

<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
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

# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>

If you have a WordPress, that file probably already exist and you must copy the information below any other existing information on that file.

NGINX Server

On a NGINX server you need to add the following line to your nginx.conf file:

gzip on;
gzip_disable "MSIE [1-6]\.(?!.*SV1)";
gzip_vary on;
gzip_types text/plain text/css text/javascript image/svg+xml image/x-icon application/javascript application/x-javascript;

IIS Server

If you are using IIS server, there are 2 type of compression available to you: static and dynamic. We strongly suggest you to refer to the Microsoft guide on the matter of activating compression.

Leave a Reply

Your email address will not be published. Required fields are marked *

two + seventeen =