Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Consider using the defer attribute instead of async for script tags [performance]

See original GitHub issue

🚀 Feature Proposal

It seems like the most performant way of loading scripts is to include them with defer instead of async. At least according to this article

We’d be getting the following: image

Instead of: image

And when it comes to SSR, it would mean the js would only execute in order once the HTML is fully loaded.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:28 (11 by maintainers)

github_iconTop GitHub Comments

gerardmrkcommented, May 14, 2019

I’m doing this for now as a temp workaround till they fix it (doesn’t cover any edge cases):

private _replaceScriptAsyncToDefer = async (scriptTags: string) => {
  if (!scriptTags) {
    return Promise.resolve("");

  return Promise.resolve(scriptTags.replace(/\sasync\s/g, " defer "));

theKasheycommented, Mar 24, 2019

So - I am pretty sure async is a wrong decision.

  • Defer - run scripts, in the right order, after page is fully loaded
  • Async - run a script once it is ready. before or after page is fully loaded
  • React.hydrate - merge with a existing HTML

The only variant, when react can hydrate is defer. In async mode DOM three could be not complete, by any reason, and the result would be just broken. You might wait for DOM-ready, but it would be equal to defer, but less semantic and safe.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Performance impact of async vs defer in 3rd party script tag
1. defer loads the script's text (blocking parsing), but doesn't execute it. Using async defer loads it in parallel to parsing, and then ......
Read more >
Scripts: async, defer - The Modern JavaScript Tutorial
The defer attribute tells the browser not to wait for the script. Instead, the browser will continue to process the HTML, build DOM....
Read more >
The Defer Attribute Explained - Jon D Jones
The issue with async is that the order in which the scripts are run can not be guaranteed.
Read more >
What's the difference between async vs defer attributes
With defer attribute in place, the script file is downloaded in parallel while the HTML document is still parsing. However, even if the...
Read more >
Prefer DEFER Over ASYNC - Web Performance Calendar
ASYNC and DEFER are similar in that they allow scripts to load without blocking the HTML parser which means users see page content...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found