63

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?

4 Answers 4

72

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.

3
  • 7
    Ha, FOBUC. +1 just for that!
    – eduncan911
    Jul 18, 2012 at 2:55
  • 7
    It looks like FOBUC (Flash Of Butt-Ugly Content) has fallen out of favor for "FOUC" (Flash of Unstyled Content). Google can't even (or won't) find any reference to it. Bah.
    – Mog
    Sep 6, 2013 at 17:07
  • 6
    If you are finding this more recently, Paul Irish's update covers this in a 2014 post here github.com/Modernizr/Modernizr/issues/878#issuecomment-41448059
    – Simon
    Nov 25, 2015 at 12:32
55

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>
3
  • I'm having that same issue! by loading modernizr.js and respond.js it slows my page load time significantly. Did you customize your js file to remove the shiv or are you including both?
    – Oneezy
    May 12, 2013 at 21:17
  • 2
    My modernizr.custom.min.js excludes the shiv and also was tailored only to check the features which I actually use. Depending on your needs, that might actually be small enough to consider inlining on the page May 13, 2013 at 15:17
  • thanks chris. Working a pretty big project right now so im going to need the entire suite.. just x out the shiv and include it separately. also trying to get that requireJS to do some work for us
    – Oneezy
    May 14, 2013 at 14:43
34

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.

https://github.com/h5bp/html5-boilerplate/issues/1605

15

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.

2
  • yep, that's what I thought, it seems obvious. Load custom shim+modernizer (joined for unique request) in head for < IE9 only
    – aMarCruz
    Apr 14, 2015 at 4:03
  • Is there any reason not to do it this way? Apr 24, 2017 at 12:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.