In the previous post we talked about applying GZIP technique to our blog. This was almost successful. Except the fact that now only HTML page is being compressed (and its load takes merely 2-5% of overall page load time). We were going to increase the load speed of our blog by 50%, so we need to add somehow gzip compression to all CSS and JavaScript files.

Is static gzip possible for you?

Following this a good post about static gzip we only need to add some rules to our .htaccess files. And that’s all? Not exactly. As you remember we had some troubles with .htaccess rules (our hosting doesn’t support them a lot). But mod_rewrite seems to be included into most of shared hosting environments. To check this possibility you can add the following strings directly to your root .htaccess file (if there is no such file just create it):

<IfModule mod_rewrite.c>
	RewriteEngine On
	RewriteRule ^test_rewrite /index.php [L]
</IfModule>

We defend ourselves from the module being disabled and add IfModule (so this won’t break anything in any case). Then just open URL

yourwebsite_going_there.com/test_rewrite

in your browser. If you see the main page of your blog – all is OK here. If not – sorry, it seems static gzip isn’t for you, try to check our next posts in Speeding Up Website blog.

Applying static gzip

Well, we have checked this technique possibility – it can be applied for our blog. What’s next? Adding mentioned rules to our root .htaccess file:

<IfModule mod_rewrite.c>
	RewriteEngine On
	RewriteCond %{HTTP:Accept-encoding} gzip
	RewriteCond %{HTTP_USER_AGENT} !Konqueror
	RewriteCond %{REQUEST_FILENAME}.gz -f
	RewriteRule ^(.*)\.(css|js)$ $1.$2.gz [QSA,L]
	<FilesMatch \.css\.gz$>
		ForceType text/css
	</FilesMatch>
	<FilesMatch \.js\.gz$>
		ForceType application/javascript
	</FilesMatch>
</IfModule>
<IfModule mod_mime.c>
	AddEncoding gzip .gz
</IfModule>

As you can see we just redirect all requests from our CSS and JavaScript files to their .css.gz and .js.gz equivalents correspondingly. But how can we create these gzipped equivalents?

These a lot of tools to create gzipped files but we need to make them complaint with server size GZIP encoding standard. These is one free and simple tool – 7z utility. Just download it and get ready. If you are using Mac – you can try p7zip utility (while creating files just check for maximum compression, GZip compatibility and .gz file ending).

So to gzip files we need to have initial (not gzipped) files. How can we get them? We can use any of website load speed analytic tools. Here is a part of load waterfall from webo.name

Here we see all required assets. Our next steps will be to create .gz versions of them.

Small remark: if you are familiar with SSH access, you can just go to these files’ folder and type there

gzip -c -n -9 color-scheme.css > color-scheme.css.gz

color-scheme.css file here is an example. You insert you file name (also to the output part of this expression).

But let’s start with files’ compression.

• As you can see almost all CSS files are located in the same folder. We can just go and download them via FTP to some directory on our PC.
• Then go this local folder and for each file apply the following (with 7z installed):
  1. Right click -> 7-zip -> Add to archive…
  2. Choose ‘GZip’ in archive format field (the first under the file name here).
  3. Choose ‘Ultra’ in compression level field (the next field here).
  4. Press OK.
• Now we have gzipped files, need to upload them to the website (via FTP or something similar). Please place compressed files exactly near (in the same folder) the initial ones.
• The same procedure with JavaScript files.

Maybe it’s a bit boring but the result will be great (here are headers taken with HTTP Live Headers under Firefox):

As you can see there is Content-Encoding: gzip header (the last one). We have all CSS and JavaScript files totally compressed. Hurra!

Also there should be noticed that compression now isn’t performed anywhere. We have gzipped our files; and now they are served in gzipped state. No additional work on a server side. This of course can be also applied to HTML documents. But they are almost always dynamic (because of this reason we applied dynamic gzip previously).

Common faults

Don’t try to compress any .php ended files! They generate CSS or JavaScript ‘on fly’ so we can’t influence them (only now; in the future we will cover such cases). For www.speedingupwebsite.com there is 2 such files (as you can see from the load waterfall above):

/wp-content/plugins/gd-star-rating/script.js.php?ver=1.8.0
/wp-content/plugins/gd-star-rating/css/gdsr.css.php

And (lucky we) they are already gzipped (thx to GD Star Rating authors). So all is going well here.

Conclusion

Here is a YSlow chart about our actual performance.

If you compare this chart with the previous one – we have saved with dynamic gzip and static one about 137 Kb (and 21% of overall data being transmitted). But with the increasing number of posts on the home page (and the number of images) we don’t see any significant progress here (not planned 50%, only about 20% speedup). But we are going further. Next few days we will talk about ‘on fly’ textual files compressing (of any type, .php included) and actual image size optimization.

Related Posts

• March 7, 2010 -- Dynamic CSS / JavaScript files are evil – 8 reasons (4)
• February 26, 2010 -- All about WordPress performance – 11 golden rules (1)
• January 26, 2010 -- Statify dynamic images from timthumb (1)
• January 10, 2010 -- GZIP beyond possible (2)