Critical CSS Code Quality & Validation

When generating critical CSS via the CriticalCSS.com API, the resulting CSS is compared against the original page to ensure that the CSS is correct. You can see this reflected in the Manage JS/CSS pane on the front-end of any given page.

There are 3 different status/quality icons you'll see:

GOOD: a green checkmark indicates that the original page, and the page with only the critical CSS were identical.

WARN: an orange exclamation icon indicates that the CSS is almost certainly good to use. Most often, the status is not "GOOD" only because an icon font did not render, which is totally normal and okay.

BAD: a red exclamation icon indicates that the page should be checked manually. It can mean that the critical CSS is missing styles, but might also be a result of icons shifting the layout enough to trigger this status. In which case you wouldn't need to do anything.

In all of these cases, you'll see a Test CSS button to the right, which allows you to view a page with all the external CSS suppressed, and only the critical CSS applied. If the page looks normal, then the CSS is good enough to use. If there are significant differences, you can add missing styles manually, or contact the CriticalCSS.com support team for further assistance.