This post is going to take a look at what critical CSS is, why it's important on your website, and how you can use it to speed up the perceived loading time of your pages. This is one of the core principles of any fast website, so understanding the terminology and theory behind critical CSS will result in a faster loading website.

We're also going to be taking a look at a couple tools that allow you to automatically identify critical CSS, as well as generate critical CSS on WordPress.

What is critical CSS?

Critical CSS is a fairly easy concept to understand. It refers to the mandatory code needed to load styling for a web page when a browser renders it.

• Critical: The bare minimum amount of CSS that is required to apply styling to the initially loaded viewport of the page.
• CSS: CSS is code that applies styling to various HTML elements on your website. If CSS is not applied, or of the HTML is loaded before the CSS, your website will look broken until the styling is applied.

Take a look at this example below, comparing a page with no CSS loaded, to a page with all CSS loaded.

As you can see, one page has no styling . All of the content is still there, but no font, background images, or CSS grid is applied. The page looks completely broken. The second page has all of the CSS styling needed to make the initial viewport look pretty. Here, the font, structure, and background images are applied because CSS is loaded.

Normally, if you're trying to style a website all of this CSS code is contained in one file known as the “stylesheet”. when the file loads, the styling is applied to the HTML. This process is normally good, but comes with major downsides.

The connection between critical CSS and render blocking resources?

First, CSS stylesheets are render blocking. That means that they take priority over most other elements in the website, so the page won't load until the CSS stylesheet does. In some cases, this applies to the text and images , resulting in a slow loading, broken looking website.

The last thing you, as a website visitor would want, would be sitting in front of a blank white screen for seconds on end.

Second, because CSS stylesheets are render blocking, and these are a major way you can fail the render blocking resources audit which will trigger the message “Eliminate render blocking resources”.

The way to fix this is by serving critical CSS first, loading the page, and then loading the entire stylesheet. The critical CSS only needs to apply to the initial part of the screen that loads. This is also known as above the fold content (meaning it's everything that loads initially period to view everything else, the user would need to scroll down).

The process of using Critical CSS is very simple, as we discussed above. The CSS that is required to load the styling for the initial viewport is loaded in line, while the rest of the external stylesheet is loaded asynchronously later in the rendering process. That means that the visitor is instantly greeted with styled content, and the rest of the content (which your visitor would need to scroll to look at) is styled a bit later. And, keep in mind that we're talking in matters of seconds, so styling content (that needs to be scrolled to view) later isn't a big deal.

How do I find critical CSS?

Basically, it's the bare minimum number of CSS styling classes and rules needed to style content in the initial viewport. However, your visitor could be viewing your website from any number of devices and screen sizes. That means that critical CSS is device specific.

If you want to manually identify critical CSS, You would need to run through the document object model, identify all elements that loaded above the fold, identify all CSS that applied to those elements, and then inline that CSS.

Very difficult, confusing, and impossible on a WordPress website that's using a premade theme or page builder solution.

On most modern content management platforms, there are caching and optimization solutions that will do this automatically for you. This is especially helpful seeing as critical CSS changes depending on the screen size.

If you're not on a CMS like this, you can also use online tools such as Critical Path CSS Generator. These are definitely more legacy but have their place for completely custom websites. It's also interesting to run your website through it to identify the critical CSS (even if you're going to have this automatically resolved for you).

How do I optimize critical CSS on WordPress?

There are a number of routes that you can go when it comes to critical CSS and WordPress. Many caching solutions out there also include optimization tools that allow you to specifically address the loading of critical CSS. These tools automatically identify what styling is necessary for the initial viewport of each web page and apply the critical CSS when the user is loading the page.

Our favorite tool to optimize critical CSS on WordPress is called WP rocket. This is a premium caching solution, and instead of taking days to analyze the Dom and apply critical CSS, you can do this with the activation Of a single feature.

Once WP rocket is installed on your website, navigate to the file optimization tab, Scroll to the CSS files section, and check off “optimize CSS delivery”.

This automatically loads critical CSS on your WordPress pages, while asynchronously loading the external stylesheet (which can also be merged and minified), for a much faster page loading time. Also, if you have addressed the loading of JavaScript, you can easily eliminate render blocking resources by using this method as well.

Keep in mind, that you need to use caching and critical CSS in tandem, or else inlining the styles could hurt more than it helps.

WP rocket is our favorite tool because of the simplicity it offers. This is just one of the dozens of optimization features that it comes with, so we definitely recommend checking it out if you're looking to speed up your WordPress website.

Conclusion

This article should have introduced what critical CSS is, why using critical CSS on your website is important, and how to automatically apply this to your WordPress website. Getting this aspect of speed optimization right is important because it's one of the most impactful things that you can do which positively benefits your page speed loading time.

If you have any questions about critical CSS, WordPress optimization, or websites in general, reach out in the comment section below.