Google Webmaster Tools – What’s your site performance?

18. February 2011 · Write a comment · Categories: Performance · Tags: , , , ,

In the last three posts, I’ve looked at tools for optimizing performance on a website. This week I will show you a nice performance-related feature in Google Webmaster Tools. Google Webmaster Tools is a free tool from Google that provides different tools for webmasters, such as submitting a sitemap, generating a robots.txt, and other stuff. Webmaster Tools is typically not used for looking at performance issues, but if you expand the Labs tree note in the navigation menu, you will see a link named Site performance. If you click this link, a graph will show, which looks something like this:

The screenshot shows the site performance graph for one of my Danish websites, www.myrating.dk. Notice that unlike YSlow, Page Speed, and Speed Tracer, the result showed above covers the average load times for all your pages and not only one page at the time. The chart is divided into two areas: a fast green area and a red slow area. If the trend line is below the red dotted line in the green area, this means that your site is fast. If above the red line, your site is slow. The statistics is generated from all users who have installed the Google Toolbar and enabled the PageRank feature. This means that you need a lot of visitors on your site for this graph to show a realistic result.

Below the graph you will find up to ten URLs, which Google have suggestions for you to optimize:

You can expand each URL, giving you a detailed explanation on what to improve. The rules used on Google Webmaster Tools look like a subset of the rules used on Google Page Speed. I don’t see much idea in this feature, unless you don’t have Page Speed installed.

It would be great if Google would implement some sort of alert, where you could receive an email or similar, if response times suddenly decreased.

Google Speed Tracer – The alternative with potential

11. February 2011 · Write a comment · Categories: Performance · Tags: , , ,

In the two previous posts, I’ve covered different plugins for Firefox. Even though web developers still seem to prefer Firefox over Chrome, a lot of us (me inclusive) switched to Chrome. Luckily Google does a pretty decent performance optimization extension for Chrome as well. The extension is Google Speed Tracer. You will find it at Google Code here: http://code.google.com/webtoolkit/speedtracer/.

When installed, a green timer icon will show to the right of the omnibox. One might think that the tool is now ready to run; unfortunately you need to modify how Chrome starts by adding the –enable-extension-timeline-api parameter to your Chrome shortcut. This seems a bit stupid, but once it’s done, you don’t need to worry about it again.

Speed Tracer is a bit different from YSlow and Page Speed in the way it presents your page. When you click the green timer icon, the Speed Tracer tab opens and starts profiling all the activity on the active tab. Try browsing to the page you need to optimize or reload it if it was already loaded in the active Chrome tab. Speed Tracer shows you all the activities needed to render your page. This typically consists of loading scripts, images, rendering HTML and even garbage collection as illustrated on the following screenshot:

Unlike YSlow and Page Speed, which focuses a lot on script, styling, and images, Speed Tracer also shows the time spent by the browser in rendering the various HTML elements on the page. Next to the headlines at the left, a small icon is sometimes shown, indicating available help to fix this issue. Unfortunately these help icons don’t show up that often, and when not shown, it is hard to find out how to deal with specific issues. This is the main problem with Speed Tracer. For us to be able to fix slow rendering of HTML, Google needs to provide us with hints on where the problems are and how to fix them. For instance, it would be pretty simple to implement a warning when a table is used for layout rather than a div. The tool could even generate the optimized code.

Look at the following example:

Speed Tracer is trying to tell me that a paint operation is slow. Slow is measured as anything above 100 ms. But the tool doesn’t tell me what parts of the painting is slow and how to fix it.

My conclusion on Speed Tracer is that it’s semiuseful but has a lot of potential if Google decides to update it with more rules and tips.

(Proofread by inWrite)

Free tools to check your performance

21. January 2011 · Write a comment · Categories: Performance · Tags: , , , ,

So how do you spot if your site has performance issues or not? You probably have an idea if your site is responsive or not, but how does it compare to other sites, and which potential problems do you have? This is a starter’s guide to some of the tools I’ve used for the job. Blog posts with detailed info on each tool will be published later.

By the way, this post only focuses on the tools and techniques used for updating one page at a time. If you’re running a serious site, I highly recommend you to stress test your site using either real users or simulated clients. More on this subject in a future post as well.

YSlow

YSlow is probably one of the best and mostly used tools for analyzing performance problems. YSlow is a plug-in for the incredible Firefox plug-in Firebug. Yes, that’s right, a plug-in in a plug-in. If you don’t have Firebug installed, do it now. You won’t regret it! YSlow does its job by analyzing the current page and showing you all the issues worth fixing. You will get a total score from 1 to 100 (100 is the best) based on not your response time, but the way you’ve written your code. Example: you are referencing fifteen JavaScript files, hosted at your own domain. This scores low, because you could combine these into one reference instead. Not all rules in YSlow are equally important, but start from the top and starting seing your response times improving.

Google Page Speed

Google Page Speed is very similar to YSlow. It’s a plug-in for Firebug and analyzes the current page and shows issues. I don’t really know why Google decided to make a clone of YSlow, rather than contributing to the YSlow project. But the Page Speed plug-in has a couple of great features, not natively implemented in YSlow. One cool feature is the ability to let Page Speed generate optimized images on the fly for your page, which saves you the time in Photoshop.

Google Speed Tracer

Google Speed Tracer is the new kid on the block. It’s a plug-in for Google Chrome, which is nice if you’re using Chrome instead of Firefox. Speed Tracer is similar to YSlow and Page Speed but also includes a great profiler. The tool is definitely usable but still needs some work in order to beat the Firefox plug-ins. I like the new view on things though, rather than just doing another YSlow clone.

Google Webmaster Tools

This is not really a performance tool, but Google Webmaster Tools have an interesting feature for investigating your site performance over time. Beneath the menu Labs | Site performance you will find a graph, showing the average response times for your site in the last six months. It’s a good idea to follow this graph at least once a month, to verify that you didn’t break something with one of your software updates. You will need a lot of visits for this graph to show a realistic image, though. The data are collected through visitors of your site, using the Google Toolbar.

The rest

This post only focused on optimizing the web part of your application. If you’re connecting to a back end, a database, or similar, you could have performance problems here as well. In the upcoming posts on the various performance tools, I will show you how to spot these kinds of problems.

(Proofread by inWrite)