Disclosure: This post may contain affiliate links. Purchasing a product through one of these links generates a commission for us at no additional expense to you.
If you’re here, it’s likely because you got this notice in Google’s PageSpeed Insights test:
While it can be tough to eliminate all render-blocking files, it’s not that hard with the right tools.
In this guide, I’ll show you three ways to speed up your site with optimized CSS delivery. There are options for both total WordPress newbs and developers included here.
Let’s start from the top – what exactly does it mean to optimize the delivery of CSS on your WordPress site?
What does “optimize CSS delivery” mean?
Let me be really clear about what I mean first.
CSS files are used to style web pages. Every WordPress theme loads a style.css file and you likely have a handful of additional stylesheets (CSS files) added by plugins. For instance, if you have a plugin that adds a new widget, it will need to load another stylesheet to style that widget.
All of the CSS files are loaded before your site is rendered.
This means that visitors will see a blank white screen until then. Now here’s the thing…
The majority of the CSS loaded isn’t needed for whatever page the visitor is on, and even less of it is needed for what they can immediately see. For instance, why make them wait while loading styles for the footer? It will probably be at least a few seconds before they see it (if they ever do).
By deferring our CSS files or loading them asynchronously, we can allow the site to show up in the visitor’s browser before the stylesheets are finished loading.
In this guide, I’ll share three different approaches to defer your stylesheets and optimize your CSS delivery.
Optimized critical rendering paths in action
If you visit the Compete Themes homepage, keep an eye on the loading indicator in the browser tab while the site loads. You’ll notice that after the site is visible and appears to be loaded, the loading indicator keeps spinning for just a moment longer.
That’s an example of what optimized CSS delivery looks like in practice.
If you want to see an example of a highly optimized critical rendering path, visit Amazon. The whole site does not load at once. Instead, over the course of a few seconds, you’ll see different elements appear throughout the page thanks to the carefully optimized rendering path.
1. WP Rocket
I use the WP Rocket plugin here at Compete Themes and recommend it before all other solutions for critical rendering path optimization.
Optimizing your CSS delivery with WP Rocket really couldn’t be any easier. In the File Optimization menu, there is a checkbox to turn this feature on.
Once checked, WP Rocket will automatically defer all of your stylesheets so that they are not loaded until after the site shows up in the visitor’s browser. Now, if all of the CSS was deferred, your site would look terrible until it was loaded, and the WP Rocket developers have addressed this elegantly with their plugin.
When you turn on this option, WP Rocket will automatically find the CSS needed to style the parts of your site that visitors see the moment your site loads, and that code is added inline to the document.
In other words, your site shows up faster in the browser and appears to be fully loaded while the deferred CSS is then loaded over the next second or two.
In my opinion, this is by far the best solution for optimizing CSS delivery with WordPress.
WP Rocket is a premium plugin, but if faster load times will earn you more income from your site, I would definitely consider getting it for your site. I have a much more detailed look at WP Rocket you can read if you want to learn more. Otherwise, you can check out their site here.
2. Autoptimize
The second approach I would recommend is the Autoptimize plugin.
This feature-rich performance plugin provides a few approaches for optimizing CSS delivery. The simplest option is to simply inline all CSS. This will take all of the CSS found in your stylesheets and add it directly into the page document so no stylesheets are loaded.
To find this option, you need to click on the Show advanced settings button at the top.
You’ll then see the option to inline all CSS.
While this option can improve performance, if you have too much CSS added to the page document, it can actually slow down your site instead. It may be worth experimenting with.
Otherwise, a neat approach is to enable the option to Inline and Defer CSS instead. This will defer all of the stylesheets and only inline the critical CSS. However, it will not automatically find the critical CSS for you like WP Rocket.
So then, how do you get your site’s critical CSS? Even for a seasoned WP developer, this can be kind of a head-scratcher.
While I haven’t tested this tool for reliability myself, this free Critical Path CSS Generator tool would be a viable approach. Enter in your site’s URL and it will return the CSS you absolutely need to load.
You can then copy & paste that code into the critical path CSS box in Autoptimize.
If using this approach, you may need to add additional CSS for different pages of your site, and it may require you to know your theme’s CSS very well to ensure consistent styling.
Another approach
There is a plugin called Autoptimize criticalcss.com power-up. It’s quite the mouthful, but this additional plugin will allow you to automatically generate your site’s critical CSS using the criticalcss.com service.
You’ll need to signup with CriticalCSS for a paid account to use this option.
3. Speed Up
This last option is very quick and will be simple for a WordPress developer to implement.
Speed Up is a lightweight plugin that lets you defer any non-critical stylesheets.
While this won’t completely optimize your CSS delivery, it will help.
Let’s say your theme adds one stylesheet and then there are five more stylesheets added by plugins. If only the theme stylesheet is critical to load before displaying the site, you could defer the other five.
Speed Up gives you a simple filter you can add to a child theme’s functions.php file (or a plugin) to defer any stylesheets you want. All you need are the handles of each stylesheet being loaded. You can find some simple functions here for outputting the handles of all registered stylesheets on your site.
Again, this will be quick and easy for a developer, but I wouldn’t recommend this solution if you don’t write code.
Conclusion
I hope you learned a thing or two about WordPress performance optimization in this post.
While each of the three solutions above can work well, I have to give a final shout-out to the WP Rocket plugin. As both a blogger and WordPress theme developer, I find it so easy and painless to work with.
If you want some more tips on speeding up your site, you might like this guide on image optimization or my WP Engine review which Compete Themes relies on for fast load times.
