Using Google Chrome Inspector to Analyze Page Load Times

I've been checking out Google's Chrome browser since it's release and I like it so far. The GUI is clean and it's very fast on complex sites with lots of javascript. The separation of tabs to different processes each prevents it from hogging the memory after some time since memory is completely recovered by the OS when a tab is closed.

The main thing lacking compared to Firefox is of course the support of extensions and a huge number of extensions already existing, some of which are critical to me now.

I did discover a cool feature today - the Inspector tool.
It can be accessed by right clicking a page and selecting "Inspect element":











The first screen allows you to see and edit the page content, it's style and offers a javascript console:






















Nice, but not much new compared to existing tools (such as Firebug extension for Firefox). The interesting bit is selecting the "Resources" button and reloading the page:



















We can see the entire sequence of loading the page on a timeline, from sending the request to receiving it (light blue) and then rendering the page (dark blue). As the page is being rendered, requests for additional resources are sent.

Selecting a line displays the resource that was loaded - whether it's html, css, javascript code or an image:















It gets more interesting when we look at a more complex page (amazon.com). The top bar seems to show the relative load time distribution between the various resource types - html (blue), css (green), images (purple) or javascript files (orange):



























I think this can be a very useful tool for understanding how a site works and perhaps optimizing it's load time.