How to create Critical CSS in Wordpress

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.

For improving and fixing both LCP and CLS you should also use a Remove(unload) unused CSS feature such as Asset Cleanup or Perfmatters and remove the largest unused CSS. The used CSS file will be leaner as less CSS will be processed and there’s a chance you pass without CLS issues.

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. It creates 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” or “Remove Unused CSS”:

It will then create inline critical CSS for the pages, improving load time, or for “RUCSS” it will create a used CSS file.

The “Remove Unused CSS” feature may offer better results for FCP and LCP metrics.

How to fix CLS issues caused by Critical CSS

One of the tricks to fix CLS caused by Critical CSS is to remove the largest unused CSS stylesheet with Asset Cleanup or Perfmatters.

Perfmatters 20% OFF Coupon: WPALPHA

Got to the page having CLSS issues. Open it on an anonymous tab in Chrome, Press f12 to open Chrome Devtools, click on Coverage, and reload.

Select the largest unused CSS and copy its URL. Remove it with Asset Cleanup or Perfmatters.

After removing the Unused CSS, click to edit the page, and either regenerate the Critical CSS or the Used CSS from the ‘Remove Unused CSS’ feature by clicking ‘Clear Used CSS’.

If you are using WP Rocket’s ‘Optimize CSS’ feature to improve Core Web Vitals and are having CLS issues, try it to fix. This may fix Elementor or page builder CLS issues when using Wp Rocket’s Optimize CSS feature.