What tools are available for analysing the time a browser spends processing a page.

Question

We are performance tuning our web site at the moment and have the main page content down to a respectable 65ms for firefox to grab it (from request to finish receiving the html).

Caching means there is generally no other content that needs to be requested from the server (after the initial page view).

However, firefox is spending another 400ms until onload fires. I assume this is the time it takes firefox to parse our html, fetch images, css and js from the cache, parse the css and js and render the page.

So, my question is, how can I drill into this 400ms of dead time and find out where most of it is being spent? eg. if I knew that css parsing was taking a long time, I could review that and turn it up as needed.

I don't really have any tools with enough sophistication for doing this. Any suggestions?

UPDATE: I know when the resources (like images etc) are loading. It is the other time, after the resources load I am trying to look at. YSlow don't help with this area.

Answer 1

Firebug with the YSlow add-on are great tools for seeing what resources are taking the longest to load.

Answer 2

You may want to give Fiddler a try. You can watch the HTTP traffic from several browsers and see a page's resources' load times.

Answer 3

In addition to firebug and yslow mentioned by Tim S Van Haren, there's also Page speed by google, also a firebug add-on.

---

Edit: Crockford recommends in his talks about javascript to use Dynatrace for IE, or the developers tools in chrome. Apparently, Firefox doesn't have the extensions for that level of precision yet, but it may have changed since the talk

And there's also this previous thread on Stackoverflow