Eliminating Render-Blocking Resources in WordPress

One of the most common "Red" flags in PageSpeed Insights is "Eliminate render-blocking resources." This happens when a browser pauses the rendering of your page to download and parse a CSS or JavaScript file.

To hit 100/100 in 2026, the browser needs to paint the content first and load the interactivity second.

1. Understanding the Critical Path

When a user visits your site, the browser reads the HTML from top to bottom. If it hits a <link rel="stylesheet"> or <script src="..."> in the <head>, it stops everything to fetch that file.

Render-Blocking CSS: The user sees a blank white screen until the CSS downloads.
Render-Blocking JS: The page structure pauses until the script runs.

2. Solving CSS Blocking (Critical CSS)

You cannot just "defer" all CSS, or the page will look broken for a split second (Flash of Unstyled Content). The solution is Critical CSS.

The Strategy

Identify Critical CSS: Extract only the CSS needed to style the "Above the Fold" content (header, hero section, navigation).
Inline It: Paste that CSS directly into the HTML <head> in <style> tags.
Defer the Rest: Load the main style.css file asynchronously so it downloads in the background.

Tools:

WP Rocket / Perfmatters: These plugins automatically generate Critical CSS for each page type.
Manual: Use a generator tool to extract the CSS and hook it into wp_head.

3. Solving JavaScript Blocking

Unlike CSS, most JavaScript is not needed immediately. It can wait until the footer.

Defer vs. Async

Modern browsers support two attributes to unblock JS:

defer (Recommended): The script downloads in the background but executes after the HTML is fully parsed. It respects the order of scripts.
async: The script downloads in the background and executes as soon as it finishes, pausing the HTML parser. This can break dependencies (e.g., jQuery plugins).

Implementation in WordPress

If you are enqueueing scripts in functions.php, you can add the defer strategy:

function my_defer_scripts( $tag, $handle, $src ) {
    // The list of scripts to defer
    $defer_scripts = array( 'my-theme-script', 'contact-form-7' );

    if ( in_array( $handle, $defer_scripts ) ) {
        return '<script src="' . $src . '" defer="defer"></script>';
    }
    return $tag;
}
add_filter( 'script_loader_tag', 'my_defer_scripts', 10, 3 );

4. Removing Unused CSS/JS

Many plugins load their assets on every page, even if the plugin isn't used there (e.g., a Contact Form script loading on the About page).

Asset Cleanup / Perfmatters: These tools allow you to "unload" specific CSS/JS files on specific pages, reducing the total payload size.

5. Optimizing Web Fonts

Fonts often block rendering or cause layout shifts (FOUT/FOIT). To fix "Ensure text remains visible during webfont load":

Use `font-display: swap`

Add this property to your @font-face declarations. It tells the browser to use a fallback font immediately and swap in the custom font once it loads.

@font-face {
    font-family: 'MyCustomFont';
    src: url('fonts/myfont.woff2') format('woff2');
    font-display: swap;
}

Created: March 17, 2026 • Last Modified: February 27, 2026

Docs Login