How to Fix Render-Blocking Resources in Next.js

What Are Render-Blocking Resources?

Render-blocking resources are CSS and JavaScript files that prevent the browser from displaying the page until they're fully loaded. They're one of the most common Lighthouse warnings.

How Next.js Handles This

Next.js automatically optimizes most resources:

- **Code splitting** — only loads JS needed for the current page

- **Automatic CSS chunking** — splits CSS per page

- **Script component** — controls loading priority

But you can still have issues with:

- Third-party scripts (analytics, chat widgets)

- Custom fonts without font-display

- Large CSS libraries loaded globally

Fix 1: Use Next.js Script Component

import Script from 'next/script';

// BAD — blocks rendering

// GOOD — loads after page is interactive

<Script

src="https://analytics.example.com/script.js"

strategy="afterInteractive"

// GOOD — loads when browser is idle

<Script

src="https://chat-widget.example.com/widget.js"

strategy="lazyOnload"

Script Strategies:

- **beforeInteractive** — loads before hydration (rarely needed)

- **afterInteractive** — loads immediately after hydration (default)

- **lazyOnload** — loads during idle time (best for non-critical)

Fix 2: Optimize Fonts

// next.config.js

module.exports = {

optimizeFonts: true, // default in Next.js 13+

};

// Use next/font (auto-optimizes, no layout shift)

import { Inter } from 'next/font/google';

const inter = Inter({ subsets: ['latin'] });

Fix 3: Dynamic Imports

import dynamic from 'next/dynamic';

// Heavy component loaded only when needed

const HeavyChart = dynamic(() => import('./Chart'), {

  loading: () => <div>Loading chart...</div>,

ssr: false, // skip server-side render

});

Fix 4: CSS Optimization

// Move component-specific CSS to CSS Modules

// styles.module.css

.card { ... }

// Component

import styles from './styles.module.css';

Fix 5: Preconnect to External Domains

// app/layout.tsx

<head>

  <link rel="preconnect" href="https://fonts.googleapis.com" />

  <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />

</head>

Measuring Impact

Use [SEO Snapshot](/) to check:

- Total render-blocking scripts count

- Inline JavaScript size

- Font-display usage

- Preconnect/DNS-prefetch hints

FAQ

**Q: Does Next.js automatically fix render-blocking?**

A: Mostly yes, for your own code. Third-party scripts need manual optimization.

**Q: What about CSS-in-JS libraries?**

A: Tailwind CSS, CSS Modules, and styled-components are all fine with Next.js. Avoid importing large CSS files globally.

Check your site's SEO score for free

Analyze your site