Menu
Google PageSpeed test is telling me to use async
E.g. change
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
To
<script async src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
Will modernizer still work just fine?
573
Modernizr needs to be placed in the <head> for two reasons:
You can use an async attribute and/or place it at the bottom if neither of these matter to you.
Look at this issue posted in Modernizr
74
Modernizr does not need to be placeed in <head>.
Modernizr will work ultimately fine whenever you include it.
If you make modernizr script async, or include it after some of significant page loading events (DOMContentLoaded, window.onload...)
feature, no-feature classes in document's head) will be delayed.window.Modernizr will also be delayed, together with it's object properties (i.e. Modernizr.propery)In short,
CSS if you use async loading of Modernizr is improper styles (the ones that depends on <html> classes) applied for some timeJS code is, if you use Modernizr global object, you may not use it directly as it may and may not be loaded - you will have to wait for it by some manner. So, no more:
if(Modernizr.cssanimations){
// your feature-dependant code
}
but instead:
if(typeof Modernizr !== "undefined"){
//uitilize Modernizr global object here
} else {
// implement waiting for this object, let's say write short onModernizrLoad() function...
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
