2012 best practice for inlining JS in Head?

As so many others, we are using Modernizr.js on every page. Modernizr.js must run in the HTML Head (it’s a JS library for browser feature detection & HTML5 polyfill & async JS loading).

Our build of this library is about 8 kb before HTTP compression, so the actual download time is negligible.

The classic performance advice from a few years back was to never in-line JS, especially not in the head, as it used to block browser downloads. So scripts which absolutely must execute before initial rendering should be loaded last in Head, and loaded via an external file: <script src="modernizr.js"></script>

A quick look at Browserscope.org seems to indicate that most modern browsers don’t have the blocking issue anymore, as the “|| CSS + Inline Script” case is green for IE9+. In-lining the JS would save an HTTP request, and for us the time saved by eliminating the first HTTP request for the JS file is greater than the additional download time by in-lining on every page load.

What is the feeling in this community, is it anno 2012 best to load small, fast Head javascripts as external files, or in-line with the HTML? Are there edge cases I didn’t think of?

Aaron Peters covered this in his talk at last years Velocity EU - http://www.slideshare.net/startrender/fast-loading-javascript

Seems 2.5KB was the magic number for inlining back then, you might need to research whether it has changed much in the last year.

There are also some other solutions you could look at with inlining and local storage too

Good find, thank you! :slight_smile:

I introduce JS in head and my website broken!I dont know why?