How to Eliminate Render-Blocking Resources
What is this?
Render-blocking resources are CSS files and synchronous JavaScript files in the <head> that prevent the browser from displaying any content until they are fully downloaded and processed. This delays the First Contentful Paint (FCP).
Why it matters
- Performance: Directly impacts FCP and Largest Contentful Paint (LCP) metrics
- User experience: Users see a blank page while waiting for resources to load
- SEO: Core Web Vitals are a Google ranking factor
How to fix it
Defer non-critical JavaScript
<!-- Before (blocking) -->
<script src="/js/analytics.js"></script>
<!-- After (non-blocking) -->
<script src="/js/analytics.js" defer></script>
Use defer for scripts that do not need to run before first paint. Use async for scripts that are independent (like analytics).
Inline critical CSS
Extract the CSS needed for above-the-fold content and inline it:
<head>
<!-- Critical CSS inlined -->
<style>
body { margin: 0; font-family: sans-serif; }
.hero { padding: 2rem; background: #f5f5f5; }
</style>
<!-- Full stylesheet loaded asynchronously -->
<link rel="preload" href="/css/styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/css/styles.css"></noscript>
</head>
Use media queries for conditional CSS
<!-- Only blocks rendering for matching media -->
<link rel="stylesheet" href="/css/print.css" media="print">
<link rel="stylesheet" href="/css/large.css" media="(min-width: 1024px)">
WordPress
- Install a caching plugin like WP Rocket or Autoptimize
- Enable Defer JavaScript and Optimize CSS Delivery options
Common mistakes
- Deferring scripts that manipulate the DOM before
DOMContentLoaded. These scripts must remain synchronous or usedefer(which preserves order). - Inlining too much CSS. Only inline what is needed for the first visible viewport.
- Using
asyncwhen script execution order matters.asyncscripts run in download order, not document order.
Test your fix
After optimizing your resources, audit your site on BeaverCheck to see the impact on your performance score.