6

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?

Chrome page speed screenshot

Matt Ball
  • 354,903
  • 100
  • 647
  • 710
Diego Jancic
  • 7,280
  • 7
  • 52
  • 80
  • 1
    Use the Timeline view to see what else is happening. – Matt Ball Jul 26 '11 at 17:47
  • 1
    If you remove the script, this effect is still remain ? – Aristos Jul 26 '11 at 18:01
  • 1
    Can you verify this using other tools like firebug? – Amir Raminfar Jul 26 '11 at 18:11
  • 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. – zero7 Jul 26 '11 at 20:01
  • 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. – Diego Jancic Jul 27 '11 at 13:39
  • What initiates the need to load the images? are they image tags, or css references or loaded by javascript? – Simon Halsey Jul 28 '11 at 14:36
  • How about adding the generated HTML source code, so that we can analyze and map firebug visualization and source code? – mliebelt Aug 03 '11 at 05:37

2 Answers2

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/

Dan-Dev
  • 8,957
  • 3
  • 38
  • 55
0

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.

rafleo
  • 580
  • 8
  • 28