DOMContentLoaded/load (event), how to increase the speed.

Question

I'm trying to do everything I can to increase the load speed of my pages, and in particular the ajax loaded components.

In firebug, my out put looks like this

I'm not entirely sure if I'm reading this correctly, but it is either +2.19s for DOMContentLoaded (or it mayonly be .8 if we are supposed to subtrack that from the waiting response).

But then 4.67s for the 'load' (event).

Both of these seem like significantly long loading times.

I haven't been able to figure out what would cause these sorts of times. These stats are from loading a straight html page which I normally load via ajax. But this is just the HTML. No javascript in the page, and the page is being loaded directly, not through an ajax request.

However when i do load this page via ajax, I recognize a significant delay while the page attempts to load.

Any suggestions?

I've been looking through the html in IE debugbar, and it all looks surprisingly clean. There are 30 images in the page. Could that be what the 'load' event is waiting for? And if so, is there any way to speed this up?

In particular, as the user will never load this page directly, but only via an ajax request, is their a way to improve the page loading performance in ajax. The problem isn't with the ajax loading script, but with the html page specifically.

----------------------EDITTED------------------------------ The results of the page are loaded into a jquery cycle where multiple images are visible at a single time, so using lazyloader provides a pretty horrible user experience. (assuming it is the images which is causing this problem).

Answer 1

Those firebug stats are telling you that:

• It takes 2.1 seconds from the time you started the request for your server-side code to start returning a response
• It then takes 19ms to download the response (i.e. the HTML)
• 71ms or so after that, the DOMContentLoaded event fires
• After the page has completely loaded (after the images are all downloaded), the load event is fired.

DOMContentLoaded fires as soon as the DOM is ready. The load event waits until the whole page is loaded (including any external resources like images)

Most of the time in your request (other than downloading the images) is spent waiting for the server to construct the HTML. Maybe your server-side code can be optimized to run faster?