How to use gzip compression to get your Google PageSpeed Score Higher

Recently I came across Google’s PageSpeed checker extension for Chrome’s developer tools. Page speed in general has always been a common sense thing for me. I think that is one skill that developers who grew up in the dial-up era vs the broadband era understand a little better than most. With that said I’ve apparently gotten very lazy! Nearly all my website properties were testing awfully low and slow.

The increase of widely available high-speed internet is breeding a NEW type of user. This new generation of user is far less patient. Your websites MUST be quick and fast or they move on. Google recognizes this. While there is some debate about your page speed affecting your SERP (Serach Engine Results Page) rank it just makes efficient sense to do everything you can for your clients and yourself when it comes to speed. Why would Google make all of these speed tools and give you graphs about speed inside their Webmaster Tools if it wasn’t a factor?

To make your sites faster you simply have to make them smaller! This is what gzip does for you.

This video from Google explains gzip in some simple terms.

I tried to find any reason to NOT use gzip in this day and age.

There is NONE!

How to implement gzip in a few seconds

Apache Users

Apache users can simply put these lines in an .htaccess file at the root of there website directory. This covers most of your bases.

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 1 2 3 4 5 6 7 8 9 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

PHP Users

PHP has a nice gzip object that will detect the browsers available compression type and serve up the page accordingly. I just add this line to the top of any PHP files in my web projects.

<?php if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start("ob_gzhandler"); else ob_start(); ?> 1 <?php if ( substr_count ( $_SERVER [ 'HTTP_ACCEPT_ENCODING' ] , 'gzip' ) ) ob_start ( "ob_gzhandler" ) ; else ob_start ( ) ; ?>

Optionally you should be able to add: AddOutputFilterByType DEFLATE application/x-httpd-php text/html to the .htaccess code above but I have not tested it.

Windows IIS Users

I’m not one but it looks pretty straight forward. Maybe this Stackoverflow thread will help you.

Google PageSpeed Checker Quirks with CSS and JS files.

During my testing a spent a great deal of time wondering WHY the PageSpeed tool was constantly telling me my JS and CSS weren’t being compressed. Nearly every other gzip testing utility was telling me they were. In the end I couldn’t figure it out and eventually they went away. If you are worried just try another tool like http://gzipwtf.com/

Are there other ways to make my site smaller?

Compress/Minimize your Javascript.

Minimize your CSS files.

Only serve up what you are going to have the USER be using!

Scale your images.

I obviously violate a few of these rules but that doesn’t mean you have to!

Resources