gZip for a faster Website

gzip  is a file format and a software application used for file compression and decompression.

The Purpose

As the name signifies, gzip actually compresses the pages from the server before transmitting to our browsers. Obviously, making a website faster is one of the top most priority for website developers.

In this fast paced world, no one has spare time to wait. People want what they want, faster than anyone else can !

Page Speed is a critical component in the digital user experience, and it is hugely important in our content-driven world. There’s a reason why Google Analytics includes statistics like Page Load Time, Lookup, and Page Size.

Webpage speed is also an important ranking factor in the complex ranking algorithm from Google.

How everything works

When you open a webpage , say mixorg.com, what happens is that your browser talks to the web server running behind the the URL. The conversation goes like a standard Request-Response format.

Browser: Hey, GET me mixorg.com/index.html

Server: Ok, let me see if there is a file named index.html

Server: Found! Here is your response code (200 OK) sending the file

Browser: 2048KB !! waiting..downloading..downloading… ok its loaded

Obviously,the machines don’t interact like this but its a very simplified version.

As you can see, the file got loaded. Ok, so what’s the problem ?

Well, the problem is simple. 2048 KB of data is too much for a slow internet to download. Okay you’ve got a very fast internet connection at home, but lets not forget that most of the time we waste every day on the internet is to wait for a website to load,so yes, obviously it kills time !

So, what’s the plan ?

Well, as we do it in our home computers, if there are a lot of files to be copied, we ZIP them.But that’s for desktops.

In the internet world, we use gzip to compress the data to be sent from the server to the browser.

How is it done

gzip compression is enabled by adding some strange looking code to a file called .htaccess on the server. This .htaccess file controls most of the important things of a website.

Apache server has two common compression options:

  • mod_deflate is quicker and easier to set up and is the standard
  • mod_gzip seems more powerful as you can pre-compress content
# compress text, html, javascript, css, xml:
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

# Or, compress certain file types by extension:
<files *.html>
SetOutputFilter DEFLATE
</files>

If you are the owner of a VPS or a Dedicated server

    • Login to your WHM Panel
    • Navigate to  Home  » Service Configuration  » Apache Configuration  » Include Editor
    • Now edit Pre VirtualHost Include (All Versions) as per below screenshot
    • Add the following to Pre VirtualHost editor and update it.
<IfModule mod_deflate.c>
# Insert filter
SetOutputFilter DEFLATE
<IfModule mod_setenvif.c>
# Netscape 4.x has some problems…
BrowserMatch ^Mozilla/4 gzip-only-text/html

# Netscape 4.06-4.08 have some more problems
BrowserMatch ^Mozilla/4.0[678] no-gzip

# MSIE masquerades as Netscape, but it is fine
BrowserMatch bMSIE !no-gzip !gzip-only-text/html

# Don’t compress images
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary
</IfModule>

<IfModule mod_headers.c>
# Make sure proxies don’t deliver the wrong content
Header append Vary User-Agent env=!dont-vary
</IfModule>
</IfModule>
Apache Cpanel Pre Virtual Host Configuration for Mod Deflate

Verify if it works

Go here and check if compression works for your website here

How to check a website

Google has a tool known as Pagespeed Insights, where you just have to enter the URL of the website, and Google gives a score out of 100 to the website. It also gives recommendations which may be implemented to the website.

The best part is that Google seperates out mobile and desktop versions in their analysis seperately.

Here is the link to the tool: Pagespeed Insights

Assumption:

I have assumed that you are using Apache server for enabling gzip compression.