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.
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.
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.
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.
Save yourself time and let WP Rocket do the job for you. WP Rocket will automatically apply 80% of web performance best practices. You don’t even have to touch any settings! You’ll see an instant improvement in speed and PageSpeed Insights score right away.