Deferring JavaScript for Faster Page Loads

JavaScript is the most expensive resource on the web. Unlike images and CSS, which can be downloaded and processed in parallel, JavaScript blocks the browser’s main thread. While a script is executing, nothing else can happen — no rendering, no interaction, no scrolling. Deferring non-critical JavaScript is one of the highest-impact optimizations you can make.

The Problem with Synchronous JavaScript

By default, when the browser encounters a <script> tag in the HTML, it stops everything, downloads the script, parses it, and executes it — before continuing to parse the rest of the page. If the script is large or the network is slow, the visitor stares at a blank screen while the browser waits.

WordPress sites are particularly prone to this problem. A typical site loads JavaScript from the theme, the block editor, multiple plugins, analytics services, chat widgets, and ad networks. Each one is a potential bottleneck.

Defer and Async: The Two Solutions

HTML provides two attributes that change how scripts load: defer and async. Both prevent the script from blocking the HTML parser, but they differ in execution timing.

• defer — The script downloads in the background while the page continues to render. It executes only after the HTML is fully parsed, and multiple deferred scripts execute in the order they appear in the document. Use defer for scripts that depend on the DOM being ready or on other scripts.
• async — The script downloads in the background and executes as soon as it is ready, regardless of whether the HTML is fully parsed. Async scripts can execute in any order. Use async for independent scripts like analytics and ads.

Caching Out can add defer attributes to your scripts — one toggle, with a per-script exclusion list for anything that must load synchronously. For example, A/B testing scripts that need to run before the page renders to prevent flickering.

Measuring the Impact

The metric most affected by JavaScript optimization is Interaction to Next Paint (INP). Every long-running script delays the browser’s ability to respond to user input. After deferring non-critical JavaScript, run a PageSpeed Insights test and compare your INP score. A noticeable reduction is common on sites that were loading multiple synchronous scripts.

Further reading: Render-blocking CSS, explained for the CSS half of the render-blocking problem.