Why does the browser wait to end loading the page?

Question

Can anyone explain me why those spaces (marked with ?) are there? They are delaying the page loading. I thought it could be the page/script parsing time, but ~350ms looks too much for a simple page; Okay, there're lots of script, but it still looks to much.

What can it be?

Georgiana

Use the Timeline view to see what else is happening. – Eversole

If you remove the script, this effect is still remain ? – Rosati

Can you verify this using other tools like firebug? – Tolly

I don't think those gaps are delaying the page, it's the document waiting and receiving time. If you look in firebug you won't see those gaps. – Venepuncture

The gaps are shown in firebug too. The thing is that there's an important ajax request at the end (the one marked in yellow), which is being delayed. I guess it has to do with script parsing, but couldn't figure how to optimize it yet. – Georgiana

What initiates the need to load the images? are they image tags, or css references or loaded by javascript? – Guardhouse

How about adding the generated HTML source code, so that we can analyze and map firebug visualization and source code? – Unglue

Answer 1

My guess is that it is a JavaScript loading issue. You should be deffering loading of JavaScript using a defer attribute. This will allow the page to load before it will execute the JavaScript code.

This is because browsers are single threaded and when they encounter a script tag, they halt any other processes until they download and parse the script. By including scripts at the end, you allow the browser to download and render all page elements, style sheets and images without any unnecessary delay. Also, if the browser renders the page before executing any script, you know that all page elements are already available to retrieve.

See http://www.hunlock.com/blogs/Deferred_Javascript and http://blog.fedecarg.com/2011/07/12/javascript-asynchronous-script-loading-and-lazy-loading/

Arabic

Answer 2

Is your CSS in the header section?

Else your browser might wait quite long before attempting to load the resources.

Second guess would be that your JavaScript is blocking the page load for whatever reason. Is there any DOM manipulation right after load? Also, is your JavaScript located at the bottom of your page, loaded last? Else this could potentially block loading.

Counterspy