Performance using Modernizr to load HTML5 Shiv
javascript, modernizr, performance
Solution
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.
Problem
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.