Prefer <script defer> over <script async>

[Rowno]

Prefer <script defer> over <script async> so that quickly downloaded scripts don't block the initial render. This also ensures that the page script is always executed before the error script since async scripts can execute in any order.

I also moved app.js to the top of the script lists since it has to be downloaded/executed before anything else can actually initialise (the browser uses the <link rel='preload'> order to infer the download priority).

See: https://calendar.perfplanet.com/2016/prefer-defer-over-async/

[arunoda]

quickly downloaded scripts don't block the initial render.

You've a valid point on this. But this is not the solution.
BTW: We need error and current page's JS stuff to run the app. So, it'll wait.

We can't use defer since it always blocks the HTML rendering.
(We had use defer previously)

Since we load all the scripts at the end, this won't be an issue.
And the fix for this issue should is check page load event in app.js and run it once the DOMContentLoaded event runs.

I'd like to have a PR for that.
Here's we can do it: https://github.com/zeit/next.js/blob/master/client/index.js#L52

[Rowno]

When you use async the browser will still block the HTML parser to compile and partially execute the scripts as soon as they're downloaded. As the article you linked says, defer won't block HTML parser:

async downloads the file during HTML parsing and will pause the HTML parser to execute it when it has finished downloading.

defer downloads the file during HTML parsing and will only execute it after the parser has completed.

[Rowno]

Also consider the case where the user already has the JavaScript files cached. async will cause them to execute immediately, blocking the initial render, whereas defer will not.

[arunoda]

@Rowno we tested many cases.
Check this PR for more info: #1436

[Rowno]

Ok, thanks.