Subscriptions
How to measure the speed of your web pages
A few days ago I was building a web page that required a rather heavy use of JavaScript includes (like the deli.cio.us links and last.fm "recently played" list here on this site) as well as several Ajax calls to the server. During testing I noticed that the page was dog slow and assumed that all my extra JavaScript tomfoolery was the culprit. Not knowing exactly how to tell where the hangups were in my loading times, I set off Googling like a madman (mixed with some bugging of my cubicle neighbor Mac) to find an easy solution to test web page speeds.
The first solution I found was the Firebug Firefox extension, conveniently already installed on my machine. Firebug is by far the most thorough solution I found. With the Firebug pane open in your browser, select the "Net" tab where you will then see each item the browser has to download, and details about each item. It was everything I was looking for, but I really don't like browsing with an extra pane taking up screen real estate. And the only way you can see and info about page loading in Firebug is to have the pane open.
That's when I noticed FasterFox (another Firefox extension) had the option of showing page download times in the browser's status bar. While it doesn't offer any of the details that Firebug does, it sits nicely out of the way but is always available without having to open any browser panes.
Although the combination of Fasterfox and Firebug has worked great for my needs, there are a couple of issues that you should be aware of. First, the results are highly dependent on your internet connection. If you are on a super fast or slow connection your results will be skewed. Since internet speeds are always fluctuating anyways I don't really see this as a big deal. Results should still be accurate enough to find bottlenecks in your pages. The second issue is that your browser caches page elements to improve download times, and this can cause you to miss big problems in your code. One solution to this is to clear your cache before testing, but I am way to lazy to ever do that. An easier solution is to use a site like WebWait to confirm your local speed tests. WebWait simply downloads the page you request and reports the wait time. While I'd love to see the WebWait have some more advanced features like Firebug, it is still a pretty handy tool to have available.
Should you be concerned about the loading times of your web pages? Of course you should! Just check out the problems Fred Wilson has had with his popular blog over load times. There was a time when I always checked page weights during development so that I could keep things relatively fast for dial-up users. Over time web design has moved more towards lightweight CSS based layouts, and the public has moved towards increasingly fast broadband connections. For the past two or three years I kind of got lazy and stopped caring about page speeds, and never really had any problems. But with the increasing use of 3rd party Flash/Javascript widgets and asynchronous Ajax calls, this is an issue that responsible web builders need to consider again.
If you know of any other good ways to test page speeds, please let me know in the comments!
I tried both methods, per your suggestion. Strangely though, Fasterfox and Firebug report different load times when they're used together. The difference was over 50% at times, so I don't know what to think. A stopwatch measured a time close to that produced by Fasterfox, so it seems we should trust it more than Firebug.
Comment by Eiki Martinson — February 21, 2007 @ 2:55 pmyou can use YSlow extension for firebug. I have one question on the same issue. Do you know how to measure the time a browser takes up to decode, display and render a web page. I do not want to measure download time. If I keep my pages on my local disk then the time firebug or fasterfox would display will be the required time or they give only the download time.
Comment by Chandan thakur — October 24, 2007 @ 9:29 pmI have no idea how you'd measure that. I have a feeling that almost 100% of the time your download speed is the big bottleneck. Since your browser is rendering and downloading at the same time, you would have a hard time measuring the rendering speed because it will be idling as it waits for more content, even on a local disk. That is a total guess though.
Comment by Mark Allen — October 28, 2007 @ 10:09 pmSome time before, I did need to buy a good car for my organization but I didn't have enough cash and could not order something. Thank heaven my comrade adviced to try to get the business loans from creditors. Thence, I acted that and used to be happy with my bank loan.
Comment by Olivia22Mccullough — July 5, 2010 @ 10:36 am