I’m wondering whether there’s a recommended practice considering performance.
1 Like
First of all I’m not a super HTML/front-end optimizer pro. So I usually just stick with what I understand, see what is used by a few other people and go from there.
So what I usually see are async scripts, placed at the bottom of the body.
The reason for this I believe is if the application is being loaded on a browser that doesn’t support async, it ignores this property and loads up the scripts without taking advantage of the async. This means placing them at the end of the body means the page will load, first before loading the scripts, hopefully giving the user something to see.
Of course most people will be on newer browser and the async will kick in, so this advantage might not actually give you a much better user experience, except for those using much older browsers.
You also could argue the performance on newer browsers would be worse if you need to load your JS faster. (like you do in most SPA frameworks)
Regardless, this is how most front-end frameworks work and thus this is what I’d recommend 
1 Like
There isn’t really much difference, async is non blocking. The reason for putting scripts at the end of the document was to stop them blocking rendering: now the defer attribute is almost universally supported (bar very old browsers), that advice doesn’t really apply so much. If they’re using async instead of defer, then as I say, that indicates the script is non-blocking anyway, so not going to make a difference. It’s only really for stuff you don’t really care whether it executes or not anyway mind you (analytics for example), so you’re not likely to use it a huge amount.
2 Likes
Thanks both!! Oj that for google analytics it seems to matter a bit:
But yeah for other async scripts it seems to matter little whether they are on head or footer
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.