Understanding WordPress CSS
Before we dive in, let's understand how regular CSS works in WordPress.
Each WordPress theme consists of style.css which contains all the code needed to style your site. Theme developers should support all WordPress features which include blog posts, comments, products page, membership page, forms, etc. Other plugins you install can also add similar css stylesheets.
This can make css files bloated and large in size of 200kb or even more.
What is Critical Path CSS?
As your CSS files grow, your browser needs to download those large files, parse them, and render them. Also known as render blocking. It will also increment the first meaningful render and the first meaningful render.
Critical Path CSS is the CSS required to render the above content on every web page. As the name suggests, "critical" CSS, which helps the browser quickly draw and render it before loading full CSS files.
Usually the css of the critical path is embedded in the header and the source css file is loaded asynchronously or in the footer for ease of use.
Why is Critical Path CSS so important?
You must have already seen a warning from tools like Google PageSpeed Insights or GTmetrix saying "optimize css delivery" or "defer unused css".
Critical CSS has nothing to do with page load time. It does not increase/decrease loading time. But gives a much better user experience. It helps to quickly "render" or "colorize" a web page.
- Improves First Content Draw (FCP)
- Improves First Significant Payment (FMP)
- Remove unused CSS (technically don't remove it, but prioritize "useful" CSS)
Here are two screenshots of my blog with and without critical CSS.
As you can see in the "no critical css path" section, it took almost 5 seconds to show the user something useful on a mobile device. The browser has to make an additional HTTP request to the css file, download it, parse it in order to start rendering. But when using critical css, all necessary css must be inline and the browser can start rendering immediately after loading the HTML file in a second or less.
How to create critical CSS in WordPress?
There are several ways to generate critical CSS in WordPress.
Using caching plugins
WP Rocket is a premium caching plugin that works really well.
One of the reasons I use WP Rocket on every site is the critical CSS generation itself. They generate Critical CSS separately for home page, posts page, category page, product page, etc. and embed it. They will restore critical CSS if there are changes to the theme or setting.
Everything can be done at the touch of a button.
Other caching plugins that can generate critical CSS
Swift Performance and LiteSpeed (requires LiteSpeed/OpenLiteSpeed server) are similar plugins that can generate Critical CSS. Both of these plugins have cloud and full cache built into their servers.
Using Autoptimize + Free Critical CSS Generator
There are third party online tools that provide important css by inputting your site's URL. pegasaas is such a great free tool.
Here's how to do it:
Step 1. Go to https://pegasaas.com/critical-path-css-generator/ and enter your URL. Copy the generated "Critical Path CSS".
Step 2 In the auto-optimize settings (enable advanced settings), under "CSS Options", check "Inline and Defer CSS" and paste the copied CSS.
Pros:
- Is free
Minuses:
- No separate critical CSS for different page types (ex: home page, posts page, category page, product page, etc.)
- Don't rebuild automatically on theme/setting change
Why can't WordPress itself generate critical CSS?
As you may have noticed, creating a css critical path enables external services. So why can't WordPress itself generate it?
Creating Critical CSS is made possible by open source projects such as Critical (by Google), CriticalCSS or penthouse. All of these projects are based on NodeJS, not PHP. So, you need to install NodeJS on your server. Most shared/managed hosting providers don't allow this for several reasons.
