# 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.
1.  Open your local site in a browser.
2.  Right-click and select **View Page Source** (or `Ctrl+U` / `Cmd+U`).
3.  Search (`Ctrl+F` / `Cmd+F`) for `id="wp-scratch-critical-css"`.
4.  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.
1.  In the **Page Source** or **Elements** tab of DevTools, search for `style.css`.
2.  Look at the `<link>` tag attributes.
    *   **Correct (Deferred):**
        ```html
        <link rel="stylesheet" href=".../style.css?ver=..." media="print" onload="this.media='all'">
        ```
    *   **Incorrect (Blocking):**
        ```html
        <link rel="stylesheet" href=".../style.css?ver=..." media="all">
        ```
3.  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.
1.  Open Chrome DevTools and go to the **Network** tab.
2.  Change the throttling dropdown from "No throttling" to **"Slow 3G"**.
3.  Reload the page.
4.  **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`:

1.  Open `scripts/generate-critical.mjs`.
2.  Add the `include` array to the configuration object. You can use strings or Regular Expressions.

```javascript
    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',
        ],
    });
```
3.  Run `npm run build` again to regenerate the file.