Move Modernizr to the bottom

[paulirish]

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.

Guide to Using Modernizr responsibly.

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.

[arthurvr]

I agree that loading scripts at the bottom is mostly better, but html5shiv is included with modernizr, so in older browsers the page might render wrong when modernizr is loaded at the bottom?

[bartveneman]

You should inline the HTML5Shiv in an inline script tag at the top of the document. This should not need to be a network request.

[arthurvr]

@bartveneman True. I agree.

Once the support for ie8 is dropped, do we still need html5shiv? (#1524)

[patrickkettner]

+1, no need for modernizr to be in the head for a lot of the sites that use it. As long as modernizr properly documents why you would ever actually want it in the head, theres no reason to slow down the internet with this recommendation.

[TheDutchCoder]

+1. People can always move it back to the head in those cases where it's needed / justified, but it's better to present them with the best possible scenario.

[alrra]

@paulirish, @patrickkettner Care to open a PR that makes the change and also updates the docs? :)

[ghost]

Why isnt this merged

[bnjmnt4n]

Why isnt this merged

@emoju:
It’s not a pull request, just an issue created to provide a suggestion. It’s currently awaiting feedback.

[paulirish]

I would like to work on the PR & Docs but don't have the time to. We need to communicate this on the modernizr side primarily. I'd welcome any help with the communication -- basically we need a revision of my article/comment that we publish to help transition existing users to more responsible use of it and justify the change in recommendation.

[roblarsen]

@paulirish I'm through the book grind, so I've got some time to help out with documentation. Let me know what you need.

[austinpray]

Has anybody tried this out on real sites yet? What patterns are most likely to make a site fall into the 25%?

[patrickkettner]

@austinpray relying on modernizr for styling/creating the above the fold content

[drublic]

We will test this within the next couple of weeks in a large scale project. I will provide the results if possible.

[austinpray]

thanks @drublic

Would be interested to hear results.

[arthurvr]

@drublic Do you already have (some?) results?

[drublic]

We don't have a lot of numbers from our production websites yet but here are some test numbers:

We now load html5shiv in header.min.js and our Modernizr custom build in core.js. Before the change, Modernizr was loaded in header.min.js too.

The change saves us in header.min.js
gzipped 3.4KB (2.7 KB compared with 6.1 KB before)
unzipped 10KB (5.6 KB compared with 15.6 KB before)

The saved data moves to core.js
gzipped 2.6 KB (82.4 KB compared with 79.8 KB)
unzipped 7 KB (258 KB compared with 251 KB)

This means we save bytes (because of how gzip works) and deliver the first view faster.
We did not encounter any problems with rendering within our project.

[roblarsen]

ayo, I merged in code that does this 💯