2 Tactics to Optimize CSS Delivery in WordPress
Is It Time to Optimize?
With page speed being one of the biggest factors in upticks in bounce rates, any site slowdown should be investigated immediately. The result of these investigations often shows that the vast volume of CSS code WordPress requires is the culprit. That’s when you know it’s time to optimize CSS delivery in WordPress. Of course, there are a number of ways to go about doing so.
Many webmasters don’t want to add to their large repertoire of plugins, so they choose to optimize CSS delivery in WordPress without a plugin. If speed is still an issue, you may need to do even more! Note that before completing these steps, you should use something like Google’s “Insights” to ensure that optimizing CSS delivery in WordPress will actually help, and that the problem isn’t something else. For example, perhaps WordPress fonts that have to be cached every visit are slowing everything down? If so, consider trying out a new host.
The Steps to Optimize
So, you’ve determined that unoptimized CSS is the root cause of your problems. First, a bit about why this is an issue in WordPress. As you know, WordPress is a huge system, and most themes have lots of possible layout options and classes that users may never see. Browsers “front load” all CSS before allowing a page to load if it is in separate files, but plugins can thwart this process if it becomes an issue.
First, we will try using plugins to avert this problem. The strategy of them vary, but in general, they make your site’s CSS inline, meaning that pages don’t load with separate CSS files; all the styling information necessary for a page is included with the page, and nothing else. This is the most simplistic method to optimize CSS delivery in WordPress.
1. Log Into WordPress as Administrator
You’ll need to log in as an administrator first. After that, you’ll need to click on “Plugins” on the left-hand column of the WordPress Dashboard, as shown:
After that, you’ll need to click on “Add New Plugin” as shown in the image below:
2. Install Plugin: Autoptimize
“Autoptimize”, also referred to as “Auto Optimize”, is a commonly used plugin. As its name suggests, it will “Auto Optimize” CSS for you. It also is one of the best options to increase website speed in a WordPress plugin. After typing that in the “Keyword” box, you should see this result:
Click the “Install Now” button boxed in red, then click on the button again when the text changes to “Activate”. Note that this plugin will also perform compression on JavaScript files (or, for developers, it will “minify” your JavaScript). You’ll be directed to your plugins page.
3. Customize Autoptimize Settings
Find this plugin, then click “Settings” as shown below:
You’ll notice that the plugin has quite the list of features! For now, all we are interested in is its ability to optimize CSS delivery in WordPress. Scroll down on the list until you see the “CSS” section, and check off the box indicated:
As you can see, I’ve left all settings to their defaults. Unless you’re an expert in this domain, please do the same, as you could unintentionally ruin your site’s theme!
4. Test Out the New Changes
After you’ve customized the settings, you’ll probably be anxious to see if this plugin did indeed optimize CSS delivery in WordPress. Make sure you clear your browser’s cache, and then use Ctrl+F5 to reload your home page. After waiting a few minutes in case DNS propagation needs to catch up, also try using Google’s “Insights” again to see if you’ve had any luck.
If No Luck with Autoptimize
Depending on many different factors, your luck with that specific plugin may vary. If you didn’t get good enough results, and you are still confident that you don’t need to reduce server response times in WordPress instead, there is a second plugin you can try!
1. Undo the Changes Made By Autoptimize
This step is very important! Failing to do this can mess up your theme beyond repair! First, you’ll need to go right back to your “Plugins” page and locate “Autoptimize” again. This time, we’ll be looking for the “Deactivate” button associated with it as shown:
Click on that link. Next, the page will refresh. Locate the “Autoptimize” entry again. This time, the area that said “Deactivate” will say “Delete”. Click on that to fully remove the plugin. Confirm that you do want to remove it. If all goes well, you should see a message like the picture below:
2. Install Plugin: Speed Up
Speed Up, in stark contrast to Autoptimize, does require “getting your hands dirty”. Either way, however, it can help you to optimize CSS delivery in WordPress for free. To install this WordPress page speed optimization plugin, go back to the “Plugins” page and then click “Add New” again.
Follow the same process as we did before, but search for “Speed Up”. Oddly, you’ll need to scroll down the list a bit before you find the plugin (this is likely because it doesn’t have many active installations). You should see this box in the search results:
Click that “Install Now” button to get started using this plugin to optimize CSS delivery in WordPress. After that button’s text changes to “Activate”, click on that. You’ll notice on the “Plugins” page that there are no “Settings” to configure.
To get more details on “Speed Up”, you’ll need to hit “View Details” underneath the plugin on the main “Plugins” page. This will explain, in detail, how the plugin works.
3. Learn How “Speed Up” Works
The premise of this plugin is that it can help to optimize CSS delivery in WordPress by differentiating between what the author calls “vital CSS files” and “non-vital CSS files”. A CSS file is vital if it’s required to basically view the main page or used consistently throughout the site. However, a CSS file that is used on a widget only present in one Blog Post from three years ago would be called a “non-vital CSS file”.
As the description mentions, “vital CSS files” will be loaded “synchronously”. That means that there will be no change between how WordPress conventionally loads them (before displaying anything) before installing this plugin and after installing this plugin. On the other hand, those “non-vital CSS files” will be loaded “asynchronously”. In an attempt to optimize CSS delivery with WordPress, that means that these files will be loaded after the page is displayed. For example, this would be ideal if you have a dialog box that a user must click a button to open and stored the styling in a separate CSS file.
So, how do you do this? Unlike “Autoptimize”, this plugin unfortunately requires you to go into the code manually. It uses the function.php file by adding a method with quite a long name. You will need to essentially copy and paste the code to optimize CSS delivery in WordPress that the author listed on the main page for the plugin into your function.php file.
Here’s a snippet of what the code looks like:
// 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’);
How to Optimize CSS Delivery in WordPress
While we hope that “Autoptimize” worked out just fine for you, we understand that not everything, especially in the tech world, always is compatible. If it doesn’t we hope that “Speed Up” did the trick to optimize CSS delivery in WordPress for you. If you’re still having issues, try giving “WP Optimize” a spin.
To summarize, here are the steps to go through to accomplish this goal:
- Know when and why to optimize WordPress CSS delivery.
- Install Autoptimize and customize and test the plugin.
- If Autoptimize fails, uninstakk Autoptimize and install “Speed Up”.
- Follow the documentation of “Speed Up” to learn how to incorporate coding-based changes.
The above article may contain affiliate links, which help support Clever Sequence