Critical CSS is the process of taking the bare minimum CSS you need to display the first part of a web page, then applying it inline so it can load faster.
This is why it’s flagged in page speed diagnostic tools. According to Google, If you’re not loading 90% of the content on your site in 100 ms or less, there’s nothing for users to see and it creates a poor user experience.
What is Critical CSS in Plain English
To understand what critical CSS is, it’s essential to first know why it’s needed.
Why Critical CSS is Necessary
Critical CSS has to do with CSS. You can use CSS to style the various elements of your WordPress site including its design. When you load that CSS to a page from an external file, the file itself is called a CSS stylesheet.
Loading a CSS stylesheet is typically how you style a WordPress website.
When you see these error messages, it means that your site isn’t loading as quickly as it could because you’re trying to load a CSS stylesheet and it’s making your WordPress site load slowly.
This occurs because CSS stylesheets are a priority to load when a user tries to visit a page. Before the rest of the page can be loaded and displayed, the CSS stylesheet needs to first be rendered.
This includes important content such as text and images, which are crucial to satisfy the user’s reason for going to your site.
If the CSS stylesheet is taking too long to load, the page’s content has to wait for it to finish so it can be parsed and displayed on the page. What ends up being displayed to the end user is a blank page for a few seconds or more.
It may not seem like much, but considering that even a one-second delay in the loading of mobile sites decreases conversion rates by up to 20% and less or equal to 20% for each additional second, it’s worth it to speed up your site.
What Is Critical CSS?
The first content that the user will see on a page once it has been loaded is commonly referred to as above-the-fold or above-the-scroll content. This is also the part of the page that can be labelled as “critical” since it’s crucial that it loads quickly for an improved user experience.
The CSS that’s needed to load that critical content is known as critical CSS. You can also use the term “critical CSS” to describe the process of loading critical CSS inline. As opposed to loading the external CSS stylesheet.
Then, the rest of the page’s CSS can be loaded asynchronously and externally from the CSS stylesheet. In short, this means that the external CSS file can load at the same time as the critical CSS.
It may be important to note that screen sizes can vary widely in size between desktops and mobile devices. So, the critical CSS for different sites can vary depending on which devices they’re prioritizing in developing the site. This is typically decided by the screen sizes that are most used when visitors view your site.
The Caveat of Critical CSS
One essential concept to keep in mind is that inline CSS may not be cached depending on the type of caching you have set up for your WordPress site.
If you don’t cache your pages, then you should use critical CSS sparingly or else try to limit the amount of critical CSS you set up.
But if you use WP Rocket, you’re all set and you don’t have to worry about this issue.
Check out Caching for WordPress, Explained in Plain English, and A Caching Plugin is Critical to Your WordPress Site for details.
No matter which option you choose, you should aim to keep your critical CSS under 14 kb in size.
How to Manually Fix the Warning
If you want to use critical CSS to manually fix the page speed warning, it involves figuring out which CSS is critical CSS when it comes to your pages and templates.
This is a time-consuming task that requires you to analyze the entire Document Object Model (DOM) to determine which styles are applied to each element of the page.
Manually setting up critical CSS is beyond the scope of this article. But, you can check out Analyzing Critical Rendering Path Performance for details.
Eliminate Render-Blocking Resources: WP Rocket Fixes It
Once installed, WP Rocket is set up automatically with the best options enabled. Although, critical CSS isn’t set up on install. But, you can enable it in one click.
Go to Settings > WP Rocket and click on the File Optimization tab.
Scroll down to the CSS Files section and click the box labeled Optimize CSS delivery.
You can also optionally enter critical CSS manually in the Fallback critical CSS multi-line text box.
For details on how to fill this text area with automatically generated critical CSS, check out Optimize CSS Delivery:
When that’s done, click Save Changes at the bottom of the page.
Other Ways to Fix the Warning
You can use all these methods together for the best results. Or, you can be selective and choose the options that work well enough for your specific needs.