How do I profile / reduce html page rendering time?

Question

I'm working in chrome to improve page load times.

I'm trying to determine the cause of the delay between when the content is finished downloading and the onload event fires. You can see from the image that the content finishes downloading at about 160ms, but the load event doesn't fire until about 600ms.

My question, how can I identify and break down what is taking 450ms to happen? Is it possible to improve the load time here, or is this just an inevitable part of the rendering/painting process?

UPDATE #1

Solved the problem, the culprit was mainly jQuery; page is now loading at the 300ms section. I decided to defer the loading of jQuery (and every other site script until after the window.onload event fired. This closed the gap and now all of the page scripts load after the onload happens.

Here's the timeline view that shows the script loading:

Answer 1

The the Chrome Dev tools you have the Timeline tab, press record, refresh the page and stop the recording you'll get all you need.

Also be sure the check the check boxes you're interested in. Documentation here

I've tested some other pages and they have a similar gap to yours and i think that's the painting and rendering time.

If you really care that much about those 450 ms i suggest you read this article about the way chrome renders the DOM it's pretty good one.

My personal opinion though is that this sounds like premature optimization if you don't plan on rendering a few thousand or tens of thousands of elements you should just let it be or try to optimize some other parts, preferably the JavaScript.

I still suggest reading the article it's pretty good.