1. Home
  2. Knowledge Base
  3. How to combine external CSS to WordPress

Sometimes while using our WordPress site we get to see error messages and warnings like “combine external CSS,” this is a widespread error most WordPress owners encounter. This warning prompt mostly occurs when you have 10 or more CSS files loading from a CDN or a subdomain (external domain). Often time, when you have three or more files, it means there are some files enquired in the middle. One way to fix this is to combine your CSS files so that they load in a single request.

Exception: Users can safely ignore the combine CSS error prompt only if they are running over HTTPS with a provider that only supports HTTP/2. This is because HTTP/2 supports parallel loading of files over a single connection.

For efficiency and seamless operation devoid of errors associated with the combination of external CSS, it is best practice for users to implement their website over an HTTP/2 connection. Users who aren’t running over HTTP/2 yet should endeavor to migrate for a seamless operation. Today over 77% of web browsers support HTTP/2 running over HTTPS with a majority of CDN and web hosting providers embracing the new technology.

COMBINE EXTERNAL CSS ALERT

Whenever you host your CSS files using a CDN on an external domain e.g., cdn.domain.com, chances are you are going to encounter a warning alert. This warning alert occurs because you have multiple CSS files on the CDN. To fix this issue, concatenate your CSS files on the webserver to become as one single file that can be loaded on a single load request. WordPress has provided a free plugin called Autoptimize to help you out with combining external CSS. 

The Autoptimize plugin is highly useful and very lightweight; about 176 KB. As of writing this, it has had over 620,000 active installs with a star rating of 4.7 out of a possible 5. This plugin can be downloaded from the WordPress repository at no cost. Once downloaded and installed, go to setting on your dashboard and enable the “Optimize CSS code” option. This will concatenate all your CSS files. In a situation where you are using a CDN, make sure to put in your CDN URL to enable the loading of all your CSS files on a single request.

Once the settings above are done, you will now be able to view your CSS files in one “autoptimize_xxxxx.css” file.

Was this article helpful?

Leave a Reply

Your email address will not be published. Required fields are marked *