Defer JS loading - insert to Head or Body

Question

I wanted to know what is the most recommended way in terms of optimization, caching and page load speed. Should I dynamically insert the JS files in the BODY or HEAD of my website document when using Defer loading?

Answer 1

If you are using DEFER, it does not matter whether you put the script tag in the HEAD or BODY as far as when the script will run, or cache. Either way, it will run after the page is finished parsing, and will cache according to the server headers sent with the javascript file.

You may still want to put the script tags at the end of the body to optimize for the case where an older browser ignores the DEFER attribute.

Alternatively, you may want to put the script tags in the HEAD to get the javascript files earlier in the fetching order (before images, audio, or video files specified in the body, for example).