How to Combine External CSS in WordPress

Updated on February 05, 2018

Seeing the “combine external CSS” warning in Pingdom, GTmetrix, or Google PageSpeed Insights? You are not alone, as this is a very common error for many WordPress website owners. This warning typically shows when you have 10 or more CSS files loading from a CDN and or subdomain (external domain). A way to fix this is to concatenate your CSS files, or combine them so that they are loading in a single request.

combine external css

Note: If you are running over HTTPS with a provider that supports HTTP/2, this warning can usually be safely ignored now. With HTTP/2 multiple CSS files can now be loaded in parallel over a single connection.

combine external css warning pingdom

If you are still running over HTTP and haven’t migrated to HTTP/2 yet, you can follow the tutorial below on how to combine external CSS files. Again, concatenation is now a technique that is generally considered deprecated. Over 77% of browsers now support HTTP/2 when running over HTTPS, as well as many CDN and web hosting providers, including Kinsta. It is also important to note that Pingdom doesn’t support HTTP/2 yet since it uses an older version of Chrome.

Combine External CSS in WordPress

The combine external CSS warning is typically seen when using a CDN because you are hosting your CSS files on an external domain, such as cdn.domain.com. What you can do is simply concatenate your CSS files on your web server. Once they are combined, then you will now longer see this warning as it will load them in a single request. One of the easiest ways to do this is to use a free WordPress plugin called Autoptimize, developed by Frank Goossens.
autoptimize

This plugin is pretty lightweight, only 176 KB to be exact. As of writing this, it currently has over 500,000 active installs with a 4.7 out of 5 star rating. The plugin helps you with concatenation of your scripts, minification, expires headers, and the ability to move styles to your header and scripts to your footer.

You can download it from the WordPress repository or by searching for it within your WordPress dashboard under “Add New” plugins. Once installed you will want to go into the settings and enable the “Optimize CSS Code” option. This will concatenate (combine) your CSS files. And if you are using a CDN, make sure to input your CDN URL. This way your CSS files will load as one single request on your CDN.

combine external css files

After enabling the above settings you will now see your CSS files in one “autoptimize_xxxxx.css” file.

combined css files

Was this article helpful?
No, or there was something off

Hand-picked related articles

Use WordPress?

Join 20,000+ others who get our FREE weekly newsletter with WordPress tips on how to drive more traffic and revenue to your business!

You have Successfully Subscribed!

Send this to a friend