Making Wordpress faster with Apache and PHP

Wordpress is one of the most popular (and my favourite) publishing solutions/blogging platforms/CMS systems online. It’s fast, reliable and best of all, free!

There are however many ways to make sure you get the best out of Wordpress and what it has to offer you in terms of the speed, power and throughput.

Below is part one in the series of code tweaks that will ensure that your copy of Wordpress; especially if running multiple CSS/JavaScript files and/or plugins - runs faster than ever before.

If you are running Apache webserver with mod_gzip enabled, you can compress your files by up to 75% in order to make your page load faster, as well as reducing your HTTP requests. Let’s just try out making your main .CSS theme file smaller today…

The best way to do this it to follow the following steps.

1. Backup a copy of the main .CSS file(s) used on the blog. For this demonstration, I will assume the main CSS file for your theme is called ’style.css’.

2. Copy the file ’style.css’ onto the web server so you don’t have to edit the original.

3. Rename the copied file to style.css.php - Yes, to .PHP (that means we are going to be scripting a little!)

4. Edit the file so that the following lines appear before any CSS. (I.e. if your first line of the CSS file has ‘body’, put a line break before ‘body’ so now it is on line 2 of your document, and then paste the following onto line 1).

<?php

ob_start('ob_gzhandler');

header('Content-Type: text/css; charset: UTF-8');
header('Cache-Control: must-revalidate');

$expire_offset_time = 604800; // Set to a reasonable interval. I.e. 3600 (sec.) = 1 hr.
header('Expires: ' . gmdate('D, d M Y H:i:s', time() + $expire_offset_time) . ' GMT');

?>

Let’s go through and explain some of the code for those that aren’t as technical with PHP. Any definitions below are courtesy of PHP.net.

Line 3:

ob_gzhandler() is intended to be used as a callback function for ob_start() to help facilitate sending gz-encoded data to web browsers that support compressed web pages. Before ob_gzhandler() actually sends compressed data, it determines what type of content encoding the browser will accept, and will return its output accordingly. All browsers are supported since it’s up to the browser to send the correct header saying that it accepts compressed web pages.

In English, basically, calling “ob_gzhandler()” effectively means that the contents of the page below that call are compressed by default through Apache.

Line 5 & 6:

These two lines essentially setup the headers for the file (which will be asked for when a browser downloads the file) to tell the browser that the content in that particular file is CSS, and the character set being used is UTF-8 (character encoding for unicode). Secondly, line 6 sets up the Cache control of the the file. We are effectively saying that the browser should re-validate the contents of the time as opposed to, only-if-cached or max-age. The reason we apply the must-revalidate Cache control header is because a cache may be configured to ignore a server’s specified expiration time and so, we basically override this setting.

Line 8 & 9:

Line 8 sets up a variable we create called expire_offset_time which will hold the value ‘604800′ which at this stage is just a ‘number’, but will be used on the next line as an expiry interval. Line 9 in this case sets the contents of the page to expire after the variable we set above; which now represents seven (7) days worth of the content not expiring. The calculation for this is: ((604800 / 3600)/24) = 7; where 604800 is what we set; 3600 is the amount of seconds in one day, and 24 is the amount of hours in one day.

And there you have it. Adding the above to your CSS file, appending .php to the end of the filename, and obviously changing the link in your homepage template can mean big savings in load time and site speed. Based on my CSS file, the savings in KB’s are pretty substantial to say the least! My CSS file on the server has a footprint of 23KB. As you can see from the image below, the new file size is 5KB - close to a (whopping?) 5 times smaller!! I’ll let the ‘after’ screen shot taken from Firebug speak for itself!

So what do you think? Have you previously tried this method? Did it work for you? Share your thoughts with everyone!