🔥 🥳 Get your Wordpress Pagespeed optimized today for $99 🔥 🥳 Conditions apply.

How to generate Critical CSS in WordPress(free plugin)

Last updated on September 8, 2021 | 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.

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 in inline critical CSS of your WordPress site.

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

Leave a Comment