search

h5bp / html5-boilerplate

A professional front-end template for building fast, robust, and adaptable web apps or sites.
https://html5boilerplate.com/
MIT License
56.52k stars 12.25k forks source link

Move Modernizr to the bottom #1605

Closed paulirish closed 7 years ago

paulirish commented 10 years ago

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 commented 10 years ago

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 commented 10 years ago

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 commented 10 years ago

@bartveneman True. I agree.

Once the support for ie8 is dropped, do we still need html5shiv? (https://github.com/h5bp/html5-boilerplate/issues/1524)

patrickkettner commented 10 years ago

+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.

image

TheDutchCoder commented 10 years ago

+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 commented 10 years ago

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

ghost commented 10 years ago

Why isnt this merged

bnjmnt4n commented 10 years ago

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 commented 10 years ago

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 commented 10 years ago

@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 commented 10 years ago

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

patrickkettner commented 10 years ago

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

drublic commented 9 years ago

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

austinpray commented 9 years ago

thanks @drublic

Would be interested to hear results.

arthurvr commented 9 years ago

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

drublic commented 9 years ago

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 commented 7 years ago

ayo, I merged in code that does this 💯