This test enables to compare the critical CSS display with the full CSS display to test for differences that could cause a Flash of unstyled content (FOUC). Good quality critical CSS will provide a near perfect match between the critical CSS and full CSS display.

You can quickly open the critical CSS quality test for any url by adding the query string ?critical-css-test=1.

To test the above the fold quality in a responsive test, you can use Chrome or Firefox Dev Tools or alternatively an online responsive test (see Google).

What to test?

The critical CSS display of the above the fold content should match the full CSS display of a page.

The following example shows how subtle problems in the critical CSS can have an impact on the above the fold display.

✗ Invalid ✓ Valid
Invalid Critical CSS Valid Critical CSS

For more information about the above the fold display, read the documentation by Google or see this blog (with video) by two Google engineers.