Testing page load speed with Firebug
The more I find myself using JavaScript, the more I begin to worry about the weight of my pages. With the use of jQuery, much that was tradiotionally server side can now be handled on the client side with JavaScript.
So how does one go about measuring the time it takes to load there website? Furthermore, how do we determine which files are taking the most time to load? The answer is the FireBug Net Panel.
To use the Net (short for Network Monitoring) tools you must go to the “Net” tab in Firebug and active them.
Then simply reload your page and watch as Firebug tells you the load time of each item sequentially, whether the item is a CSS, JavaScript or image file.
FireBug will provide you with monitoring on the following:
- XMLHttpRequest/AJAX monitoring
- Examine HTTP Headers
- Whether a file has been cached or not cached
- Break it down by file type (CSS, Images, JavaScript, etc.)
- Watch the timeline unfold
Andreas — August 25, 2008 at 8:30 am
I would recommend the ySlow extension for Firebug for this type of testing. The net-tab is great but ySlow really gives you plenty of tips and information on how to speed up your site.
You can also use the console to time certain parts of your JS using console.time() and console.timeEnd() (more here: http://getfirebug.com/logging.html).
zuborg — September 15, 2008 at 12:34 pm
Right, YSlow is specific performance testing addon for Firebug
I would also recommend this online free tool: http://Site-Perf.com/
It measure loading speed of page and it’s requisites (images/js/css) like browsers do and shows nice detailed chart - so you can easily spot bottlenecks.
Also very useful thing is that this tool is able to verify network quality of your server (packet loss level and ping delays).
kevin — September 15, 2008 at 1:15 pm
Very cool, thanks for adding to the post.