Performance using Modernizr to download HTML5 Shiv

Question

My site uses Modernizr and requires HTML5Shiv with PrintShiv. Is there any performance advantage when NOT using Modernizr to download these shivs and instead download them via IE? Obviously, using Modernizr is cleaner, but I'm focused on performance.

Answer 1

I was curious, so I set up some test pages to see.

If your site only needs HTML5Shiv with PrintShiv from modernizr, then downloading only html5shiv-printshiv.js using IE conditional will work better and then always download modernizr for all other browsers (lt IE 9). Therefore, in your case, you should probably stop using modernizr and just use shiv in the conditional expression.

For IE browsers requiring shivs, load / performance is equal between using modernizr and only html5shiv. Performance gains for html5shiv-only use are only seen in modern IE browsers (IE9 and IE10).

Testing Pages:

• Html5shiv-printshiv only: http://jsbin.com/upozar/1
• custom modernizr: http://jsbin.com/erodog/1

Testing Protocols Using IE9 / Cable:

• html5shiv-printshiv only: http://www.webpagetest.org/result/130131_PG_11S8/
• custom modernizr: http://www.webpagetest.org/result/130131_JG_11SE/

Comparing these tests, fully loaded, we save 1.677 seconds using html5shiv-printshiv.js

Update Modernizr . Read the Performance Consideration Documents compiled on the Modernizr GitHub project ticket for more details.

Answer 2

In the latest versions of Modernizr, you can configure only those features that you need. If you are worried about performance, this may be the way to go.

The Modernizr core is not very expensive in terms of performance; expense in all the tests that he does. If you configure it only for the tests that you need to run, you will save most of the download, but you will still have the Modernizr kernel and its parts that you need.

Answer 3

I prefer to use HTML5Shiv with Modernizr and avoid using conditional. This way I have a code cleaner and avoid unnecessary or duplicate things. The point in IE is the same because HTML5SHiv will only be loaded with IE less than 9 using Modernizr or HTML5Shiv directly. But HTML5Shiv is not required for other browsers, so maybe it’s a good idea to use the terms of use