0

What's better to use?Using the async attribute on the script tag or just putting the script tag at the bottom of the html

Rob
  • 14,746
  • 28
  • 47
  • 65
AcidCoder
  • 1
  • 1
  • 3
    Have you read what async does? – Rob Apr 26 '16 at 04:11
  • yes I know async it Loads the script parallel to the body of the html...Im just asking what's better for the user experience – AcidCoder Apr 26 '16 at 04:16
  • Well, that would be impossible for us to know from what you've told us. – Rob Apr 26 '16 at 04:17
  • Possible duplicate of [Where is the best place to put – Hamms Apr 26 '16 at 04:28

2 Answers2

1

Depends.

If the async attribute is present, then the script will be executed as soon as it is available. So, this is best for scripts that does not immediately interact with the DOM.

If you put the scripts at the bottom of the html, browser won't fetch the scripts until it is done with the parsing of the page.

To fetch parallel, and execute when the page has finished parsing, use the defer attribute.

Note: async and defer are not supported by IE9

Easwar Raju
  • 253
  • 1
  • 4
0

Without async attribute all elements (including <script>) block page rendering before they are loaded. It means that position of <script> tags don't affect page loading speed (but may affect SEO). async attribute hints the browser that it can continue loading without waiting for external resource (script). defer attribute says browser that the script can be processed even later.

Not all external script files can be loaded asynchronously. You have to experiment first what you can load asynchronously and not destroy your page even if Google's PageSpeed Insight advises to "Eliminate render-blocking JavaScript and CSS in above-the-fold content".

Read better description at https://developers.google.com/web/fundamentals/performance/.

Alex Kudryashev
  • 9,120
  • 3
  • 27
  • 36
  • what do you personally use? – AcidCoder Apr 26 '16 at 06:30
  • I set `async="async"` attribute to script blocks which can be loaded asynchronously. It requires testing. Some scripts (for example `jquery.js`) must be synchronous (in my case). Also consider to deliver common scripts from CDN. – Alex Kudryashev Apr 26 '16 at 15:03