Skip to content

Performance · Next.js (App Router)

How to fix render-blocking scripts in Next.js (App Router)

The browser stops parsing your HTML, fetches each one, and executes it before drawing anything. Nothing appears on screen until they all finish, which is the most common reason a fast server still produces a slow first paint. Adding `defer` is usually all it takes.

The fix for Next.js (App Router)

13x detects your framework from the response and hands you this version rather than the generic one — below 50% confidence it hedges and gives you the generic one instead.

Use next/script, which handles loading strategy for you:

tsx code
import Script from "next/script";

// Analytics and tags: after the page is interactive.
<Script src="https://example.com/analytics.js" strategy="afterInteractive" />

// Non-essential widgets: when the browser is idle.
<Script src="https://example.com/chat.js" strategy="lazyOnload" />

// Only when something must run before any rendering.
<Script src="/critical.js" strategy="beforeInteractive" />

A raw <script src> in a layout blocks; next/script does not.

On a different stack? The general version of this fix explains what 13x checks and why it matters, without assuming a framework.

Check your Next.js (App Router) site

113 deterministic checks against your live URL, in about 30 seconds. Framework detected from the response, so every fix comes back in the form your stack actually uses.

No signup. Results in 30 seconds.