How to Easily Optimize CSS Delivery in WordPress

There are many different ways in which you can customize the look and feel of your WordPress site. Aside from using the customization options that come with your WordPress theme, sometimes you may want to add some custom CSS to be able to adjust your site’s visual appearance completely according to your preferences. And while this custom CSS can be quite useful, if your CSS code isn’t delivered properly, then it can do more harm than good to your site’s overall performance.

This time around, we’ve decided to show you how to optimize your CSS delivery to help prevent your WordPress website from slowing down due to any potential CSS loading issues. We will show you how to do this using two different plugins, and also talk about some of the possible reasons behind CSS delivery slowing down your website in the first place.

We will cover:

How Can WordPress CSS Delivery Slow Down Your Website’s Performance?

While CSS files are quite useful when it comes to customizing the visual appearance of a WordPress site, these files can still have a negative impact on its speed and performance. Slow speed can lead to a bad user experience, which can further lead to lower page rankings, reduced traffic, and ultimately, less possibility for your business to succeed.

Now, one way in which CSS files slow down a website is when they get loaded before a page itself gets displayed, resulting in your visitors seeing a blank page. Another possible cause of this occurrence is your CSS files being larger than necessary, which naturally means they will load longer.

Fortunately, there are a few ways in which you can prevent these CSS files from slowing down your site. The first method requires you to install a plugin that will use only the most necessary pieces of CSS, or the so-called critical CSS, to load and display the first part of the page to users. The rest of the CSS will load only after your visitors are able to view your page’s contents. The critical part of the code will be added inline to the page’s HTML instead of being added in a separate stylesheet. This will allow the critical CSS to load on its own (without loading the entire CSS file first).

Another way is to segregate “vital” and “non-vital” CSS files by having vital files load right away and non-vital CSS files load only after your page is displayed, which has the potential to boost your page loading speed immensely.

We will show you how to use both of these methods with the help of two different plugins, so make sure to read on.

Optimizing the CSS Delivery of Your WordPress Site Using the Autoptimize Plugin

If you’re not familiar with coding, we recommend using the Autoptimize plugin. This plugin will allow you to optimize and improve the delivery of your CSS files in no time.

Now, even though the plugin itself is free to install and use, you will still have to connect the plugin to a premium third-party service (called criticalcss) to get the most optimal results. This service will allow the plugin to automatically identify critical CSS, but you will have to spend some money to use it. Still, the end result will be well worth it, and the tool itself does not cost much – it is available for only $3 per month.

After you install the plugin and activate it, head to Settings >> Autoptimize in your WordPress admin dashboard.

Then, find the CSS Options section (in the JS, CSS & HTML tab) and make sure to mark the box called Optimize CSS Code.

Next, you should unmark the “Aggregate CSS files” option and mark the option called “Eliminate render-blocking CSS” instead.

Once you do this, you should hit the “Save Changes and Empty Cache” button located at the very bottom of the page.

Now, as we mentioned in the beginning, you will need to sign up for a third-party premium service called Critical CSS if you want the plugin to work properly. This service will provide the Autoptimize plugin with the best parameters for the optimization of your CSS delivery.

Simply go to the Critical CSS tab (which you will be able to find in your plugin’s settings screen). To start, hit the sign up link:

After you sign up for their premium service, you will be able to get access to the Critical CSS API key. Head down to the API key section and paste the key into the “Your API key” field. Then, hit the Save Changes button.

And that’s it. This will link the CriticalCSS service with your Autoptimize plugin and ultimately optimize your CSS code delivery, allowing your WordPress site to load more quickly.

Optimizing the CSS Delivery of Your WordPress Site Using the Speed Up Plugin

Another option you can use is the plugin called SpeedUp – Optimize CSS Delivery. While the plugin is completely free to use and requires no additional premium services to work properly, you will still have to add a code snippet into your theme’s functions.php file yourself (after you install and activate the plugin, of course). In other words, you need to be familiar with coding in order to use it.

The plugin helps optimize the CSS delivery of your WordPress site by differentiating between so-called “vital” and “non-vital CSS files”. In this context, vital CSS files would be those files that are used regularly, or across various pages of your site. On the other hand, non-vital CSS files are usually those CSS files used less frequently, like the ones used on a single page or post, for example.

So essentially, the plugin will allow you to load those non-vital CSS files asynchronously, i.e. they will be loaded after your page is displayed, thus helping optimize your WordPress CSS delivery. As for the vital CSS files, they will still be loaded synchronously, with no change in how WordPress loads them before or after installing the plugin.

You can choose the files you want to load synchronously by inserting a filter into your theme’s function.php file.

Here’s an example of the code snippet you can add to your file (it can be also found on the plugin’s page):

// exclude main and child stylesheets from delivery optimization
function exclude_from_delivery_optimization($handle){
return in_array($handle, array(‘main-stylesheet’, 
‘child-stylesheet’));
}
add_filter(‘speed-up-optimize-css-delivery’, 
‘exclude_from_delivery_optimization’);

This particular code snippet will allow you to exclude main and child stylesheets from delivery optimization, but you should modify it according to your needs.

Conclusion

And there you have it – two different ways in which you can successfully optimize the CSS delivery in WordPress. Although the Autoptimize plugin requires some minimum payment on your part, it handles the slow CSS delivery problem quite successfully, which makes the additional cost worth it. And if you want to go the free route, the SpeedUp plugin will get the job done – but keep in mind that you need to be comfortable with adding code to your WordPress files in order to use it. Just make sure to choose the plugin that works best for you, and you’ll have your WordPress site running at top speed in no time.