Today I would like to teach you the concept of critical path CSS to which web optimization services refer so much, so let’s see what they mean by critical path CSS, how it is created and, above all, how to take advantage of the concept to improve the user experience on our website and get better measurements in services such as PageSpeed Insights, WebPageTest or GTMetrix.
So let’s start at the beginning…
WordPress and CSS
Every WordPress theme has a style.css file that contains all the code necessary to style your website.
Theme developers have to take care to provide compatible styles for all WordPress features, i.e. blog posts, comments, product pages, forms, headers, footers, and sometimes with popular plugins.
In addition, many plugins you install also add CSS stylesheets that will be loaded on each page, in case you decide to use its functionality you should take this into account.
All this CSS is usually loaded through calls to the various style sheets in the header of your website, sometimes weighing several hundred Kbs.
This is because the CSS stylesheets are a priority in the process of loading the web when a user visits it.
Before the rest of the page loads, CSS stylesheets are the first thing to be rendered.
This includes such important content as text and images, crucial to satisfy the reason the user came to your site.
Is there something wrong with how WordPress loads the CSS?
To even consider the concept of critical path CSS, you should first ask yourself if there is something wrong with the way WordPress, its themes and plugins load CSS.
And normally no, there is nothing wrong, except that when analyzing your pages in a service that measures the main web metrics, or Core Web Vitals, you discover a message indicating that there are render-blocking resources.
As you see in the screenshot of the PageSpeed Insights tool, there are a number of stylesheets, loaded in the header of the site, that block rendering.
Because if the CSS stylesheet takes a long time to load, the content of the page has to wait for it, for it to be analyzed and displayed on the page in the way it is defined in the stylesheet.
And, in the meantime, what if all the user sees is a blank page for a second or more?
It may not seem like much, but if you take into account that a one second delay in page loading from mobile devices decreases conversion by 20% for each additional second, it is something to take into account.
But what is rendering-blocking?
Resources that block rendering
When we talk about resources that block rendering we always mean that to display the first visible part of the web, you have to load a lot of code from the stylesheets or scripts that are not really all that necessary to display that first part of the web.
This first part of the web, in the terminology of the main web metrics is called FCP (First Contentful Paint) and FMP (First Meaningful Paint), that is, the part of the web that the user sees as soon as he arrives, before scrolling to check if there is more content.
You can detect these resources that block rendering, in addition to PageSpeed Insights analysis and other online tools, from the same browser console, in the “Coverage” tab, which will mark in red the critical resources for the display of the page, and clicking on each one will show its position in the code at the top.
This first visible part of the web, so sensitive to resources that block rendering, is also called Above the fold or Above the scroll.
What is Above the fold?
This concept of above the fold is what, according to Google, makes the difference in the user experience, because that first impression of loaded visible content before the scroll is what determines for your visitor if your website is fast and optimized for viewing, allowing immediate access to its content.
It will greatly determine the perceived performance of your website.
The concept of above the fold comes from newspapers, because in traditional newsstands the different newspapers were displayed folded, and the user opted (unless prior bias) for one or the other based on what was seen above the fold, by the so-called “header”.
This, taken to the digital world, is what we are talking about, what you see on a web page before scrolling down.
So if you don’t get a great, fast viewing experience above the fold, many users won’t even get to see what’s below.
That said, let’s move on to the next, and expected, concept: critical path CSS.
What is critical path CSS?
Critical CSS, or critical path CSS, is the minimum CSS needed to display the above-the-fold content of any web page.
It is called “critical” because it is the CSS that helps the browser to quickly display the first part of the page, without the need to download all the complete CSS files.
Critical path CSS has nothing to do with page loading speed, but rather with rendering or displaying the page content quickly.
Typically, the critical CSS is embedded (inline) in the header of the page, and then the original CSS file is loaded asynchronously in the footer.
Also note that since screen sizes may vary between devices, the critical CSS may also vary depending on which devices you want to prioritize rendering on.
How to generate critical CSS and not block rendering
If we have detected that there is CSS blocking the rendering of our pages then we should do something to improve the experience of our visitors, right?
So let’s see several strategies that we can apply to not block the rendering above the fold and get a better user experience and performance perception.
But what is this about generating the critical path CSS?
Well, it consists of:
- Detect the critical CSS, necessary for rendering without blocking the above the fold of the pages.
- Adding the critical CSS integrated (inline) in the header of the pages.
- Defer the loading of the rest of the CSS, usually in the footer.
There are basically 2 ways to generate the critical path CSS…
Generate critical CSS manually
Yes, you can create that critical CSS manually, and the first thing is to get the critical CSS:
- Go to the Critical Path CSS Generator website and enter the URL of the page.
- Click on the “GENERATE CPCSS” button.
- Copy the resulting code into the generated critical CSS box.
Now, with the critical path CSS generated, you have to insert it before the tag </head> of your theme, usually in the header.php file.
You can do it this way, editing the header.php file of the child theme (so you don’t lose changes in updates) if you want, it’s totally valid.
Just add it before the first tag <link rel='stylesheet' href='...'>, inside <style></style> tags.
Save the changes to the file and you have now created the critical CSS and inserted it so that it loads without blocking rendering.
Insert the critical CSS in the header with the help of plugins.
The first step would be the same as before, generating the critical CSS, but in this case, instead of adding it manually to our header, we will use the Autoptimize plugin.
Once installed and activated, go to its settings and activate in the CSS options the setting “Optimize CSS code” to activate the rest of sub-options, of which you have to activate the one called “Inline and defer CSS?“
In the empty box that will be shown when you activate this last option is where you must paste the critical CSS previously generated.
Save the changes and that’s it. If you check the page again there will no longer be CSS blocking the rendering, but there may be JavaScript.
The main advantage of this manual method is that it is free, but the disadvantages are that it does not distinguish between devices or pages. It is perfectly fine if the same CSS is loaded on all your pages.
Generate critical CSS automatically
However, if you prefer that the generation and embedding of critical CSS is done automatically I propose 2 ways to do it.
One is hiring the CriticalCSS API service that is promoted from the same plugin Autoptimize, for about 2 euros per month.
The other method would be to use WP Rocket.
This fantastic optimization and caching plugin for WordPress allows you to generate the critical path CSS separately for the front page, posts, archive and blog pages, product pages, etc, and in the process automatically embeds it integrated (inline).
In addition, it rebuilds the critical CSS if there is any change in the theme or you make any customization.
To achieve this just go to the File optimization (CSS and JS) section and activate the option to optimize CSS delivery and save the changes.
When you check this box the critical path CSS for your entire website is generated in the background and will be added inline on the next page load. After that, the remaining CSS will be loaded asynchronously (i.e. without blocking rendering).
WP Rocket’s external tool analyzes the first entry of each content type (posts, pages, products, etc.), as well as the taxonomy archive pages (categories, tags, product categories, etc.) and will extract the critical CSS from each of those content types separately and send the code to WP Rocket, which will then add it to the respective pages as requested by a visitor, or WP Rocket’s cache preloader.
Critical CSS will be removed when the page loads. This should help avoid design issues when a site injects JavaScript or updates CSS classes after critical CSS has been applied.
The CSS is stored in the following folder on your server: /wp-content/cache/critic-css/
Relative paths in images and fonts will be automatically changed to absolute URLs. Critical CSS will be trimmed and reduced with all necessary precautions. This means that required spaces (such as inside calc() operations) or backslashes (as in ‘\f311‘ in an icon font) will be preserved.
But not only this, in addition, in the WordPress editor you will find a WP Rocket box where you can revert the generated critical CSS or even create a critical CSS specific to that page, file or whatever.
As you can see, WP Rocket offers a complete solution for generating and embedding critical CSS, in a customized way.
How do I check if the critical CSS has been generated?
If you have used the WP Rocket method you can easily check it.
- In the source code of the page look for:
- The
rocket-critical-cssstyle tag. - In each link to a stylesheet the attributes will be added:
rel='preload'as="style" onload="this.onload=null;this.rel='stylesheet'"data-rocket-async="style"
- The
- In the PageSpeed tool, CSS files will no longer be shown to block rendering.
Why doesn’t WordPress generate the critical CSS?
You may have already seen that to generate critical CSS you have to use external services, but even so WordPress could generate it, just like Autoptimize or WP Rocket do, right?
The problem is that critical CSS generation is possible thanks to open source projects, like Google’s Critical, CriticalCSS or Penthouse, and all these projects are based on NodeJS, not PHP.
So, for WordPress to be able to generate the critical CSS using these services you would need to have NodeJS installed on your server, something that is not usually available on many shared hosting, which is what most WordPress users have.
In short, how do I generate critical CSS?
In my opinion and experience the best method is to do it with WP Rocket, as it not only automatically generates the global critical CSS but also allows you to generate it on each page or content type.
