Gzip Compression: The Easiest Way to Speed Up Your Website

November 19, 2017//988 words

Have you hit a wall in your attempt to speed up your website? You know that a fast loading site is solid for positive user experience and SEO, but you’re site is still only average. It’s time that you enable gzip compression for your site.

 

What is gzip compression?

In short, gzip compression is a software that is almost as old as the internet itself. It was created in 1993 to be used for the GNU Project whose focus was to offer freedom and control to computer users. While it has been around for over 20 years, it is not often thought of as of the main go-to speed optimization tools because it likely won’t be enough to make a huge difference in overall page size because you are talking about reducing the size of a text file as opposed to a likely-heavier image. However, it may just be the factor you have been looking for to get your site over the edge.

 

What does gzip compression do?

When someone visits your site, a request is sent to your website’s server to deliver the files needed to display the webpage on the user’s browser. Among other assets such as images and other media files, the files that are being requested include the javascript, CSS and HTML files. Depending on the size of these files it will take longer or shorter to transfer these files to the user’s browser. Gzip compression will step in on the data transfer and speed up the process by:

  1. Removing white space in and around the code
  2. Temporarily remove repeated lines of code

Now, this isn’t to say that you are carelessly duplicating your code, but rather it is to be expected that much of your code is the same. For example, how many times do you use a <div> tag or a <p> tag in your HTML document? Gzip will find these common instances in your code and temporarily remove them while still allowing your page to load normally.

Gzip will basically clone these files and when the request comes in from the browser, it will see the gzip compressed files and render those instead of the larger, original files.

 

Different from Minification

Don’t get gzip compression confused with CSS and HTML minification. Minifications focuses on removing whitespace better than gzip and gzip focuses on removing repetitive characters. See this example:

 

CSS File: 145 KB

gzip compression website

CSS File Minimized: 123 KB

gzip compression website

CSS File gzip compressed: 24 KB

gzip compression website

 

How to Enable Gzip Compression

Fortunately, this is extremely easy and likely just requires adding a few lines of text to your .htaccess file depending on your server.

 

For Apache Servers

Paste this code into your .htaccess file:

<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>

 

For IIS Manager Windows Server:

  1. Open your IIS Manager
  2. Choose the site that you want compression for and then click on site
  3. Look under IIS and click on compression
  4. Choose to enable static compression

 

WordPress (Alternative to .htaccess)

  1. Go to your site url /wp-admin
  2. Click on options
  3. Find the gzcompressionsetting
  4. Change value from0 to 1

And that’s it! Now go test your website at either GTMetrix or Pingdom and verify the change. You’re now another step ahead of your competition!

Don’t forget to sign up to be alerted when I post new awesome content and follow me on Twitter @tylerewillis.