How to combine CSS and JS files for WordPress

It is possible to combine CSS and JS files for WordPress into a single file each. This greatly reduces the number of HTTP requests each page load requires, however, it can introduce style and functionality issues.

What can go wrong when you combine CSS and JS files for WordPress

Turning on combination of CSS and/or JS files can affect the loading order of how these files interact with the page. For example, combining all of my CSS files commonly breaks WooCommerce layouts. It can also lead to styling issues and even functionality issues. It is for this reason that this step, more than any other, requires extensive testing – because of how we determine what a problem file may be, and work to stop it from causing issues.

How to resolve issues from combining CSS and JS files

The easiest way to resolve an issue is to exclude the specific problem file from being combined in the first place. This can be done, typically, from within the same plugin that you are using to combine the files.

Some plugins such as LS Cache even have the ability for you to specify your preference as to whether the combined or singular file will load first.

How to see which file is the problem?

It is usually somewhat obvious what the problem is – if something is visually wrong, find what it relates to (i.e. a plugin) and look for a CSS or JS file related to that. In my example of WooCommerce, there was two CSS files loading for WooCommerce, so after I excluded those I reloaded the page – and the problem was gone. Further testing revealed only one of those files needed to be removed.

Therefore in total, we were left with two CSS files – the combined file, and the singular WooCommerce file – still a great outcome.

Factors to consider

Depending on how many files you have, and where they interact with the page (are they loading critical content at the top, or something that won’t appear until farther down the page?), it might not be the right call to enable combination of CSS and JS files. For example, if you have a very large page with many resources being called, and we know that all CSS has to be loaded before images and JS can load, do you really want the entire pages CSS to be loaded first? It can lead to a faster web page to disable combination, and have the individual files load separately, if there are fewer small files in the top of the fold content.

Recommended plugins to combine CSS and JS files for WordPress

If you are using OpenLiteSpeed, then you will use LS Cache.

If you are on any other web server, my preference is for AutoOptimize, and it’s additional connector plugin, Async Javascript.

Outcome

It is important to know the benefit of combination – primarily that you cut down on the number of requests, meaning there is no wait and connect times between every file request. However, make sure enabling is thoroughly tested, and that you can compare your updated version to an old copy of the site.

If you need a hand, combination of files and troubleshooting any errors is part and parcel within our optimization service – request a quote here for your site.