defer vs async: Loading JavaScript the Right Way

“Eliminate render-blocking resources” is one of the most common PageSpeed Insights warnings on WordPress sites. Often the fix is a single attribute on a script tag. Understanding the difference between defer and async lets you apply it safely.

What happens with a normal script#

<head>
  <script src="/slider.js"></script>
</head>

The browser stops parsing HTML, downloads slider.js, executes it, and only then continues. On a slow mobile connection, that can delay everything visible by a second or more.

The three loading modes#

Examples#

<!-- Your site code: depends on the DOM and on each other -->
<script src="/vendor/library.js" defer></script>
<script src="/main.js" defer></script>

<!-- Independent third-party analytics -->
<script src="https://www.googletagmanager.com/gtag/js?id=G-XXXX" async></script>

<!-- ES modules are deferred by default -->
<script type="module" src="/app.js"></script>

Exceptions: when blocking is correct#

A tiny inline script that must run before the page paints — like the one that applies dark mode to avoid a white flash — should stay inline and blocking at the top of the head. Keep such scripts to a few lines.

Beyond defer: delaying third-party scripts#

Even deferred scripts compete for CPU right after load, affecting INP. For non-essential tags (chat widgets, heatmaps, social embeds), load them after the first user interaction or when the browser is idle:

<script>
function loadChat() {
  var s = document.createElement('script');
  s.src = 'https://chat.example.com/widget.js';
  s.async = true;
  document.body.appendChild(s);
}
['scroll', 'pointerdown', 'keydown'].forEach(function (e) {
  addEventListener(e, loadChat, { once: true, passive: true });
});
</script>

See third-party scripts for a full strategy.

In WordPress#

Since WordPress 6.3, themes and plugins can register scripts with a loading strategy:

wp_enqueue_script( 'my-main', get_template_directory_uri() . '/main.js', array(), '1.0', array( 'strategy' => 'defer', 'in_footer' => true ) );

This theme loads all of its scripts with defer. For plugins that don’t, performance plugins (WP Rocket, LiteSpeed Cache, Perfmatters, FlyingPress) can add defer or delay scripts — always test menus, forms, sliders and checkout afterwards, and exclude scripts that break.

Common mistakes#

• Adding async to jQuery and plugins that depend on it — they may run before jQuery and fail.
• Using defer on inline scripts (it only works on external scripts with src).
• Delaying scripts needed for above-the-fold content, causing visible pop-in.
• Moving everything to the footer but still blocking — footer scripts without defer still block the end of parsing.