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
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 !