5 ms·
If your scripts are going to be downloaded asynchronously because you've used "async" or "defer", you should place them before any blocking resources, like CSS
by mike-cardwell 12y ago
If your scripts are going to be downloaded asynchronously because you've used "async" or "defer", you should place them before any blocking resources, like CSS for example, otherwise you're sat waiting for that blocking resource to download before you even start downloading the scripts.
This is why my script tags end up in the head now, because I want to place them before the CSS tags, and I want to fetch the CSS before the body starts being displayed.
I tend to use defer rather than async because I want the scripts to execute in the order I add them to the page, and only once the body has been fully constructed.
That said, if you have to support old browsers, make sure you research which ones support async/defer, and which ones have buggy implementations. caniuse.com is your friend.
[*] If I'm wrong with any of the above, please correct me. Just checked your profile and you seem well qualified to contradict me.
- paulirish 12y agoYou don't have to place things in order to addressing blocking behavior better. Browsers have already tackled that optimization for you. https://groups.google.com/a/chromium.org/forum/#!topic/loading-dev/40mLlHGqRwc https://groups.google.com/a/chromium.org/forum/#!topic/loadi...