JS files are coming top in waterfall instead of coming at the end

Web Performance Discuss Test Results
1

If you see the waterfall, it showing the JS files are loading at line 14 and 15. But if you open and see the view source of the page, javascript files are included at the end in page source.

Is there a bug in webpage test ?

http://www.webpagetest.org/result/130606_7C_1BHZ/1/details/

JS : http://ir.ebaystatic.com/z/qb/yvhv3fhwwu3m1kltopsuvbuhy.js

if you see in chrome network panel you can see that JS files are coming as expected the end.

2

It’s a feature of the way the Chrome prioritises the download of resources, Firefox does something similar but it’s more subtle.

3

if its happening because of the chrome optimization, why i am not seeing it in my local latest chrome browser?

4

You should be able to see it in the local browser too, I can…

If you test channel4.com, the difference in waterfalls is reasonably noticable when highlighted - https://twitter.com/andydavies/status/343252321834262528/photo/1

Channel4.com, Chrome - http://www.webpagetest.org/result/130608_BJ_2be11db69857b3710f76eaaf2c5d29d2/1/details/

Channel4.com, IE9 - http://www.webpagetest.org/result/130608_H8_f26a3ebcae0763364f955b77b341eb85/1/details/

5

Interesting! To avoid the blocking we move scripts to the bottom of the page. now chrome is making high priority and loading them on top. Wondering if there is any documentation (from chrome or any blog posts) to understand when and why chrome does it and how doe it improves the performance.

6

There is but I can’t find it right now - this is the closest I get Oh really, why is that?

Remember it’s the preload scanner doing this i.e. it’s looking for the blocking resources and scheduling their download so they get downloaded sooner.

Even though the preloader is scheduling the download of scripts early, if they were higher in the document they would still block rendering until they’ve been downloaded and executed so by placing them at the bottom they don’t block rendering.

7

Here is the write-up from the changes that were made to the scheduler in Chrome 27: https://docs.google.com/document/d/1JQZXrONw1RrjrdD_Z9jq1ZKsHguh8UVGHY_MZgE63II/preview?hl=en&forcehl=1

I wouldn’t change anything on the page because of it though, the scheduler is an evolving work in progress and hopefully it will get smarter about balancing priorities across images and scripts based on where they are on the page.