Render-Blocking

What is Render-Blocking?

Render-blocking resources are files that prevent the browser from displaying page content until they've finished loading. By default, CSS and JavaScript in your page's head section must be fully downloaded and processed before any content appears.

Users stare at a blank screen while these resources load, even if the HTML content is ready.

Why Render-Blocking Matters

Delays First Paint

Nothing appears on screen until render-blocking resources complete. Large files mean long waits.

Poor User Experience

Users perceive blank screens as broken sites, especially on slower connections.

Core Web Vitals Impact

Render-blocking resources directly harm FCP and LCP scores.

Mobile Performance

Mobile networks with higher latency make render-blocking particularly painful.

Common Render-Blocking Resources

CSS Stylesheets

All CSS is render-blocking by default. The browser waits to avoid showing unstyled content.

JavaScript in Head

Scripts in the document head block rendering unless marked as async or defer.

Web Fonts

Font files can block text rendering, depending on how they're loaded.

Identifying Render-Blocking Resources

Google PageSpeed Insights and Lighthouse specifically flag render-blocking resources with estimated time savings. Browser DevTools also show blocking behaviour in network waterfalls.

Eliminating Render-Blocking

For CSS

• Inline critical CSS – Embed styles needed for above-fold content directly in HTML
• Load non-critical CSS asynchronously – Use techniques to defer non-essential styles
• Remove unused CSS – Less CSS means faster loading

For JavaScript

• Use defer attribute – Scripts load in parallel and execute after HTML parsing
• Use async attribute – Scripts load in parallel and execute when ready
• Move scripts to body end – Place non-critical scripts at the bottom of the page

For Fonts

• Use font-display: swap – Show fallback fonts immediately while custom fonts load
• Preload critical fonts – Tell the browser to prioritise key font files
• Limit font weights/styles – Each variant is a separate file

The Trade-Off

Some render-blocking is unavoidable – you need basic styles before showing content. The goal is minimising blocking to essential resources only, loading everything else asynchronously.