Defer JavaScript

By default a script tag stops HTML parsing. The browser reaches it, downloads the file, executes it, and only then continues building the page. Every script in your head is a pause before anything appears on screen.

The defer attribute changes that. The browser downloads the script alongside parsing and runs it once the document is complete. This feature adds defer to every script WordPress prints through its enqueue system on the front end, apart from jQuery.

jQuery is excluded automatically, because a great many WordPress plugins assume it is already available. wp-admin is never touched, and scripts that already carry defer are left as they are. Scripts marked async are not skipped, so they end up with both attributes, and browsers then treat them as async.

Largest Contentful Paint is the Core Web Vitals metric most sites fail, and render-blocking JavaScript is one of the most common causes. A theme and a handful of plugins can easily queue eight or ten scripts, each one a stop in the parse before a visitor sees anything at all.

Deferring them does not make the files smaller or fewer. It changes when they run, so the browser can paint content first and execute behaviour second. On a typical WordPress site that reordering is worth a meaningful improvement in perceived load time for no change to the code itself.

Vectro filters the script tag output that WordPress generates for enqueued scripts and adds defer to every tag except jQuery’s and tags that already have it. Because it works on the enqueue system, scripts that a theme or plugin hardcodes directly into a template are not covered.

Deferred scripts execute in document order once parsing completes, so relative ordering between deferred scripts is preserved. What changes is their position relative to the parser and to any inline script that is not deferred – which is the usual source of breakage.