Gzip: How a little compression can save the day

There come a few times in a budding web designer’s life when they discover something very useful and incredibly helpful and they wonder, “Why on earth did nobody tell me about this before!?” And, being the collaborative souls that they are, they think, “I will share the news with all of the others so that they too will reap the benefits of this new knowledge!”

Well, lucky for me I have a blog for this sort of thing. Somewhere out in the vast hinterland of the Internet, a lone geek must also be asking, “Is there another way to make my web site faster?”

And like me, they shun the easy non-standards solutions of image maps. Like me, they have read and re-read countless articles on how to optimize photos for the web. And like me, they felt there just must be something else out there. Something warm and fuzzy, like a tiny piece of code.

Today on my journeys, I learned a few new things on topics whose keywords involve GZip, htaccess, Live HTTP Headers, and YSlow.

Just about every web developer uses Firefox add-ons, especially the Web Developer Toolbar. There are two others that are particularly useful when trying to increase the loading speed of a site and for some silly reason, I never used them until today: Yslow analyzes a site’s performance based on Yahoo’s rules for web performance and Live HTTP Headers displays the live communications between your browser and a site’s server.

I used YSlow to analyze one of my sites. I got an “A” in everything except GZip compression. Huh? I did some reading and discovered that I might need to configure my server to output GZip compression. To check this, I scanned the dialog between my browser and the server using Live HTTP Headers. I saw that my browser sent this request: “Accept-Encoding: gzip, deflate.”

This is the browser telling the server, “FYI, I accept compressed files if you have any.”

The server ignored that request, meaning that it was not set-up to Gzip my content. Bah!

I have a shared-hosting plan and never realized that I have access to certain server set-up options. Web hosts who put dozens of clients’ sites on one server would be insane to allow everyone access to the server’s config file. I thought I’d just have to send them a message if I needed something on the server changed. It turns out that individual accounts may have access to certain set-up options by using an .htaccess file (hypertext access).

First, locate the file. I signed into CPanel, went to the file manager, clicked on a little check box to allow me to view hidden files, and then went into my home directory. There it was, “.htaccess”. I clicked on it to edit it and added code from BetterExplained to configure the server to allow compression output.

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

I saved the file.

I then reloaded my site and behold, the load time was four times faster! My work here is done.

For great reading, check out these articles:

2 thoughts on “Gzip: How a little compression can save the day

  1. First off let me say, great post Darcy! I too have recently learned about Gzip compression for websites while investigating HTTP headers.

    I didn’t realize it was so easy to implement, I was under the impression (because nobody told me about it either) that I had to pre-compress the content, and then check the HTTP header to make sure the individual browser could handle the compressed version. Now it seems so easy.

    Thanks!

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>