Finding Critical CSS

Using the Chrome Coverage tool, you can find the Critical (above-the-fold) CSS that is used on your page(s). 

Why do I need Critical CSS?

By default, CSS files (style sheets) are render-blocking. In other words, the browser won't display the page until all the CSS is loaded, because it needs that CSS to know how to display the content. That is usually bad for performance, but when you defer CSS, it can cause a FOUC. What’s a FOUC??? It’s the dreaded “flash of unstyled content”. When CSS is deferred, your page will render un-styled initially, and then style rules will be applied as the CSS files load.

To avoid this, we inline our Critical CSS. Now, right up front, I want you to know that there are automated tools that can do this for you, and has a pretty solid service that improves upon the free tools.

But whether you're a bit OCD like me, or your theme (like mine) doesn't work well with the automated tools, it helps to know how to find this information yourself.

The Coverage tab

To find the Coverage tab, you just about need super-powers. Or you can watch this handy video that I made just for you!

Critical CSS

As mentioned in the video, you can find all the critical CSS, or above-the-fold CSS by checking your CSS files in the Coverage tab and looking for which CSS rules are blue. If you want to really be thorough, you can then use the Device Toolbar toggle button to do the same for mobile devices.

Once you have all your Critical CSS rules, you can then put those in the Critical CSS setting of SWIS, and make FOUCs a thing of the past!