How to Combine External CSS in WordPress

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.

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.

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.

Kinsta customers have direct access to the code minification feature that is built directly into the MyKinsta dashboard. This feature allows customers to enable automatic CSS and JavaScript minification with the click of a button.

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