ShortPixel

With ShortPixel Critical CSS plugin, your website can automatically generate above-the-fold CSS for your web pages. 
This means your website will load faster and get better scores with online testing tools like PageSpeed Insights or GTmetrix.
IMPORTANT NOTICE: Plugin closure! 
We would like to inform you that the ShortPixel Critical CSS plugin and criticalcss.co service will be closed starting December 1st, 2024, and will no longer be available.
The Critical CSS functionality has now been integrated into the <a href="https://wordpress.org/plugins/fastpixel-website-accelerator/" rel="ugc">FastPixel Caching plugin</a>, and we highly recommend transitioning to this new plugin as soon as possible to ensure continued functionality and support.
If you have any questions, please feel free to contact us at <a href="mailto:help@shortpixel.com" rel="nofollow ugc">help@shortpixel.com</a>.
How it works?
<ul>
<li>ShortPixel’s Critical CSS (CCSS) plugin uses our brand new service to generate the critical CSS for your website’s pages.</li>
<li>The generated CCSS is inserted into the web pages while the original .css files are deferred. This makes the pages load faster.</li>
<li>The plugin starts generating the CCSS for each visited page and retrieves it from the ShortPixel Critical CSS Service. This is done using WP CRON jobs that run in the background without user intervention and without slowing down the website.</li>
<li>The edited pages will have the CCSS automatically generated.</li>
</ul>
Features
<ul>
<li>The CCSS plugin can be configured to keep Critical CSS rules based on the page URL or for each page template. This can help optimize the number of CCSS files needed.</li>
<li>Additional flexibility: the website administrator can manually configure additional Critical CSS rules to be included in the generated Critical CSS.</li>
<li>Our plugin integrates with WP Rocket and Elementor, if they are present, in order to leverage the cache support and deliver Critical CSS more effectively.</li>
</ul>
The plugin was forked from the <a href="https://wordpress.org/plugins/wp-criticalcss/" rel="ugc"> WP Critical CSS</a> plugin, modified to use ShortPixel’s Critical CSS service and enhanced with new features.
Currently, the plugin while in its BETA version, is 100% free to use. Just install it on your website, configure it and test the results with a tool like <a href="https://pagespeed.web.dev/" rel="nofollow ugc">Google PageSpeed Insights</a> or <a href="https://gtmetrix.com/" rel="nofollow ugc">GTMetrix</a>
For questions or support, please contact us directly <a href="https://shortpixel.com/contact" rel="nofollow ugc">here</a>
Other plugins by ShortPixel
<ul>
<li><a href="https://wordpress.org/plugins/fastpixel-website-accelerator/" rel="ugc">FastPixel Caching</a> – WP Optimization made easy</li>
<li><a href="https://wordpress.org/plugins/shortpixel-image-optimiser/" rel="ugc">ShortPixel Image Optimizer</a> – Image optimization & compression for all the images on your website, including WebP & AVIF delivery</li>
<li><a href="https://wordpress.org/plugins/shortpixel-adaptive-images/" rel="ugc">ShortPixel Adaptive Images</a> – On-the-fly image optimization & CDN delivery</li>
<li><a href="https://wordpress.org/plugins/enable-media-replace/" rel="ugc">Enable Media Replace</a> – Easily replace images or files in Media Library</li>
<li><a href="https://wordpress.org/plugins/regenerate-thumbnails-advanced/" rel="ugc">reGenerate Thumbnails Advanced</a> – Easily regenerate thumbnails</li>
<li><a href="https://wordpress.org/plugins/resize-image-after-upload/" rel="ugc">Resize Image After Upload</a> – Automatically resize each uploaded image</li>
<li><a href="https://wordpress.org/plugins/wp-svg-images/" rel="ugc">WP SVG Images</a> – Secure upload of SVG files to Media Library</li>
</ul>

ShortPixel Critical CSS

Easy to use and simple. Does what it says.

Working great!

Critical CSS plugin by ShortPixel to speed up your website. Easy to use, works on any website.

Adnan

WPBrigade

Inline JS block helps in adding above the fold JS or for your Advanced customization needs.
Note: JS Script tags are necessary to run the JS Code. So add these tags to compile your code.

Inline JS Block for Gutenberg

Inline JS block helps in adding above the fold JS or for your Advanced customization needs.

ShortPixel Critical CSS vs Inline JS Block for Gutenberg