Before the browser can render a page it has to build the DOM tree by parsing the HTML markup. During this process, whenever the parser encounters a script it has to stop and execute it before it can continue parsing the HTML. In the case of an external script the parser is also forced to wait for the resource to download, which may incur one or more network roundtrips and delay the time to first render of the page.
<script> tags from blocking rendering by placing them directly before the closing
<script defer src="…">, which delays script execution until the DOM is ready or 2)
<script async src="…">, which will execute the script as soon as it has loaded. Note that
defer scripts execute in the order they appear on the page like inline scripts. However,
async scripts execute whenever they have downloaded so their execution order can change. This difference is important when scripts have dependencies.
More articles in this series
➜ This article is from our comprehensive Page Speed Best Practices guide.
➜ Next article in this series: Redirects
➜ Previous article in this series: CSS