Javascript at the bottom blocking start render ?

Hi there guys, how is it going ? First of all I’d wish to say Patrick is doing a nice job in running this community ! (I don’t know if there are others involved).

I want some help analyzing my waterfall:

My JS files are being called at the very bottom of my file, right before the the .

It consists of jquery and jquery-ui being served from Google’s CDN, and my own javascript file (concatened by rails so it’s a single file).

But why are these 3 javascript files appearing at the very TOP of the waterfall and, as it appears, blocking the start of the download of all the other assets ?

I’m using 4 static cookieless domains (static0 to static3) and this has provided a good boost in speed, but feel free to make other suggestions as well !


Regarding the js issue: I don’t think it’s something anyone is going to troubleshoot without seeing the page source and WPT test results URL. Looks like you’re trying to keep that info confidential.

Regarding general suggestions: I’d say define a js function that loads most of those resources after the load event has fired. jQuery needs to load during the initial page load, but I’m guessing most of the other requests can be delayed until afterwards.

As I am not able to see your page, it is a difficult guess. But maybe this helps a bit nevertheless:

Best wishes,

I wasn’t trying to be secretive or anything, it’s just that we’re about to launch in two weeks and I was asked to not put the link out there yet (we want the first crawl to look right and we need a lot of work to do regarding duplicate pages and pagination).

Anyways, I’ve attached our html below.


Markus, that article helped a lot, I’m going to try to implement the techniques outlined here (it was linked from your article), specially because Rails already concatenates all my js files into one big one.

The only thing is, that test was run using Google Chrome, so wasn’t it supposed to work fine in Google Chrome ?

Can you believe I’m having the “elevation of JS” NOT in IE, but in Chrome ?

I even tought the dropdown

Two quick suggestions for a sanity check:

1 - Try enabling “capture response bodies” in the advanced settings and make sure that the HTML that WPT is getting is what you expect

2 - Try enabling the new “capture dev tools timeline” support for Chrome and seeing if there is anything obvious in there - specifically when the script actually gets executed.

It’s possible that the prefetch in Chrome is prioritizing js content but that would be something I hadn’t seen before.

I captured the response body and I can confirm you, 100% sure, that the 3 files (jquery, jquery UI and all.js) are declared at the bottom of my HTML file (3 lines from . In IE8 they are being loaded in the bottom, but in Chrome they are all being “elevated”, as If I had declared them inside !

Just to put this in perspective, my current load time for Chrome is 6.7 seconds, and for IE8 is 3.7 seconds !

Start render is 1.9 for IE8 against 3.2 for Chrome !

Has anyone heard about this “elevating” of JS by Chrome’s parser ? I couldn’t find anything in the web.

About your second suggestion, where do I find the dev tools timeline ? (not the option, the results)

Hi pqdbr

My guess is that Google might have crawled your site shortly after Google Chrome visited it, if not earlier, since Google might have had other ways of discovering your URL(s).

The dev tols timeline result is right below the load time for each run (to the left of the waterfall) on the main results page. There are some screen shots here: