should Modernizr file be placed in head?
JavascriptModernizrHtml HeadJavascript Problem Overview
Should the reference to the Modernizr JavaScript file be in the head of the page? I always try and place all scripts on the bottom of the page and would like to preserve this. And if it needs to be in the head, why?
Javascript Solutions
Solution 1 - Javascript
If you want Modernizr to download and execute as soon as possible to prevent a FOUC, put it in the <head>
From their installation guide:
> Drop the script tags in the <head> of
> your HTML. For best performance, you
> should have them follow after your
> stylesheet references. The reason we
> recommend placing Modernizr in the
> head is two-fold: the HTML5 Shiv (that
> enables HTML5 elements in IE) must
> execute before the <body>, and if
> you’re using any of the CSS classes
> that Modernizr adds, you’ll want to
> prevent a FOUC.
Solution 2 - Javascript
I would argue no: every script you place in the <head> will block rendering and further script execution. The only thing Modernizr does which must happen in the <head> is the integrated html5shiv, which hacks HTML5 tag support into Internet Explorer 8 and earlier.
I was testing this yesterday and found this to be fairly significant – on the site I work on, which is already fairly well optimized, adding that single script to the head delayed my load-time by ~100ms in IE9, which doesn't even benefit from the shiv!
Since around 90% of my traffic comes from browsers which natively support HTML5 and I don't have core CSS which requires the modernizr classes to display correctly on the initial render, I'm using this approach which places the html5shiv into a conditional comment and loads modernizr without the integrated shim:
<html>
<head>
…
<!--[if lt IE 9]>
<script src="html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
…
<script src="modernizr.custom.min.js"></script>
</body>
</html>
Solution 3 - Javascript
Paul Irish is now suggesting that for > 75% of sites, there is no benefit to placing Modernizr in the head.
> Move Modernizr to the bottom > > It has more potential to introduce unexpected situations, however it's much better for the user to just have no scripts up in the head at all. > > I bet >75% of sites dont need it in the head. I'd rather change this default and educate the 25% than watch as we slow down all these sites.
Solution 4 - Javascript
How about using IE conditionals in a slightly different way? What does everyone think of this solution:
Within the <head></head> tags:
<!--[if lt IE 9 ]>
<script src="/path/to/modernizr.js"></script>
<![endif]-->
</head>
Before the end of the </body> tag:
<!--[if gt IE 8]><!-->
<script src="/path/to/modernizr.js"></script>
<!--<![endif]-->
</body>
This would result in Modernizr loading in the head for IE8 and below, and it will load before the body for any other browsers.
Open discussion on pros and cons welcome in the comments.