How to create Critical CSS in WordPress

Last updated on May 13, 2022 | By

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 and lcp(largest contentful paint) metrics. 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 to later load, and image lazyloading. 

How to setup Jetpack Boost Critical CSS

Install the Jetpack Boost plugin and proceed to enable critical CSS. It may take a while, and once it finishes a message with how many pages it generated and the time ago will be logged.

image 15

Jetpack Boost does not require a wordpress.com login as it does with the main plugin Jetpack.

Jetpack Boost Compatibility

It is stated that 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 use Wp Rocket’s Critical CSS feature

Consider Wp Rocket’s full performance solution to implement critical CSS. After having Wp Rocket installed, go to the file optimization tab and enable “load CSS async”:

image 2

It will then create inline critical CSS for the pages, improving load time.

If you haven’t bought Wp Rocket yet, consider using my reflink.

How to fix CLS(Cumulative Layout Shift) issue caused by WP Rocket Critical CSS

If you are using WP Rocket ‘Optimize CSS’ feature to improve Core Web Vitals and are having CLS issues, you can try the following to fix it:

  1. 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;
});
image

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).

Stuck on Core Web Vitals?
Get your site optimized today

Leave a Comment