WebPagetest Forums
2012 best practice for inlining JS in Head? - Printable Version

+- WebPagetest Forums (https://www.webpagetest.org/forums)
+-- Forum: Web Performance (/forumdisplay.php?fid=3)
+--- Forum: Optimization Discussions (/forumdisplay.php?fid=5)
+--- Thread: 2012 best practice for inlining JS in Head? (/showthread.php?tid=11726)



2012 best practice for inlining JS in Head? - jesper_mortensen - 09-29-2012 10:23 PM

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:
Code:
<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?


RE: 2012 best practice for inlining JS in Head? - andydavies - 09-30-2012 01:34 AM

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


RE: 2012 best practice for inlining JS in Head? - jesper_mortensen - 10-02-2012 04:33 AM

Good find, thank you! Smile


RE: 2012 best practice for inlining JS in Head? - Iony - 11-21-2012 06:00 PM

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