Why does my website need so much time to render?

Question

When cached, my starting page only needs to load one element (the "root document") - but then it needs some time until it's rendered completely:

alt text http://www.walkner.biz/_temp/firebug_net.png

The elements following are things loaded asynchronous via JavaScript.

Two questions:

1. Why does it take so "long" from loading the root document until the DomContentLoaded-event?
2. Does it make sense to load some not-so-important things asynchronously? Is it important to have the DmoContentLoaded-event as early as possible? Unfortunately there's not much documentation about that event, but I don't think it's the moment when the page is displayed, is it?

Answer 1

I'm not sure YSlow is gonna help him as that will download all elements for a page and run performance tests on them, whereas swalkner's problem is how long it is taking to render the HTML page itself when all other elements (images, CSS, etc) are cached.

At least that's what I think he's saying.

In the original question you said, "The elements following are things loaded asynchronous via JavaScript." but then listed nothing. What is loaded?

I would suggest checking for Javascript errors in the first instance. Then try removing some of your asynchronous loading calls one by one until you hit the bottleneck. In fact, remove them all, how long does the downloaded HTML take to render? Take that time and work from there.

Is your HTML document very big? Does it use lots of inline styles that could be in the CSS file?

Perhaps if you posted a link to the site then people would have a look at it.