Critical CSS might be a lifesaver for websites with junky css themes with lots of unused files. It creates inline css with all the page’s Critical CSS, making the page layout load faster.
Learn how to set up critical CSS for WordPress with Jetpack Boost, a free plugin, and how to use the Wp Rocket feature Optimize CSS Delivery.
What is Critical CSS WordPress?
Critical CSS is a combo of all necessary CSS for fully rendering the page layout. It is commonly used to make the page render faster and improve time to interactive(TTI) and the LCP(largest contentful paint).
The plugin generates the CSS and puts it inline or as a new stylesheet on the HTML page, loading early than all other CSS files. With all necessary(critical) CSS the page renders as soon as possible.
Critical CSS is a way to inline critical assets and improve load time in WordPress. It is also a way to optimize CSS delivery in WordPress.
How to create critical CSS in WordPress with a free plugin
Jetpack recently launched Jetpack Boost. The plugin generates Critical CSS for your homepage, posts, and pages. What Critical CSS does is that it creates an inline critical CSS of your WordPress.
The plugin also offers the “Defer Non-Essential Javascript” feature which moves non-essential JS to later load, and lazyloading.
Install the Jetpack Boost and enable the critical CSS feature. It may take a while, and once it finishes a message with how many pages it generated and the time ago will be logged.
Jetpack Boost does not require a wordpress.com login as it does with the main plugin Jetpack.
Jetpack works with static page cache plugins, such as WP Super Cache or W3 Total Cache. In our tests using Jetpack Boost with Wp Optimize, we had positive results.
How to create Critical CSS with Wp Rocket
Consider Wp Rocket’s full-performance solution to implement critical CSS. Wp Rocket offers more options than just Critical CSS to improve the website’s Pagespeed and Core Web Vitals. After installing Wp Rocket, go to the file optimization tab and enable “load CSS async”:
It will then create inline critical CSS for the pages, improving load time.
How to fix CLS(Cumulative Layout Shift) issue caused by WP Rocket Critical CSS
If you are using WP Rocket’s ‘Optimize CSS’ feature to improve Core Web Vitals and are having CLS issues, try the following to fix it:
- Add the following code to your WordPress functions.php file, or use a plugin such as Code Snippets to remove the plugin CSS files that are causing the high CLS:
add_filter('rocket_exclude_async_css', function($excluded_files = array()) {
$excluded_files[] = '/wp-content/plugins/plugin_causing_high_cls/css/style.min.css';
return $excluded_files;
});
This filter may fix Elementor CLS issues when using Wp Rocket’s Optimize CSS feature.
In our tests, we had a custom hook element of GeneratePress causing high CLS when using Critical CSS.
We removed ‘main.min.css’ using the filter and it solved the high CLS while keeping the low LCP from using critical CSS aka Critical Path CSS(CPCSS).
Get your WordPress Core Web Vitals Optimized!