Critical CSS Verification Guide

To verify that your Critical CSS setup is functioning correctly, follow these steps using your browser's Developer Tools and by inspecting the page source.

1. Verify File Generation

First, ensure the critical CSS file was actually created during your build process.

Run npm run build in your terminal.
Check your theme root folder (wp-content/themes/wp-scratch/).
Confirm that a file named critical.css exists and contains minified CSS.

2. Verify Inlining in `<head>`

This confirms that the PHP function wp_scratch_inline_critical_css is finding the file and printing it.

Open your local site in a browser.
Right-click and select View Page Source (or Ctrl+U / Cmd+U).
Search (Ctrl+F / Cmd+F) for id="wp-scratch-critical-css".
You should see a <style> block containing CSS rules right near the top of the <head>.

3. Verify Main Stylesheet Deferral

This confirms that the wp_scratch_defer_styles filter is modifying the main stylesheet link to prevent it from blocking the initial render.

In the Page Source or Elements tab of DevTools, search for style.css.

Look at the <link> tag attributes.

Correct (Deferred):

<link rel="stylesheet" href=".../style.css?ver=..." media="print" onload="this.media='all'">

Incorrect (Blocking):

<link rel="stylesheet" href=".../style.css?ver=..." media="all">

You should also see a <noscript> tag immediately following it, providing a fallback for users with JavaScript disabled.

4. Visual Verification (Flash of Unstyled Content)

If Critical CSS is working, the page should look "styled" immediately, even if you simulate a slow network connection.

Open Chrome DevTools and go to the Network tab.
Change the throttling dropdown from "No throttling" to "Slow 3G".
Reload the page.
Result: You should see the layout, colors, and fonts (if preloaded) appear almost instantly. You should not see a flash of unstyled HTML (plain Times New Roman text on a white background) before the styles snap in.

5. Excluding Selectors from Removal (Force Include)

If you have elements that are hidden initially but appear "above the fold" via JavaScript (e.g., a mobile menu or a cookie banner), the critical CSS generator might miss them because it only looks at the initial HTML snapshot.

To force specific CSS selectors to be included in critical.css:

Open scripts/generate-critical.mjs.
Add the include array to the configuration object. You can use strings or Regular Expressions.

    await generate({
        // ... existing config ...

        // Force include specific selectors
        include: [
            /\.is-visible/,       // Regex: Matches any class containing .is-visible
            '.cookie-banner',     // String: Exact match
            '.mobile-menu-open',
        ],
    });

Run npm run build again to regenerate the file.

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

Docs Login