November 11, 2009

Website Profiling with Fiddler

Recently I came upon the task of measuring performance in a corporate website. Generally when profiling I just pop open Google Chrome and run the Web Developer Tools that come pre-installed. It has a built in profiler that works and as a bonus looks really pretty. However, since this is a corporate setting, IE6 is used predominantly and therefore all my tests would have to be done with IE6.

After some research into the best profiling tools that work cross-browser I stumbled across a forum post talking about Fiddler. Fiddler is a complete network profiler, allowing to to monitor all network traffic. But it also gives you the ability to limit it to just browser traffic, which was idea in this case. Simply starting up Fiddler and hitting F12 started the capture process (alternatively, File -> Capture Traffic) and reloading the page captured all traffic. It lists all the items that were loaded on the page and lets you select any number or combination of them to get the total load time for those elements. This feature alone is great because it gives you an overview of all Javascript, or all image files. It even breaks down the distinction between .gif, .jpg and.png files so can see how they rate individually.

As an added bonus, Fiddler even generates charts to compare loading times based on the elements that you selected. This is a great way to provide a quick overview to prospective clients on where their website is slowing down and gives you a leg up in figuring out how to improve this. As a freelance consultant, tools like this really make things a lot easier and provide you with at-a-glance data freeing up your time to look at solutions instead of focusing on the problems.

One thing to note, I thought the Fiddler website looked a little shady, but it is completely legitimate and under active development.

fiddler2

Leave a Reply