Performance using Modernizr to load HTML5 Shiv

Question

My site uses Modernizr and requires the HTML5Shiv with PrintShiv. Is there any performance benefit in NOT using Modernizr to load these shivs, and instead load them via an IE conditional? Obviously it is cleaner to use Modernizr, but I am focused on performance.

Answer 1

I was curious myself so I setup some test pages to see.

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

For the IE browsers that require the shivs the load/performance is equal between using modernizr and just the html5shiv. The gains in performance for using the html5shiv only are seen on modern IE browsers (IE9 and IE10)

Test pages:

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

Test reports 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 those tests, fully loaded, we are saving 1.677 seconds using html5shiv-printshiv.js

Modernizr Update: Read the Docs on Performance Considerations being drafted in an issue ticket on the Modernizr's GitHub project for more details.

Answer 2

Recent versions of Modernizr can be customised to include only the functionality you need. If you're worried about performance, this might be the way to go.

The Modernizr core is not hugely expensive in terms of performance; the expense is in all the tests that it does. If you customise it down to only do the tests that you need to do, you will save most of the load, but you'll still have the Modernizr core and the parts of it that you need.