Updated April 2026

Eliminate Render-Blocking Resources — Nginx and Cloudflare Fix

Quick Answer

Add defer to non-critical scripts: <script src="app.js" defer></script>. Inline critical CSS and lazy-load the rest. These are code changes — Nginx can help with HTTP/2 and preload headers but cannot fix render-blocking on its own.

"Eliminate render-blocking resources" is one of the most common PageSpeed warnings. It means scripts or stylesheets in your HTML are blocking the browser from rendering the page. The fixes split between code changes and server config.

Get your full PageSpeed fix → SpeedFixer

What causes render-blocking

Any <script> or <link rel="stylesheet"> in the <head> without defer, async, or media attributes blocks HTML parsing until fully downloaded and executed.

Fix 1 — Defer non-critical scripts (code change)

<!-- Render-blocking -->
<script src="/app.js"></script>

<!-- Non-blocking: defer executes after HTML parsed -->
<script src="/app.js" defer></script>

<!-- Non-blocking: async executes as soon as downloaded -->
<script src="/analytics.js" async></script>

Fix 2 — Preload critical resources via Nginx

server {
    location / {
        # Preload critical CSS and fonts
        add_header Link "</critical.css>; rel=preload; as=style" always;
        add_header Link "</fonts/inter.woff2>; rel=preload; as=font; crossorigin" always;
    }
}

Fix 3 — Enable HTTP/2 in Nginx

listen 443 ssl http2;
# HTTP/2 multiplexes — multiple resources in parallel
# Reduces impact of multiple render-blocking resources

Fix 4 — Cloudflare Rocket Loader

# Dashboard → Speed → Optimization → Rocket Loader
# Toggle: ON
# Cloudflare automatically defers JavaScript loading
# Test thoroughly — Rocket Loader can break some scripts

Fix 5 — Minify JS and CSS

# Cloudflare
# Dashboard → Speed → Optimization → Auto Minify
# Enable: JavaScript, CSS, HTML

# Nginx with minification (requires lua or sub_filter):
# Better handled at build time with webpack/vite

What Nginx cannot fix

Server config cannot fix render-blocking caused by how your HTML is structured. These require code changes in your templates:

Moving scripts to end of body or adding defer
Inlining critical CSS
Splitting CSS bundles
Dynamic imports (import()) for non-critical JS

Get stack-specific fixes from your live PSI audit →