Website Performance Tools

Picture of a red sports carI mentioned in my previous Trail Log that my look at the new Site Performance feature in Google Webmaster Tools tools led me down a rat hole looking into ways to optimize my website. Since I use WordPress I approached this as WordPress optimization, but the reality was most of this was basic web optimization. I did use these tools to help decide which WordPress plug-ins & features to use. Plug-ins or features that degrade performance for little benefit were dropped. In this article I’ll discuss the tools it led me to. I’ll cover the optimization changes I made to optimize my website in another article.

Google Webmaster Tools Site Performance

This is a Google Labs feature so it’s experimental. The information is not collected from Google’s web crawlers, rather, it’s collected by Google Toolbar users that have the PageRank feature active.

The top of the Site Performance page will display a graph showing performance history. This is what mine looks like today.

performance

It will also say what percentile your website falls into. When I first went in a couple days ago 73% of sites were faster than mine. Today 66% are faster. While I did make some optimizations this seems like a big drop in such a short time. I suspect much of this is due to the pages people are visiting. Unfortunately I didn’t keep track of load times but today it tells me page loads average 4.2 seconds. I’ve no idea what the September spike is due to. The October spike is around when I changed to the Thesis theme although I’m not sure why it spiked then dropped, it’s not like I changed the theme a lot. There may have been a plug-in I was trying and later stopped using.

They also list example pages along with suggestions to improve performance on the page. They don’t fudge the results in their favor as compressing the Google Analytics code snippet was listed. I didn’t spend much time on this information. Instead I installed the Page Speed add-on for Firefox that was promoted on the page.

Page Speed Add-On for Firefox

The Page Speed add-on plugs into the Firebug add-on so you’ll need that first. The plug-in is simple to use. Just start Firebug, load the page and wait for the load to complete entirely, then click the “Analyze Performance” button.

You’ll get a report showing the different categories on possible improvements. If you click the category name you’ll go to a help page to lean more information. The suggestions are listed in priority order and color coded as red, yellow or green. This was the jumping off point for most of the enhancements I made. Some of them I’d never heard of, like “minify css” while others just required tweaking an existing configuration, such as enabling gzip compression for javascript. There’s also items that aren’t realistic for me to implement, things that are core WordPress code such as an inline script in the header that appears before CSS files.

Page Speed will also provide optimized versions of files that needs it. These can be a little hard to deal with since they are given long, random names. Links are provided so you can open them up and cut/paste. In the cases of images I found it easier to use another tool and just compress the original images rather than finding the Page Speed generated files. In the case of CSS where I only had a few files I just used the Page Speed minified files.

Between the suggestions on this page and the help links I was able to make significant improvements in performance. Unfortunately I didn’t do timings in the beginning and Page Speed doesn’t do actual timings so while things are better I’ve no idea how much better.

The specific optimizations are best covered in a follow-up post.

Web Page Analyzer & Pingdom Tools

As I mentioned, Page Speed didn’t give me any timings. Once I’d hit the big things Page Speed identified I wanted to look at specific timings. Web Page Analyzer is a website that does what it says. I provides a plethora of information. Like Page Speed it provides information on optimization techniques and whether or not they’re in use. It’s report is all text and provides a wealth of information along with suggestions.

Pingdom Tool report Like Web Page Analyzer Pingdom Tools is web based and breaks down the load time for each item on the page. It presents it’s information in a graphical report such as the one to the left. (Click the thumbnail for full size). It also provides a summary box with stats like total load time and number of objects broken down by type. Unlike the other tools it doesn’t offer any suggestions.

The Pingdom tool graph is a nice quick way to see what order things are loading in and how long each item takes. It makes it easy to drill down into what’s taking the most time. Using this I found a plug-in that was trying to load a missing file via CSS. It also called out another plug-in that was loading a file over 170KB via CSS and even on pages the plug-in wasn’t used. Removing that plug-in alone cut the load time on this example page by 50%. That plugin just wasn’t worth the performance cost.

I found Pingdom tools first and it helped me find the big hits that Page Speed wasn’t calling out. I’ll continue to use both, first Pingdom tools to quickly call out the really slow objects then Web Page Analyzer gets into the nitty gritty. Web Page Analyzer provides more detailed information, as does Page Speed, but adds timings. The Web Page Analyzer timings are based on the object size and not the actual response from my server. I like this because it makes it easier to gauge changes I make and provides a consistent benchmark. Pingdom Tools & Site Performance are based on actual experience. This would take into account my server performance and any network congestion. This can be used to gauge the response a user is likely seeing.

OptiPNG

OptiPNG isn’t a benchmarking tool, rather it’s the one program I added to my web page creation workflow. As the name suggests, it optimizes PNG files. Actually it will also convert JPEG and GIF files to PNG and optimize them. It’s an open source command-line utility. At the basic level it’s easy to use. Just pass a file name (wildcards allowed) and it will optimize and replace the file.  There are various optimization levels along with other options (such as saving a backup file) that can be set on the command-line.

YSlow

YSlow is a Firefox add-in from Yahoo that blugs into Firebug like Page Speed. YSlow has been around awhile and I’d heard of it, but it wasn’t at the top of my mind and I didn’t come across it until late in the process. So, while I now have it installed, I haven’t really used it. I provides a nice scorecard to help call out problem issues and it provides links to more information. It looks like it presents information similar to Page Speed but with the addition of some summary statistics. If anything, there’s too much information. At this point I don’t want to take the time to delay this article until I’ve had time to explore YSlow. It would take too long and probably wouldn’t change anything for me. Of course, I may regret that statement in the future. Any YSlow fans out there?

Summary

This covers the five tools that I’ve gravitated to while exploring WordPress optimization. They helped me see what was going on with my website and within WordPress. While it was nice to see some performance improvements, the exploration was great fun which was the primary motivation to continue. (It’s five tools because I exclude YSlow since I didn’t use it, but I wanted to mention it since it’s certainly seems useful.)

Now comes the tedious task of implementing the optimizations on individual pages to fully optimize my website. I’ve already got the site-wide optimizations done. Images that appear on all pages are compressed, my CSS is minified and gzip compression has been enabled for javascript. Unfortunately I hadn’t learned learned about the benchmarking websites so I don’t have solid number for the improvement. But these changes got rid for the red in Page Speed. I’ve also changed my posting work flow so anything new is optimized when it appears. Hopefully my Site Performance stats in Webmaster tools will improve over time.

Next on the agenda to optimize my website  is to optimize my most visited pages. The main effort there will be to compress and optimize any images. The rest of the page optimization was covered by the site wide changes in most cases.