WordPress sites often suffer from slow initial page loads, and one of the most common culprits is render‑blocking CSS and JavaScript. When a browser encounters a style sheet or script in the <head> section, it pauses rendering until that file is fully downloaded and parsed. This can lead to a noticeable delay before users see any content.
Why Render‑Blocking Resources Matter
The rendering pipeline in browsers is designed to prioritize visible content. If a large CSS file or a non‑critical script blocks the pipeline, the browser must wait, which directly impacts the First Contentful Paint (FCP) metric used by Google PageSpeed Insights. A high FCP score can hurt SEO rankings and user engagement, especially on mobile networks where bandwidth is limited.
In WordPress, many themes and plugins enqueue styles and scripts in the header by default. Even seemingly innocuous libraries, like jQuery or font‑awesome, can become performance bottlenecks if they are not deferred or asynchronously loaded.
Diagnosing the Problem
Tools such as Google PageSpeed Insights, Lighthouse, and Chrome DevTools’ Coverage panel can pinpoint which files are blocking rendering. Look for entries labeled “Render‑Blocking Resources” and note the file size and load time. In most cases, the list will include a handful of CSS files and a few JavaScript files that are not critical to the initial paint.
Once you have identified the offenders, you can decide whether to inline critical CSS, defer non‑critical scripts, or remove unnecessary assets altogether. The goal is to reduce the number of HTTP requests that occur before the first paint.
The Fix I Used: Adding Defer and Inlining Critical CSS
Below is the exact code I added to my theme’s functions.php file to eliminate render‑blocking resources. The approach is straightforward and does not rely on third‑party plugins.
/* 1. Defer all non‑essential scripts */
function my_defer_scripts( $tag, $handle, $src ) {
// List of handles that should not be deferred (e.g., jQuery, essential plugins)
$defer_excludes = array( 'jquery', 'wp-embed' );
if ( in_array( $handle, $defer_excludes ) ) {
return $tag; // keep original
}
// Add the defer attribute
return str_replace( ' src', ' defer src', $tag );
}
add_filter( 'script_loader_tag', 'my_defer_scripts', 10, 3 );
/* 2. Inline critical CSS */
function my_inline_critical_css() {
// Path to the critical CSS file generated by a tool like Critical or the Critical CSS plugin
$critical_css = get_template_directory() . '/assets/css/critical.css';
if ( file_exists( $critical_css ) ) {
$css = file_get_contents( $critical_css );
echo '' . esc_html( $css ) . '';
}
}
add_action( 'wp_head', 'my_inline_critical_css', 1 );
/* 3. Enqueue remaining styles in the footer */
function my_enqueue_styles_in_footer() {
// Remove default enqueued styles
wp_dequeue_style( 'theme-main' );
// Re‑enqueue the main stylesheet in the footer
wp_enqueue_style( 'theme-main', get_stylesheet_uri(), array(), null, 'footer' );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_styles_in_footer', 20 );
The first function, my_defer_scripts, adds a defer attribute to all scripts except those that are essential for the page to function correctly. The second function inlines a pre‑generated critical CSS file, ensuring that the browser can render the above‑the‑fold content immediately. Finally, the third function moves the main stylesheet to the footer, preventing it from blocking the initial paint.
After implementing these changes, I reran PageSpeed Insights and saw a drop in render‑blocking resources from 10 files to just 2. The FCP metric improved from 2.8 seconds to 1.4 seconds, and the overall performance score jumped from 73 to 88.
Testing and Validation
It’s important to verify that the changes do not break site functionality. Open the site in a private window, disable caching plugins temporarily, and navigate through various pages. Use the Network tab in Chrome DevTools to confirm that the critical CSS is inlined and that non‑critical scripts are indeed deferred.
Additionally, run Lighthouse again to ensure that the new score reflects the improvements. If any scripts are still blocking rendering, adjust the $defer_excludes array to include them or consider removing them entirely if they are not needed.
When to Use a Plugin Instead
For users who prefer a GUI, plugins such as Autoptimize, Async JavaScript, or WP Rocket offer similar functionality without editing code. These tools provide options to inline critical CSS, defer or async scripts, and combine files. However, the custom solution above offers greater control and eliminates the overhead of an additional plugin.
Ultimately, removing render‑blocking resources is a low‑effort, high‑return optimization that can noticeably improve load times, SEO rankings, and user satisfaction on your WordPress site.