How to measure Site Speed or Web Performance13
A very hot topic last year: site speed, web performance, site performance or whatever you want to call it (got better suggestions?). But how do you measure the speed of you own site? There are several tool that can measure the load times of your site, but which one is right?
First of all: what is Site Speed
The speed of a site is the time it takes from the moment a user navigates to your site (for example through a link) until the site is fully loaded and usable. But there are many factors in this period that helps keeping the visitor patient enough to wait for a full load. The first moment is the moment when the browser begins rendering a site: until that moment people have to look at a white screen where nothing happens. Then the site starts to appear on the screen bit by bit until he is usable. And the last stage is where all the images are loaded to make the site look complete.
The tools to analyse Site Speed
You need a good set of tools to see how your site is doing and what the greatest bottlenecks are during loading. I will describe a group of tools and their pro's and cons. Important things to consider is your target audience: worldwide or several countries, and which browser are they using. You want to test your site on both these areas.
The first tool I want to mention is Webpagetest.org. This tool allows you to do an analysis of the load time of your site from a list of locations all over the world. The reports are detailed and tell you exactly how the different elements of the tested page load. It shows a waterfall, an optimization checklist, the Google Page Speed scores (see more details further below), screenshots during loading, first-view and repeat-view load times, etc. Really an extensive list of point so you can start working on your site.
And yes, the load time of my site is 5 seconds for the first view, but that has mainly to do with the Time To First Byte. Thats's the time it takes for the server to create a page, do some database stuff, etc before he sends out the first byte. After that the site loads within 1-2 seconds, as you can see in the repeat view numbers.
Relatively new in the field is Loads.in. This tool makes it easy to test your site quickly from different locations and multiple browsers. It also stores the tests (see mine) on a public URL to see improvements over time. It has a waterfall to see the order of the elements that are loading. Great tool for fast analysis and visual attractive pages you can use to convince clients
A few weeks ago I saw the online tool from Pingdom. It says it measures load times of your website, but this tool doesn't work as a browser. And to have a good indication about scripts that are doing stuff you really need a tool that renders the page so it actually can see what is happening (thanks to Aaron Peters for telling me this).
Google launched a tool of their own: Google Page Speed. It's an extension to the well known Firebug Firefox Extension. The advantage of this tool is that it works in your own browser, so you don't have to depend on online tools. What the tool does is giving you an extensive list of points that need some attention:
Each point shows the elements that can be optimized along with a link to a help page that gives you more explanation about the subject.
Yahoo also created a tool (YSlow) that can analyse your site performance on a huge list of things. The tool works in Firebug also and is basically the same as Google's Page Speed, although they mention some other points. It can never hurt to create a report with this tool also.
If you don't have the availability over a Firefox browser than you can use this online GTmetrix tool that will do the Google Page Speed and Yahoo YSlow analysis for you. It returns with both optimization lists and huge grades that can break your day
Next to the grades they provide a waterfall as we saw before.
Google Webmaster Tools
Recently Google put an extra report in the "labs" section of the Google Webmaster Tools called "Site Performance". It shows a graph with the time it takes for users to fully load a page in your site. The line is the average for all users (that have a Google Toolbar) on all pages of your site. Mines looks like this right now:
I launched my new site a few weeks ago, and during the last weeks I improved the performance step by step. I expect the line to go further down in the next days. Almost always the improvements I do to a site are reflected in this graph: so yes, performance tuning works.
They also have other graphs in the "Diagnostics" -> "Crawl stats" screen, but they will tell you how fast Google could download a page. That's good to know, but a fast server doesn't mean a fast site.
Last but not least: what Google can do with their toolbar, you can do with your Google Analytics account. Add some extra code and track the load time of all your visitors. Great advantage of having them in Google Analytics is that you can segment by browser or country. There are some existing articles that describe the load time tracking with pageviews or customvars, but I still prefer my own solution to track load times with event tracking:
Free extra tip
In the past I improved a lot of sites to get them faster and faster. And almost each time one of the bigger factors in load time was external content. That could mean "Tweet this" or "Like that" buttons, ads, etc. If you want to improve load times of your site: have a look at the external content that you are loading and decide whether it's really necessary to have it or not. And if it's really necessary, try to load that content after your site is loaded. I did the same with the "Tweet this" buttons on my site: if you have a good look at the site when it is loading you will see that the buttons appear after everything else is loaded. Another great tips is to reduce the amount of HTTP requests as Yoast described.
What are you using?
Do you have tools that can add something to the mentioned ones? Which tools do you prefer?