Minifying and combining CSS and JavaScript in WordPress

Reducing the size and number of asset files your WordPress site sends to visitors can meaningfully improve page load times. This guide explains what minification and file combining do, how to configure both in the LiteSpeed Cache plugin, and how to avoid the most common problems.

What minification and combining actually do

Every WordPress page typically loads several CSS stylesheets and JavaScript files. These files contain whitespace, comments, and long variable names that make them readable for developers but add unnecessary bytes for browsers to download.

Minification strips out that whitespace and shortens internal identifiers, producing a functionally identical file that is often 20-40% smaller. It is almost always safe to enable and carries very little risk of breaking anything.

Combining merges multiple files into one, so the browser makes fewer requests. This was a significant win in the days of HTTP/1.1, where each request had real overhead. On HTTP/2 and HTTP/3 - which our servers support - the browser can download many small files in parallel over a single connection. Combining files can actually work against that, and it introduces a higher risk of breaking scripts that depend on load order. We recommend treating combining with caution and testing carefully if you do enable it.

Before you begin

Make sure LiteSpeed Cache is installed and active on your WordPress site. If you have not set it up yet, our guide on configuring LiteSpeed Cache with WordPress walks you through the full setup.

If this is a live production site, we strongly recommend testing these changes on a staging copy before applying them to your live site. CSS and JavaScript optimisation settings - especially combining - can affect how your site looks and behaves in ways that are not always obvious until you check multiple pages. Our guide on creating staging websites with WP Toolkit explains how to set one up quickly.

It is also a good idea to create a backup of your site before changing optimisation settings, so you can roll back quickly if something breaks.

Enabling CSS and JavaScript minification

1. Log in to your WordPress admin dashboard.
2. In the left-hand menu, go to LiteSpeed Cache, then click Page Optimisation.
3. Click the CSS Settings tab.
4. Set CSS Minify to On.
5. Click the JS Settings tab.
6. Set JS Minify to On.
7. Click Save Changes.
8. Go to LiteSpeed Cache > Toolbox and click Flush All to clear the entire cache - including cached HTML pages - so the correct minified CSS and JavaScript files are generated and served on the next page load.

That is all you need for minification. Visit your site and check that pages still look and behave correctly before moving on.

Enabling CSS and JavaScript combining

If you want to try combining despite the caveats above, the settings are in the same tabs.

1. Go to LiteSpeed Cache > Page Optimisation > CSS Settings.
2. Set CSS Combine to On.
3. Go to the JS Settings tab.
4. Set JS Combine to On. You can also try JS Combine Inline if you want inline scripts merged into the combined file, though this increases the risk of conflicts.
5. Click Save Changes.
6. Go to LiteSpeed Cache > Toolbox and click Flush All. This purges cached HTML as well as CSS and JS files, ensuring visitors receive pages that reference the newly combined assets rather than the old individual files.

Fixing broken scripts with the exclusion lists

If enabling combining causes a page element to stop working - a slider, a checkout form, a date picker - the usual fix is to exclude the offending script or stylesheet from combining while leaving minification on.

LiteSpeed Cache provides exclusion fields for exactly this purpose.

1. Go to LiteSpeed Cache > Page Optimisation > CSS Settings.
2. Find the CSS Combine Excludes field.
3. Enter a partial filename or URL path for the stylesheet you want to exclude, one per line. For example:

woocommerce.css
slider-pro

4. Repeat the process on the JS Settings tab using the JS Combine Excludes field.
5. Save and flush the cache, then retest the affected page.

You may need to repeat this a couple of times to isolate the exact file causing the problem. Minification exclusions work the same way if a specific file causes issues when minified.

Testing your changes with browser DevTools

After enabling any of these settings, spend a few minutes testing your site in a browser with the cache cleared. Browser DevTools give you the clearest picture of what is happening.

1. Open your site in Chrome or Firefox.
2. Press F12 (or right-click and choose Inspect) to open DevTools.
3. Click the Console tab and look for any red JavaScript errors. An error here often points directly to the file causing a problem.
4. Click the Network tab, then reload the page with the cache disabled (hold Shift and click the reload button, or tick Disable cache in the Network tab).
5. Filter by CSS or JS to see which files are loading, how large they are, and how long each one takes.

You are looking for a reduction in file sizes compared to before minification, and fewer requests if you have enabled combining. If you see errors in the Console tab, note the filename mentioned and add it to the relevant exclusion list.

For a broader view of how your changes affect overall page speed scores, our guide on how to read speed reports explains how to interpret GTmetrix, Pingdom, and Google PageSpeed Insights results.

Summary

• Enable CSS Minify and JS Minify - these are low-risk and almost always worth doing.
• Be cautious with CSS Combine and JS Combine - they offer less benefit on HTTP/2 and HTTP/3, and are more likely to break things.
• If this is a live production site, test combining on a staging copy first.
• Use the exclusion lists to fix any scripts or stylesheets that break after combining.
• Always use Flush All after changing these settings - this clears cached HTML as well as CSS and JS, so visitors get pages that load the correct assets.
• Use browser DevTools to confirm the changes are working and spot any errors quickly.