How to Combine External CSS in WordPress
A slow-loading website is quite harmful to your business and brand in general as it can put off visitors. Luckily, there are a lot of things that you could do to improve the load speed of your website. To start with, website owners should test their websites in GTmetrix, Pingdom, or Google PageSpeed Insights and use the results they get as suggestions for improvement. Also, we covered some website-slowing issues such as removing render-blocking resources and minifying Javascript and CSS files already. Now, we’re going to look at how to combine external CSS in WordPress and explain the reasons why you would need to do so.
Qode Themes: Top Picks
View Collection
Why you need to combine external CSS in WordPress
Before a website finishes rendering, there are a lot of assets that need to be loaded, including images, CSS and JS files, and videos. While having a CDN (content delivery network) for loading those assets can help speed up your website in general, it can have the opposite effect with CSS files. Having a lot of CSS files that are hosted on CDN can increase their load time significantly, as they need to be loaded separately. To overcome this load time issue, you need to combine all your external CSS files into one to reduce the number of HTTP requests.
Please note, these issues occur for users whose hosting only supports the HTTP/1.1 protocol. Those that use the HTTP/2 protocol don’t experience the same problem, as HTTP/2 allows for the loading of multiple CSS files in parallel. With that being said, let us explain how external CSS can be combined.
How to combine external CSS in WordPress
The easiest way of combining external CSS in WordPress is to use a WordPress plugin. The most helpful ones are caching plugins and/or plugins for improving website performance. One example that falls into both categories and which can combine, i.e. aggregate, CSS files is the Autoptimize plugin.
Autoptimize
Autoptimize is a great plugin for optimizing your website in general. It is extremely useful for aggregating and minifying JS and CSS files, deferring CSS or asyncing non-aggregated JS, optimizing images and Google fonts, and a lot more. As aggregating is simply a different term for combining, this plugin is a perfect solution for combining external CSS.
To combine external CSS using Autoptimize, you would need to install and activate the plugin first. Then, navigate to Settings > Autoptimize and scroll down to the CSS Options subsection. Simply tick the checkbox next to the Optimize CSS Code? option. By doing that, a whole subset of options will become available to you. Of those options, the first two—Aggregate CSS-files and Also aggregate inline CSS—will be checked.
Keep these options checked, and proceed to save changes. Scroll down below the Misc Options and press the Save Changes and Empty Cache button. And the plugin will do the rest. When it finishes, your CSS files will be combined and your load time on HTTP/1.1 improved.
Final Thoughts
Having a great number of CSS files hosted on CDN can negatively impact a website’s load time. Fortunately, solving this problem is very easy—you just need to combine your external CSS. And, if you follow our recommendation and install the Autoptimize plugin the solution will be a moment’s work. Make sure to adjust the options we mentioned and proceed to enjoy your new, faster, load times.
