In 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.
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%.
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.
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.
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.