Search code examples
javascriptperformanceasynchronousmodernizrhtml5boilerplate

Modernizr.load and performance (cache) for conditionally loaded async resources


I read about a dozen posts on here, this one seemed closest but didn't quite clear it up for me.

I am building on HTML5 Boilerplate, albeit a custom Modernizr build. I am planning on using the yepnope/modernizr.load functionality for conditional loading.

The .htaccess in H5BP removes Etags and adds expires headers (I guess expires headers are required for Modernizr.load). It also set expirations of "access plus X"

How does this work in relation making the most of cache to 'speed up' the browsing experience. Will every resource who's conditions are met load on every page or will things which are cached be skipped?

What if just one of the components (one of the resources I am loading) is changed yet my version of Modernizr isn't?

After posting I realized this may more suited for the webmasters forum (there's no actual code in the question...) but I guess I am unsure if there will be an answer that involves code so for now, I'll leave it realizing perhaps it should be migrated. Sorry, this level of coding and configuration is new to me.

Thanks


Solution

  • Each resources is cached independently. So, if you load a javascript file named foo.js, this file will be cached for one year: https://github.com/h5bp/html5-boilerplate/blob/master/.htaccess#L245

    If you change your modernizr script to a new version, this won't change the cache end date of foo.js which will remain untouched.

    In order to bust the cache, you'll need to change the file name (e.g.: foo-v1234123.js), the path or you could add a query string (foo.js?v=1). If you make change to foo.js then just increase this version number by one to force the browser to redownload the file and recache it.

    If you're working on a simple website and no big project, using a query string a doing this manually may be the easier solution. Or else, I'd suggest to hooks versions number via git or something similar - but this would need to be automated for your sanity.

    Hope this help !