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