Shared publicly  - 
 
 
Chrome’s preloader delivers a ~20% speed improvement!

Wait, what’s a preloader? The preload scanner is designed to look ahead in the requested document and discover critical resources (CSS, JavaScript, images), such that they can be dispatched as soon as possible - this helps reduce the overhead of network latency. All modern browsers use this or similar technique to help speed up your browsing.

How do I design my pages to take advantage of the preloader? Simple, specify your critical resources in the document (aka, HTML). The PreloadScanner does not (and cannot) speculatively execute JavaScript, so if you are scheduling resources from JS, then you’re not getting the benefit of the PreloadScanner. This is why declaring your resources in the HTML markup is so important for performance!

Below results are a direct comparison with Chrome preloader ON vs. OFF, run against ~2000 sites. For full and raw results, see: http://goo.gl/Wd4wg - courtesy of +Patrick Meenan and +James Simonsen.

Curious to learn more about Chrome networking performance? Check out “High Performance Networking in Google Chrome” @ http://bit.ly/hpnigc.
29
13
Raghava Nellaturu's profile photoJohnnie Walker's profile photoMichael Gaertner's profile photoJay Young's profile photo
5 comments
 
Thanks, great info.

It's interesting because I have seen some developers doing all their js loading using require.js, and while I agree that require.js can be useful for some type of resources, it should not replace the HTML declarative way of doing it. 

Someone should write a "When to use require.js and when not to"
 
This certainly is a interesting topic. 
To me the preload scanner is not a win-win

Chrome wants to see the resources of the website in the HTML to be able to parse them and prioritize them. But doing so, you can punish other non-chrome-browsers because they are not that smart.

The ethernal question: the loading of resources and dependencies is a web developer task, or a browser task ?


+Jeremy Chone Use almond.js for production. So you get the benefits of developing with require.js AMD, and depency building, and the benefits of the preloader.
 
Is there a way to define resources in HTML to be pre-loaded that are later used by JS (CSS not used to render the first page, lazy-loaded JS, images, etc)?
Add a comment...