Speeeeed

Did you notice? The blog is WAY faster than it was yesterday. I got my CSS compressed with Marco’s plugin, my javascript optimized, compressed and re-ordered, and my pages being served with gzip compression. Man, what a difference. My page load times cut in half. Read on for a few tricks I learned today…

Before you do anything, it’s cool to benchmark your page so you have something to compare to. I used webwait.com, which also provides a bookmarklet to test whatever site you’re looking at. Run it a few times and get an average load time for your home page and a subpage. If you’re optimizing something like a gallery, do the album page and a single photo page for comparison.

These tips are the next progression after following all of Marco’s advice from yesterday. If you’ve still got a ton of images, or images that could be compressed, or haven’t organized your CSS, well, this is all just icing on the cake. But anyway…

Easy Gzip

The first trick I picked up was that you can run php-only compression on a per-directory basis using .htaccess files. I’d been having a very frustrating time getting mod_gzip to play nice and was about ready to give up when I found out you can just add two lines to an .htaccess file in the root of your site:

.htaccess Code

php_value zlib.output_compression 1
php_value zlib.output_compression_level 3

The compression level is determined by a bandwidth/cpu power ratio. 3 is good on mine and I don’t really gain any added compression going higher than that. You can test to see if it’s working, and get some numbers, here.

Compressed Javascript

If you’re using lightbox, then you’re using prototype. If you’re using prototype, or any of the javascript frameworks, you’re loading a LOT of code. It’s not always recommended that you use compression, but I took 80k of javascript and now it’s 27k, so I’m ignoring the critics. You can combine and compress files using Dojo Shrinksafe online. Make sure you add them in the order they’re loaded on the page. Here’s the catch, though, especially with Wordpress: A lot of your plugins are loading javascript behind your back. What I did was use Firebug to see who was loading what, and then cut the code out of the plugin and load it myself in my template header. It’s a hack, but once I was done I could combine all of the files, compress them, and then take the next step…

If you rename your javascript file with a php extension (prototype.compressed.js.php), and add this code to the header, it will serve the file with gzip compression regardless of server settings, if your server has the capability.

Header Code for Javascript Files

< ?php
	ob_start ("ob_gzhandler");
	header("Content-type: text/javascript; charset: UTF-8");
	header("Cache-Control: must-revalidate");
	$offset = 60 * 60 ;
	$ExpStr = "Expires: " .
	gmdate("D, d M Y H:i:s",
	time() + $offset) . " GMT";
	header($ExpStr);
?>

Now it’s easy to compare your original filesize(s) to the filesize that Firebug reports when it loads the page. You should see massive improvements!

Complications

The hacks mentioned above led to a few hours of hacking around. It’s not necessarily for the faint of heart. The order that CSS and javascript are loaded can determine whether a page works or not, so anything you do to mess with it can screw up your site. Further, my site uses a lot of conditional loads, so I did a lot of php work in the template to replace what was being done in the plugins. Ultimately, though, it was worth the effort. My average page load time on the homepage went from 4 seconds to 1.75, and the site is snappier to navigate. I did the same thing to the Circle Six site and have all the page load times under a second after caching. Have fun!

CSS» design» hacks» javascript» optimization» PHP» plugins» server» template» tips» tricks» web» wordpress»