Critical CSS

What is Critical CSS?

To make your web pages pretty, you (or your theme developer) uses CSS. These are "style rules" that are applied to various bits of content on your page. The "critical" CSS is the set of rules that apply to the portion of the page that is visible without scrolling (or any other user interaction).

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 (making it asynchronous), 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.

While that might be interesting to see (at first), it's not great for your visitors because it causes "layout shifting"--ever heard of CLS/Cumulative Layout Shift?. Things will move around as the style rules are applied, and this can lead to visitors clicking the wrong thing, getting frustrated, and possibly leaving your site entirely.

So to avoid FOUC and layout shifting, we inline our Critical CSS right in the page, and that way the page can be displayed (correctly) super fast, and then the browser can go download the files needed to display the rest of the page.

How do I find the Critical CSS?

Ah, now we're getting somewhere! While there are some free tools that can do this for individual pages, we recommend criticalcss.com as it integrates directly with SWIS, and it allows you to get page-specific critical CSS with the click of a button. *Make sure to use our links for an exclusive 10% (recurring) discount.

Some of this will only apply when you have a criticalcss.com subscription, but if you want to manually enter your critical CSS, hang in there, we've got some goodies for you too!

To get started, enter your criticalcss.com API key in the SWIS settings (requires SWIS Performance 1.6+). Once you save the settings, you'll see a button in the sidebar to Generate Critical CSS. SWIS will then scan your site and start generating the critical CSS. Once it's complete, it will purge the page cache automatically to start using the critical CSS. Of course, if you use a third-party caching plugin or server-based cache, be sure to clear it when the process is complete.

Manage Critical CSS

You can browse to any page on your site to mange the Critical CSS. Look for the SWIS menu on the admin bar, and click Manage JS/CSS. You'll see the Critical CSS section right at the top. If you're using the Critical CSS API, you should see something like this:

This allows you to regenerate the CSS if needed, edit the CSS, and also use the Test CSS button to see what the page looks like with only the inlined critical CSS (no external CSS will be loaded on the test URL).

SWIS will not generate critical CSS for every web page. For example, it will only generate CSS for a single blog post, and then use that on all blog posts. The same applies to custom post types, and date/category/tag archives. But if you want SWIS to generate page-specific critical CSS, you can do that easily:

If you're not using the Critical CSS API, you'll have the option to add page-specific critical CSS manually (like if you're using one of the online generators linked above):

If you're on a tight budget and/or only have a handful of pages, this allows you to use page-specific CSS.

Have more questions? Let us know!