Current time: 12-12-2019, 09:22 AM Hello There, Guest! (LoginRegister)

Post Reply 
 
Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Javascript at the bottom blocking start render ?
04-17-2012, 02:26 PM
Post: #1
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:
http://cl.ly/2M450z0h1I1h0R3X273p/o

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

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 !

Cheers
Find all posts by this user
Quote this message in a reply
04-17-2012, 04:20 PM
Post: #2
RE: Javascript at the bottom blocking start render ?
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.
Find all posts by this user
Quote this message in a reply
04-17-2012, 06:12 PM
Post: #3
RE: Javascript at the bottom blocking start render ?
As I am not able to see your page, it is a difficult guess. But maybe this helps a bit nevertheless:
http://webforscher.wordpress.com/2010/06...oad-order/

Best wishes,
Markus
Find all posts by this user
Quote this message in a reply
04-17-2012, 10:48 PM (This post was last modified: 04-17-2012 11:06 PM by pqdbr.)
Post: #4
RE: Javascript at the bottom blocking start render ?
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.




(04-17-2012 06:12 PM)LeptienM Wrote:  As I am not able to see your page, it is a difficult guess. But maybe this helps a bit nevertheless:
http://webforscher.wordpress.com/2010/06...oad-order/

Best wishes,
Markus

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 ?


Attached File(s)
.html  index.html (Size: 12.63 KB / Downloads: 76)
Find all posts by this user
Quote this message in a reply
04-18-2012, 12:42 AM
Post: #5
RE: Javascript at the bottom blocking start render ?
(04-17-2012 06:12 PM)LeptienM Wrote:  As I am not able to see your page, it is a difficult guess. But maybe this helps a bit nevertheless:
http://webforscher.wordpress.com/2010/06...oad-order/

Best wishes,
Markus

Can you believe I'm having the "elevation of JS" NOT in IE, but in Chrome ?

I even tought the dropdown <select> for Chrome/IE was switched, but I test other locations and looked at the screemshot and it seems it's not the case.

Anyways, in Chrome all my JS files declared at the bottom are being loaded first, and in IE they are being loaded in the order that they appear in HTML.
Find all posts by this user
Quote this message in a reply
04-18-2012, 01:09 AM
Post: #6
RE: Javascript at the bottom blocking start render ?
(04-18-2012 12:42 AM)pqdbr Wrote:  
(04-17-2012 06:12 PM)LeptienM Wrote:  As I am not able to see your page, it is a difficult guess. But maybe this helps a bit nevertheless:
http://webforscher.wordpress.com/2010/06...oad-order/

Best wishes,
Markus

Can you believe I'm having the "elevation of JS" NOT in IE, but in Chrome ?

I even tought the dropdown <select> for Chrome/IE was switched, but I test other locations and looked at the screemshot and it seems it's not the case.

Anyways, in Chrome all my JS files declared at the bottom are being loaded first, and in IE they are being loaded in the order that they appear in HTML.

And probably this depends on Browser-Versions as well...

I assume, that Browser-Vendors are putting some "intelligence" in the Pre-Parser. As you can see in my example, IE did elevate the CSS file to the top, even though it was placed at the bottom.
Assumption could be, that Browser-Vendors want to prevent Race-Conditions to happen due to splitted JS, that the developer didn't think of. And therefore loading all of them in a bulk fashion, if there is more than one. But that is just an assumption.

Best wishes,
Markus
Find all posts by this user
Quote this message in a reply
04-18-2012, 01:22 AM
Post: #7
RE: Javascript at the bottom blocking start render ?
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.
Visit this user's website Find all posts by this user
Quote this message in a reply
04-18-2012, 03:20 PM (This post was last modified: 04-18-2012 03:21 PM by pqdbr.)
Post: #8
RE: Javascript at the bottom blocking start render ?
(04-18-2012 01:22 AM)pmeenan Wrote:  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 </body>. In IE8 they are being loaded in the bottom, but in Chrome they are all being "elevated", as If I had declared them inside <head> !

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)
Find all posts by this user
Quote this message in a reply
04-19-2012, 08:01 PM
Post: #9
RE: Javascript at the bottom blocking start render ?
Hi pqdbr

Quote: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

Quote:that test was run using Google Chrome

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).

Marvin
Find all posts by this user
Quote this message in a reply
04-19-2012, 10:02 PM
Post: #10
RE: Javascript at the bottom blocking start render ?
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: http://www.webpagetest.org/forums/showth...?tid=10990
Visit this user's website Find all posts by this user
Quote this message in a reply
Post Reply 


Forum Jump:


User(s) browsing this thread: 2 Guest(s)