There’s a lot of work that transpires before I can recommend a performance tool. I have to do a large amount of testing to verify the tool’s accuracy, and frequently (more often than not) that testing reveals inaccuracies.
Like many web developers, I love Firebug and have been using it since it first came out. Firebug’s Net Panel, thanks to Jan (“Honza”) Odvarko, has seen huge improvements over the last year or so: customized columns, avoiding confusion between real requests vs. cache reads, new (more colorful!) UI, and the recent support of export.
Until now, Net Panel suffered from an accuracy problem: because Net Panel reads network events in the same JavaScript thread as the main page, it’s possible for network events to be blocked resulting in inaccurate time measurements. Cuzillion is helpful here to create a test case. This example has an image that takes 1 second to download, followed by an inline script that takes 5 seconds to execute, and finally another 1 second image. Even though the first image is only 1 second, the “done” network event is blocked for 5 seconds while the inline script executes. In Firebug 1.4’s Net Panel, this image incorrectly appears to take 5 seconds to download, instead of just 1 second:
Honza has come through again, delivering a fix to this problem in Firebug 1.5 (currently in beta as firebug-1.5X.0b1 which requires Firefox 3.6 beta). The fix included help from the Firefox team to add the actual time to each network event. The results are clearly more accurate:
A few other nice features to point out: Firebug Net Panel is the only packet sniffer I’m aware of that displays the DOMContentLoaded and onload events (blue and red vertical line). Firebug 1.5 Net Panel has multiple columns available, and the ability to customize which columns you want to display:
With these new features and improved timing accuracy, Firebug Net Panel is a great choice for analyzing HTTP traffic in your web pages. If you’re not subscribed to Honza’s blog, I recommend you sign up. He’s always working on something new that’s helpful to web developers and especially to Firebug users.
Note 1: Remember, you need both Firefox 3.6 beta and firebug-1.5X.0b1 to see the new Net Panel.
Note 2: This is being sent from Malmö, Sweden where I’m attending Øredev.
David | 05-Nov-09 at 12:55 pm | Permalink
“which requires Firefox 3.6 beta). The fix included help from the Firefox team to add the actual time to each network event.”
Is there any further information available about the changes in FF 3.6 that helped Firebug more accurately measure network results? Perhaps a bug reference or an entry in the release notes somewhere?
Sergey Chernyshev | 05-Nov-09 at 2:27 pm | Permalink
Steve, regarding DOMContentLoaded and onload events, how does that relate to WebPageTest.org’s “Start Render” and “Document Complete”?
Sergey
Dave Gregory | 05-Nov-09 at 2:55 pm | Permalink
For my work, I am using a lazyloader to stop loading a few hundred thumbnails until they are needed. Even when using this new Firebug and Firefox 3.6, I still see the images load in the Net panel.
My script starts on Dom Ready.. I have it take all images in a certain container and change the src to /images/1×1.gif and create a new attribute called origin. Origin keeps the correct src on file. When someone clicks to the next section, it loads the images and slides the section into place..
You can check it out here if you wish:
http://www.howcast.com/categories
so is there something I am missing?
BTW: in Firebug’s HTML view, the images wont show up.
Steve Souders | 05-Nov-09 at 3:48 pm | Permalink
@David: I recommend checking the 3.6 release notes and Honza’s original blog post.
@Sergey: onload is the same as Document Complete in IE. I don’t know what Start Render corresponds to.
@Dave: I don’t understand the question.
Dave Gregory | 05-Nov-09 at 3:54 pm | Permalink
Sorry..
I am trying to figure out if the new Net panel accounts for lazy loading (it wont count images that are not yet loaded)
I’d really like to test/measure performance of lazyloading vs not lazyloading.
Steve Souders | 05-Nov-09 at 3:59 pm | Permalink
@Dave: All packet sniffers that I’ve used show everything that gets downloaded, regardless of when that happens. Unlike other packet sniffers, Net panel shows the onload line. So, you can detect what is lazy loaded by seeing if they’re after the onload line.
Dave Gregory | 05-Nov-09 at 4:34 pm | Permalink
Sorry I didn’t quite understand that from your 5th paragraph. Thanks a bunch! I appreciate your super quick responses!
Manjusha | 04-Dec-09 at 1:14 pm | Permalink
Hey Steve,
Could you explain what “connecting” and “queueing” time measurements as indicated on Firebug’s net panel mean? Been googling for that, and didn’t come across a clear definition.
TIA!
Steve Souders | 05-Dec-09 at 12:27 am | Permalink
@Manjusha: Here’s Honza’s blog post: http://www.softwareishard.com/blog/firebug/introduction-to-firebug-net-panel/