How to defer render-blocking scripts in WordPress

A render-blocking script is JavaScript loaded in the page head without defer or async, forcing the browser to stop building the page until the file downloads and runs. Moving non-critical scripts out of the critical path lets the page paint first and run JavaScript after, which is one of the biggest first-paint wins on mobile.

What causes this?

WordPress plugins enqueue scripts in the head by default out of caution. Analytics, chat widgets, sliders, and old jQuery dependencies stack up there, and every one of them delays the first pixel. On a 3G or weak 4G connection, half a megabyte of blocking JavaScript can hold a blank screen for seconds.

How to check

Run the page through PageSpeed Insights and read the "Eliminate render-blocking resources" entry, or check the HTML source head for script tags without defer or async attributes. The audit lists each blocking script with its size ("620 KB of JS blocking first paint").

How to fix it manually

Deferring a script another script depends on breaks things. Change one at a time and test.

1. List head scripts without defer/async

1. For each, decide

Defer (runs in order after parse, right for most), async (runs whenever ready, right for independent scripts like analytics), or leave (rare, truly critical scripts).

1. Add the attribute via your optimization plugin's "defer JavaScript" option

Or with a small functions.php filter on script_loader_tag for specific handles.

1. Exclude jQuery from deferral first if anything inline depends on it

Then test whether it can be deferred too.

1. Click through interactive elements

Menus, sliders, forms, after each change.

How BoltAudit does it

The audit runs all of the above for you and turns it into one reviewed action.

1Finds it automatically with each script named and sized.

2Preview the exact change. Which handles get defer, which are excluded.

3Automatic backup, then apply in one click.

4Roll back any time if an interaction breaks.

Fix this on your site

Common questions

Defer or async, which one?

Defer preserves execution order and is the safe default. Async is for fully independent scripts.

Will this break my slider or menu?

It can if a dependency loads late. That is why changes preview first and reverse in one click.

What about inline scripts?

Inline code that depends on jQuery needs jQuery not deferred, or the inline code moved. The audit flags these dependencies.

Does this help desktop too?

Yes, but the estimated recovery is biggest on mobile, where connections are slower.