Optimizing My Website – Low Hanging Fruit

In this article I look at the 4 main areas which I could easily optimize to improve my website performance. Image optimization, CSS optimization, Javascript optimization and plugin optimization where all used to improve the performance of my Wordpress site.

Image a of red rocket shipIn my previous article I looked at five web performance tools to optimize my website. In this article I’ll cover the website optimizations they led me to make. These were all done over a weekend of off and on work and experimentation. The more in depth things were left for a later time but these got me off to a good start, cutting the size of some pages in half.

Image Optimization

The fist thing I looked at was image optimization. This isn’t an art or photo site so anything I could do to reduce image file size would be helpful. Google’s Page Speed tool found plenty of room for improvement in my images. The most obvious area for improvement were the site header and 3 images that appear on every page.

My site header was a GIF, Google Page Speed provided an optimized PNG file for replacement. So I just copied that to my server and changed the template to load the PNG instead of the GIF. This reduced my header by 62% and will save 3KB every time it loads. The other images were ads that weren’t served by me, more on these later.

While taking the optimized image created by Page Speed is fine for one or two images it isn’t viable for more than some testing. Google’s site recommended OptiPNG as one method of compressing images so I downloaded that.

I used OptiPNG in it’s simplest form, just passing the files to compress on the command line. Eventually I set up directory for the files and a batch files to optimize all the files in the directory. I’d copy down an entire directory of files from my site, optimize them and copy them back up to replace the original files (of course, I had a backup). While OptiPNG will convert GIFs to PNGs and I had a few GIFs I didn’t go into the pages and change the links unless I decided to optimize that entire page. Image size reduction would vary but was about 40% overall with larger files being around 55%.

Javascript Optimization

This fell into two categories – offsite javascript and onsite javascript.

For the offsite javascript the choice was simple. Keep it, and the feature it provided, or dump it. In one case it was an ad and the javascript was relatively slow and it also loaded an image, so I dumped it. In another case it was a plugin which I also dumped. More on this in plugin optimization.

As for compressing Javascript files I decided that using a utility to compress the actual files wouldn’t be beneficial to me. I’d have to redo it every time they changed and they were part of the theme and plugins. Since I had already enabled GZip compression on my server I added the configuration option to compress javascript. In my case I added application/javascript to the mod_deflate configuration. (My reading indicated some Apache servers may use a mime type off application/x-javascript for javascript). This was enough to make Page Speed happy.

CSS Optimization

I probably could have also compressed the css files through GZip compression and left it at that. But I also decided to minify the css files since they rarely change. Minifying is the process of removing whitespace from the css files.

Rather than find a tool to minify my css files I simply used the files created by Google’s Page Speed plugin for Firefox. This creates the files and names them cryptically randomly so I had to follow the link to each file and figure out which was which. I only had three files so this was quicker than searching for another tool and doing it myself.

I use the Thesis theme for WordPress and after I minified the css for the theme I would get a “upgrade Thesis” message whenever I went into the Thesis options in the WordPress dashboard. The theme works just fine but if I want to make any changes I need to restore the un-minified files. This is no big deal since I just rename the files on the server and name them back when I’m done. If the css actually changes I’ll need to minify the updated file.

Plugin Optimization

The final item I tackled to optimize my website is the one I spent the most time on. Taking a look at my plugins. The Share This plugin I used to allow my posts to be bookmarked called some external javascript which was a bit slow. I decided to look for a replacement. I wanted to find something that would be completely hosted on my server which eliminated a bunch of replacements. One I found loaded a 172kb image for every page, even ones where the plugin wasn’t used. I wasn’t willing to use an image this big. I finally found one called Social Bookmarks that fit the bill as long as I kept some options off.

The rest of my plugins either didn’t detract from performance or were worth the cost. There wasn’t a lot to review as I’ve always tried to limit the number of plugins I use.

Summary

Some other recommendations would have involved more than I was willing to do. Some of the recommendations were related to css and I wasn’t about to rewrite the css provided with the them.

Compressing the images gave me the biggest overall improvement in performance with minifying the css coming in second. The css compression helped because it loads for every page and there was a significant reduction in file size. (Of course, client side caching can also help the load times.)

While replacing the Share This plugin was only a minor improvement, experimenting with other plugins showed me how some plugins can significantly impact performance.  Some plugins I looked at really hurt perf0rmance.

Back when I started looking at performance Google Webmaster Tools told me my site was slower than 66% of all websites and took an average of 4.2 seconds. On December 31st the Webmaster Tools tell me the that only 49% of all websites are faster than this one and the average load time is 2.9 seconds. This is hardly a scientific analysis of my attempts to optimize my website, but at least it shows an improvement.