Skip to main content
SlapMyWeb
Slap a site

Performance fix

How to Eliminate Render-Blocking JavaScript

Defer or async non-critical scripts so they stop delaying the page from rendering.

Difficulty
Medium
Impact
High
Time
20 min

Before

<script src="/app.js"></script>  <!-- blocks parsing -->

After

<script src="/app.js" defer></script>
<script src="https://analytics.example/a.js" async></script>
Before and after code for: How to Eliminate Render-Blocking JavaScript

Render-blocking JavaScript is a script in the page head that stops the browser from drawing anything until it has downloaded and run. Fix it by adding defer to your own scripts, async to independent ones such as analytics, and by loading chat widgets and other third parties only after the page is interactive.

Why it matters

A plain <script> in the <head> blocks HTML parsing until it downloads and executes. Adding defer (or async for independent scripts) lets the page render while scripts load.

How to fix it

  1. Defer your own scripts

    Add defer to app scripts so they execute after HTML parsing, in order.

  2. Async independent scripts

    Use async for analytics/widgets that don't depend on anything else.

  3. Delay third parties

    Load chat widgets, ads and tag managers after interaction or on idle so they don't compete with first paint.

The code

Beforehtml
<script src="/app.js"></script>  <!-- blocks parsing -->
Afterhtml
<script src="/app.js" defer></script>
<script src="https://analytics.example/a.js" async></script>

On your platform

WordPress

"Delay JavaScript Execution" in WP Rocket / Perfmatters defers third-party scripts until user interaction.

Next.js

Use next/script with strategy="lazyOnload" or "afterInteractive" for third-party tags.

Sources

Check your site with our free tool

JavaScript Minifier

More fixes

Performance

How to Minify Your CSS

Strip comments and whitespace from stylesheets to cut their size by 30-50%.

Performance

How to Minify Your JavaScript

Compress JS by removing comments, whitespace and shortening names: often a 40-60% reduction.

Performance

How to Lazy-Load Off-Screen Images

Defer images below the fold so they don't compete with the initial render.

Fixed that one.
Now find the rest.

A free audit ranks every issue on your site by the score points it costs, and links each one straight to its guide.

Run a free audit
Free foreverNo signupLive scan progress
How to Eliminate Render-Blocking JavaScript | SlapMyWeb