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.

Texiwill

Improves Pagespeed/GTMetrix/SEMrush/Yslow scores for Twenty Fourteen and other themes by reducing round trips, moving core CSS above the fold. For best results, you should also employ the following to get the best score:
<pre><code>Fast Velocity Minify
Smush IT
Declutter WordPress
</code></pre>
<h4>Features</h4>
<pre><code> - removes excessive fonts:
 Lato (from google)
 Open Sans (from google - part of WP Embed load)
 For Emphasize theme
 Genericons (replace with Font Awesome if in use)
- removes excessive json+ld entries
 - Embedding Styles Above-the-fold:
 Child Theme Configurator (child theme styles)
 Twentyfourteen Styles (and main theme styles for other themes)
 Icon-Fonts when Font Awesome in use
 Font Awesome Four Menus (overrides Icon-Fonts font-awesome)
 Fourteen Colors
 WP Bootstrap Tabs
 Tabby Responsive Tab
 Simple Custom CSS
 WP-Columna
 Responsive Lightbox Fancybox
 Fancier Author Box
- removes H1 collisions
- removed W3 Total Cache comments at end of post
 W3 Total Cache adds a comment with whitespace that takes 
 lots of processing
- removed Child Theme Configurator's parent theme
 older setup, new setup not yet.
</code></pre>
<h3>Usage</h3>
Works best with BWP-Minify and Defer CSS AddOn for BWP Minify already installed, however, this is a plugin with no settings. It just works.

AAC Scoring

Improves Pagespeed/GTMetrix/SEMrush/Yslow scores for Twenty Fourteen and other themes by reducing round trips, moving core CSS above the fold.

ShortPixel Critical CSS vs AAC Scoring