Before we get started, some related reading:
- What is critical CSS?
- Is critical CSS worth the hassle?
- Should I use generated or manual critical CSS?
Plugins
Autoptimize
With the help of a second “power-up” plugin, which connects to a paid service (Criticalcss) Autoptimize can provide you with critical CSS. This works OK, but we haven’t consistent success with it.
Page Speed Optimization
PSO is effective, but not user friendly. It’s no longer available on the WordPress repo, so you’ll need a second plugin to manage updates. We’ve typically used this to manually set up critical CSS on client sites but don’t recommend it for the DIY’er.
WP Rocket
Another plugin with auto-generation capabilities is WP Rocket. Again, it works OK but can’t really handle themes with custom page templates. We do have a good compromise for this plugin below, though.
LiteSpeed
We really like this plugin, as it handles a lot of recommendations we see, all in one place. That includes critical CSS, and it does a really great job with this. Unfortunately, this plugin only works on servers that are actually running LiteSpeed, so you’d need to be on a host with that (such as WPopt) to use it.
Compromises
Andrew of NerdPress shared his compromise for critical CSS with us, and we’ve found that with the new PSI recommendations, clients can get away with this.
The compromise is to defer all CSS files except the main theme stylesheet, which can be minified but left render-blocking. With some extra plugins/functions, this can be done in both WP Rocket and Autoptimize. While we don’t have articles on how to do this at the moment, send us an email and we’ll write something up for you! 🙂
Generating it
When we’re generating our own critical CSS, usually for use with Page Speed Optimization, we use the paid service Criticalcss.
Manually updating it
Note that generated critical CSS isn’t perfect. We typically perfect it by testing it on each unique template on your site, adding necessary menu and spacing fixes as needed.