Quick way to gzip your CSS

The quickest and easiest way to speed up your website is to add mod_gzip to your pages. Basically what it does is takes any .html page on the server, and uses gzip compression to shrink the file before sending it out. IE or Firefox at the users end will unzip it and display it automatically, so the process is completely transparent to the end user.

For example, right now, the joetek.ca homepage is about 40K, but because I have gzipped it, the page is crunched down to about 8K before sending it to your browser. It uses a little bit of processor power on the server, and a little bit on your browser, but the file is 1/5 the size for transferring across the Internet, through your connection at home and onto your computer. This can create a drastic overall performance increase.

Most hosts are already configured to gzip .html, or .php pages and a few others. You can see if your host uses compression with the mod_gzip test. Images shouldn’t be compressed, because .gif’s and .jpg’s are already compressed, and re-compressing them can actually make the file larger.

The biggest overlooked files though are CSS files. In many sites, it is easy for these files to grow to 100k and more, which could compress down to 15k or less. They usually aren’t compressed by default, and sometimes you don’t have access to enable it. Here’s a quick two line solution.

Let’s say your .css file is /css/style.css. Your server will not compress this, simply because the file has a .css extension. You don’t want to just rename it, because that will cause problems when you load it back up in your editor if you want to make changes.

First, create a new file in your /css/ directory called style.php with these contents:

<?
header(“Content-type: text/css; charset: UTF-8”);
require(‘style.css’);
?>

All you have to do now, is change your header so that instead of loading your old style.css, it loads style.php. Find and replace a line that looks like this:

<link href=”/css/style.css” rel=”stylesheet” type=”text/css” />

with this:

<link href=”/css/style.php” rel=”stylesheet” type=”text/css” />

Enjoy!

LEAVE A REPLY

Please enter your comment!
Please enter your name here