Defer Parsing of JavaScript: A Complete Guide

Defer parsing of JavaScript means telling the browser to download a script in the background without blocking the HTML parser. Normally, when the browser encounters a <script> tag, it stops building the page, fetches the file, executes it, and only then continues. This is called parser-blocking.

By adding the defer attribute, the browser downloads the script in parallel and executes it after the HTML is fully parsed. The async attribute downloads in parallel but executes as soon as it’s ready, which can still interrupt parsing.

• defer: Guarantees execution order and no parser blocking.
• async: Executes when ready, order not guaranteed.
• Neither: Blocks parsing entirely.

Using defer or async is one of the easiest wins for page speed.

Adding defer or async is as simple as adding an attribute to your <script> tag. For example, change:

<script src="app.js"></script>

to:

<script src="app.js" defer></script>

or

<script src="app.js" async></script>

• Use defer for scripts that depend on each other or the DOM.
• Use async for independent scripts like analytics.
• Never use both on the same tag.

Most content management systems and frameworks allow you to add these attributes via plugins or theme settings.

Not all scripts should be treated equally. Prioritize non-critical JavaScript that isn’t needed for the initial render. Common candidates include:

• Analytics and tracking scripts (e.g., Google Analytics) – use async.
• Advertising and social media widgets – use async.
• Comment systems and chat widgets – use defer or async.
• Third-party libraries that aren’t essential for above-the-fold content – use defer.

However, critical scripts that power your main functionality (e.g., frameworks like React) might need to load early. For those, consider module preload or inline critical JS instead. Always test after changes.