Verify Critical CSS

← Back to all Easy Critical CSS docs

This guide shows how to confirm that Easy Critical CSS is working correctly on your site. You can use these checks for both Auto mode and Manual mode.

You do not need special tools. Everything below can be done with your browser.

Check using View Page Source

This is the quickest way to confirm that Critical CSS is present.

  1. Open a page on your site.
  2. Right click anywhere on the page and choose View Page Source.
  3. Use your browser’s find feature and search for easy-critical-css.

If Easy Critical CSS is working, you should see something like:

<style id="easy-critical-css-inline-css">

This confirms that Critical CSS is being injected directly into the page.

Screenshot of inline Critical CSS in the page source

You should also see a link to Secondary CSS that looks similar to this:

<link rel="preload" as="style" href=".../easy-critical-css/secondary/...">

This confirms that the remaining CSS is loading in a non blocking way.

Screenshot showing both inline styles and the Secondary CSS file in the page source (the rest of your site’s CSS with unused rules removed)

You may see inline styles, a Secondary CSS file, or both. All of these are valid.

Some plugins and themes add their own inline styles during page load. Easy Critical CSS keeps those styles in place while loading the rest of the CSS from a Secondary CSS file when needed.

On very small pages, there may be little or no Secondary CSS at all. This is normal and does not indicate a problem.

Check using DevTools

DevTools lets you confirm where the CSS is applied.

  1. Open a page on your site.
  2. Right click and choose Inspect.
  3. Go to the Elements tab.
  4. Look inside the <head> section.

You should see:

  • An inline <style> block for Critical CSS
  • A stylesheet link for Secondary CSS that loads after the page starts rendering

This confirms that Critical CSS is applied first and the rest of the CSS loads later.

Screenshot of inline Critical CSS in Chrome’s DevTools

Using Lighthouse or PageSpeed Insights

Lighthouse and PageSpeed Insights can be helpful, but results may vary due to caching. These tools are best used as a secondary confirmation, not the primary way to verify Critical CSS.

If you choose to use PageSpeed Insights, visit https://pagespeed.web.dev/.

When Easy Critical CSS is working correctly, these audits should generally pass:

  • Minify CSS
  • Reduce unused CSS

Keep in mind that PageSpeed Insights may sometimes analyze a cached or outdated version of the page. Because of this, failing these audits does not always mean Easy Critical CSS is not working.

For reliable verification, checking the page source and DevTools is recommended.

What success looks like

  • The page loads normally without flashes or layout shifts
  • Nothing appears broken or visually different from before
  • Critical CSS is present inline in the page source
  • Secondary CSS loads without blocking rendering

If your site looks the same as before but loads faster, that is a good sign. In many cases, the best result is that your site looks exactly the same as before.

← Back to all Easy Critical CSS docs Next step: Troubleshooting