Curtis Henson

Update:

Part two of this article is now up with a lot more tips and tricks on how to speed up your website!

When I first designed curtishenson.com I took into no consideration the speed that it loaded. OK, that isn’t entirely true. I compressed my images…a little, some of my javascript was compressed, and my CSS is compressed(but only because I was trying out the new Blueprint CSS compressor). So when my site actually got content on it, everything started grinding to a halt. I tried speeding it up with WP_Cache, then Super_Cache, then phpSpeedy. But I still had problems. I was planning on starting to advertise more, release a new premium theme and my site really needed to be faster(I hope it is faster, otherwise you’re probably still waiting for this article to load).

Benchmark

First thing to do is set a benchmark. I used Firebug and Yslow to benchmark my site. I benchmarked with phpspeedy and super cache installed and functioning and also without. What I found surprised me, the page with no cache or phpspeedy was faster, by a whole second. Obviously YSlow gave me a glorious F. The blog loaded in ~5 seconds, and the homepage loaded in ~6 seconds…unacceptable! My fastest load times were still above 3 seconds, thats an eternity on the web!

Shrinkage, Cut Those Files Down To Size

So I started from the beginning, my images, my extra large high-res awesome images that, unless you were a Swede with fiber, took forever to load. The biggest(no pun intended) culprit was the background image for the whole site, weighing in at just under 300k(ouch!). To be fair it was made to expand on huge monitors, sorry guys, you get no love now. I cut down the size and compressed it down to 132kb(might have to compress it more, time will tell).

I also shrunk down all my other ridiculous images, a half transparent background image at 4k? Its now 100 bytes. Some of the file numbers looked like this: 80k down to 20k, 224k to 103k, 50k to 10k, 30k to 7k. You might not have the crazy file sizes but you can probably shrink your images down at least some.

I also compressed the rest of the javascript at this time. I only had to compress two files, both for sifr, but there were files from wordpress plugins that were not compressed.

I don’t think it made much of a difference but I consolidated my files using conditional tags, this was something that had bugged me.

Tested the homepage now and the page loads in ~1.5s, that is a huge improvement. The blog page loads up in ~2s. That is all from minimizing images. The page size has dropped over 200K now. I still fail Yslow though, so lets see if we can make it even faster.

phpSpeedy

I installed phpspeedy next, now as wordpress plugin this is super easy to install. Un-cached the home page loads in about 1 second, cached it loads in an average of 700ms. The blog loads in 2.3 seconds with an empty cache, and slightly faster with a primed cache. YSlow scores the page a D, but the important bits all score an A.

Warp Speed Scotty!

Whats next? I still need to do a few things. I’ve enabled WP Super Cache and will see what effect it has as pages are cached. Also a few plugins are causing unnecessary files to be loaded so I’ll be getting rid of those. I’m also going to be tweaking the settings over the next few days to see what works the best. It seems the server still hits a speed bump every once in awhile, but I’ll see what I can do about that.

Tune in for the next part when I’ll talk about my experiences and a roundup of the tools you can use to speed up your website. Yes I’m leaving you hanging…now go outside.

Tags: cache, compression, phpspeedy, speed, Wordpress
Posted in CSS, Links, Web Development, Wordpress