Deflate your javascript, not your footballs

5 - 10 min read
by: Rockwell Sep 30th, 2016

One of the most important aspects of a website is its speed.  Like two football players running after a thrown ball, the fastest one always gets the prize.  Poor website speed can lead to users abandoning pages that take too long to load, meaning they never see or purchase your content. To make matters worse, Google recently announced that they are going to start penalizing your site's organic search rankings if it takes too long to load.  the future for poorly performing websites is looking bleak. This post is going to discuss one thing you can do right now that will increase your sites performance, utilizing Gzip compression.

In the Google developers guide on the subject Gzip is explained as, "a generic compressor that can be applied to any stream of bytes...[that]...performs best on text-based content, often achieving compression rates of as high as 70-90% for larger files...".

The benefits of utilizing Gzip compression can, perhaps, best be demonstrated with the use of two images.

A server delivering content that has not been compressed is a little like the image below.

Deflatedthrow2 It is going to get there eventually.

A server delivering up content that has been compressed is more like the image below.

Notdeflatedthrow For the win.
How do I use gZip compression?

Configuring Gzip will be different for different setups.  On an Apache server you will want to take advantage of the deflate module.

A simple code example would look like the block below, which compresses html, plain text, xml, css and javascript.  Adding this to your .htaccess file will enable gZip compression.  This method could be used for Wordpress, Craft CMS, DrupalJoomla and Laravel sites, just to name a few.

<IfModule mod_deflate.c>
    DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript
</IfModule>

In a Ruby on Rails app you can enable it via middle ware. Add it to config/application.rb:

module YourAppNameHere
  class Application < Rails::Application
    config.middleware.use Rack::Deflater
  end
end

Alternatively, if you rails app is on Heroku, you can install the gem heroku-deflater.

gem 'heroku-deflater', :group => :production

NodeJS also has the zlib library to help with this, a great discussion can before in this stackoverflow post about setting this up in a nodeJS application.

The HTML5  boilerplate project actually has sample setup files for the most popular servers. 

Is it for everything?

You can add all kinds of assets into the code above.  However there are a few things to keep in mind.  Having optimized images is still very important.  3500 x 6500 png files will take time to load no matter what, gZip or not.  Enabling gZip compression is just one thing to do to help speed up your website but it is certainly not a silver bullet that will replace other good practices, it is just another tool to add that will complement them.

Insightful closing statement

It takes about 5 minutes to set up gZip if you are familiar with navigating an applications folder structure.  If you are not, but still want to speed up your site, offer to buy your friend a beer next time you two go out if they can drop those lines into you .htaccess file for you.  

TL;DR

Copy and paste this into your site's  .htaccess file (not the one that says deny to all).

<IfModule mod_deflate.c>
    DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript
</IfModule>


About Rockwell

Rockwell joined the TheoryThree team in 2015.  He is passionate about the art of crafting quality code and loves satisfying his curiosity by learning about new technologies.

"Every child is an artist.  The problem is how to remain an artist once we grow up." - Pablo Picasso


Author

Rockwell

Rockwell joined the TheoryThree team in 2015.  He is passionate about the art of crafting quality code and loves satisfying his curiosity by learning about new technologies.

"Every child is an artist.  The problem is how to remain an artist once we grow up." - Pablo Picasso