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.
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 no 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.
This plugin is pretty lightweight, only 176 KB to be exact. As of writing this, it currently has over 1,000,000 active installs with a 4.7 out of 5-star rating. The plugin helps you with the 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.
After enabling the above settings you will now see your CSS files in one “autoptimize_xxxxx.css” file.
