I added this to the head section of the html document and checked with Chrome when it is loaded. Chrome says it is loaded before page load (the network tab of chrome devtools indicates the end of the page load with a vertical red line and the above script is loaded before that.

Why is that? Shouldn't adding async defer as recommended by google defer loading of the script after page load?

Answers 1

The page is only fully loaded when all linked resources (including <script async defer) have loaded. This is when the onload event fires.

However, the DOMContentLoaded event is likely to fire before this - which will probably be before the async defer scripts have loaded. (I say "probably" - if the browser is able to determine that it can load the script in another thread at the same time without slowing things down then I guess it probably will; but with no guarantee.)