DEV Community

loading...

The “script async” attribute may not be the best option for non-critical scripts

Šime Vidas
・1 min read

Adding either the async or defer attribute to a <script> element results in the external script being fetched in parallel to parsing. The difference between these two attributes only manifests once the script has finished loading: A script with the async attribute interrupts the parser while a script with the defer attribute waits for the page to finish parsing.

Async scripts interrupt the parser, while deferred scripts wait for the page to finish parsing

A web page may not want to interrupt the parser for scripts that generate non-critical content (e.g., ads). The article “JavaScript Loading Priorities in Chrome” suggests using <script> for critical scripts and <script defer> for non-critical scripts.

Be careful when considering <script async>. Today it is often used to indicate non-critical scripts, but is inconsistent in being loaded at low priority and executed at high priority.


This content was originally published on https://webplatform.news.

Discussion (0)