Firebug Net Panel Tooltip Quick Introduction

Firebug is a very popular Firefox plugin for Web developers. When we start to look at front-end performance, its built in Net Panel provides a very handy and useful view for network traffic between browser and originating servers at the back-end. As of this post writing, firebug latest version is 1.5.4.

Software is hard provides many detailed info about firebug, and including blogs and tutorial. I just want to recap what I got from them and other resources, regarding its Tooltip analysis data.

Here is one example

Each request has several phases from the tooltip, here are some notes about each request phase.

    * DNS Lookup: DNS resolution time, from domain name to IP. When it is cached, the time is usually zero.
    * Connecting: Elapsed time required to create a TCP connection (RTT?)
    * Blocking (not on the screenshot): Elapsed time spent in a browser queue waiting for a network connection. Displayed only in the case where this situation happens because browsers have max limit for persistent connections per server.
    * Sending: Time needed to send request data to the server (upload time)
    * Waiting: Waiting for the response (till the first byte is received from the server), usually it is backend server response time, or called SPL (Server Processing Latency).
    * Receiving: Time necessary to download response body (download time)

For more info, check out this blog (firebug-net-panel-timings) from Software is hard

    * DOMContentLoaded event fires when parsing of the current page is complete. If this number is negative the event was fired before the request is started.
    * Load event fires when all files have finished loading from all resources, including ads and images. If this number is negative the event was fired before the request is started.

Microsoft has a test drive to explain DOMContentLoaded and Load 2 events.