Digital Marketing
Now Reading
How and Why to use GZIP
0

How and Why to use GZIP

by Adrian RandallNovember 9, 2016

Websites in general are growing in complexity and users are expecting more and more from websites in relation to rich user interface. Whether this be a fancy slider, a large number of articles shown at once or complex client side functionality. All of these things make the physical size of a website grow substantially. A page which used to be 100kb now no longer is acceptable from a users perspective and it needs to server content which is up to 1-2-3 MB in size. Also to make things tougher, it’s not always cost affective to develop a separate mobile site so most sites are responsive so serve the same elements to a phone as what they do to a desktop computer which slows down the user experience on mobile devices.

So, what can you do about it? Many things but one of the most effective which is so openly over looked is enabling GZIP on your web server.

What does GZIP do?

GZIP compresses elements, just like zipping a file on your PC, before sending the data from the server to a visitors web browser. This substantially reduces the page size and decreases load time of a web page. When the data gets to the web browser, it uncompresses it, displays it as normal and the visitor is none the wiser other than the page loaded faster!!

How do you enable GZIP?

If you are technically savvy you can often do this yourself but if you only have SSH or direct server access you may be safer asking you web developer to do it. Although we provide instructions below which I know to work (as my team use them on a regular basis) if there are any unique traits about your server then it could take longer to fix an error than asking your developer I’m the first place.

Before enabling GZIP or compression I always like to check my site in Google Page Speed Insights so I can see it has not been done (as you will see the error below when you run your site through it) and then once I have enabled GZIP i can confirm it is enabled (also shown below)

compression

cPanel Access

The easiest way to do this is using cPanel if you have access. There is often a compression option located under Optimize Website as shown below:

optimize-website-cpanel

Click on this and then select Compress All Content and then Update Settings

compress-all-content

Most if the time this uses GZIP to compress elements but sometimes it uses another equivalent. If it uses another equivalent don’t worry, it’s basically the same thing.

Now use Google Page Insights again to check it is installed.

If you can not find Optimise Website have a look around, it normally uses similar wording.

Apache/NGINX SSH Ubuntu option

Whether you are using Apache or NGINX the method to enable GZIP is basically the same. It is done by adding a configuration in the web server host file.

SSH into your web server than navigate to the following directory depending on the wevserver you are uaing:

Apache
/etc/apache2/sites-availavle/

NGINX
/etc/nginx/sites-available/

Opens your configuration file using your favourite text editor. Just a note, I’m explaining this assuming you have a single configuration file and not a bunch of sites running off the same server using VHosts. If you are just do the same thing in the configuration file of the site you are looking to enable GZIP on

Apache
sudo nano 000-default.conf

Add the following lines just before the line with </Directory>

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/css application/x-javascript text/x-component text/html text/plain text/xml application/javascript
<IfModule mod_setenvif.c>
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</IfModule>
</IfModule>

NGINX

sudo nano default

In the locations declaration add the bolded line below (this config is from a Ruby on Rails site but they are all the same I just wanted to show surrounding code)

location ~ ^/(assets|uploaded_assets|system)/ {
root /home/ubuntu/apps/appname/current/public;
gzip_static on; # to serve pre-gzipped version
expires max;
add_header Cache-Control public;
}

(UPDATE) The .htaccess way

I’ve just found an easier way to enable compression if you are using Apache but not comfortable using SSH or do not have the cPanel (this may mean you just have FTP access only).

FTP into the root directory of the website and update the .htaccess file by adding the following lines:

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

# For Olders Browsers Which Can’t Handle Compression
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html
</IfModule>

 

About The Author
Adrian Randall
I'm a digital marketing specialist, love working on digital business and coding on just about anything. I'm the founder of Arcadian Digital and this site shares some of our knowledge and practices.

Leave a Response