xSpeed Cache
Get Plugin
Features Pricing Reviews FAQ
Documentation Blog Support Community Free vs Pro Compare
Get Plugin

Combining CSS and JavaScript Files

4 min read

xSpeed Cache can merge several CSS or JavaScript files into one. This article explains what combining does, when it helps, when to avoid it, and how to keep specific files out of the merge.

What this does

When a page loads many separate CSS or JavaScript files, the browser has to request each one. Combining joins your local files into a single file per type, so the browser makes fewer requests.

For CSS, xSpeed Cache reads each local stylesheet, resolves @import statements, fixes url(...) paths so images and fonts still load, and writes everything to one combined file. The original handles are pulled from the queue, and a single combined stylesheet is loaded in their place.

For JavaScript, xSpeed Cache joins your local scripts into one file in the order WordPress enqueued them.

External files (hosted on other domains) are always left alone.

Why use it

Fewer requests can help on older servers that handle requests one connection at a time. If your host uses HTTP/1.1, combining can reduce the back-and-forth between the browser and the server.

When to use it and when to avoid it

Important: Combining pairs poorly with HTTP/2. On HTTP/2 hosts, the browser can already download many files at once efficiently, so combining them into one offers little benefit and can even slow things down. Only enable combining on HTTP/1.1 hosts.

If you are not sure which protocol your host uses, test your site speed with combining on and off and keep whichever is faster.

How to enable it

  1. Go to the xSpeed Cache settings and open the Minify panel.
  2. Turn on the combine option you want:
    • Combine CSS Files
    • Combine JavaScript Files
  3. Save your settings.
  4. Visit your site and check the layout and any interactive features.

Note: Combining only happens when there are at least two local files to merge. If a page has only one local file of that type, xSpeed Cache leaves it as is.

Settings explained

SettingWhat it doesDefault
Combine CSS FilesConcatenates enqueued local stylesheets into one fileOff
Combine JavaScript FilesConcatenates enqueued local scripts into one fileOff

Combine CSS Files joins your local stylesheets into a single file, with @import and url(...) paths resolved so nothing breaks. External CSS is left alone. This pairs poorly with HTTP/2, so only enable it on HTTP/1.1 hosts.

Combine JavaScript Files joins your local scripts into one file. External scripts, and scripts marked async or deferred, are left alone. If you hit dependency-order issues, turn this off. The combiner respects WordPress enqueue order, but inline scripts added with wp_add_inline_script can shift behavior.

Both default to off.

The exclude list

xSpeed Cache automatically keeps certain files out of the combine:

  • External scripts and stylesheets.
  • Scripts marked async or defer (via the WordPress strategy or xSpeed Cache’s defer setting).
  • Scripts that carry inline before, after, or data content, since they expect to run at their original spot.
  • CSS with a non-standard media type.

There is no separate combine-only exclusion field. The Defer / Delay Exclusions list controls defer and delay behavior, not the combiner.

Best practices

  • Enable combining only on HTTP/1.1 hosts. On HTTP/2, leave it off.
  • Test combine CSS and combine JavaScript separately so you can tell which one causes any issue.
  • Clear your cache after changing combine settings.

Troubleshooting

My layout broke after enabling Combine CSS. A stylesheet may depend on load order or a media type that did not combine cleanly. Turn off Combine CSS and check whether the layout returns to normal.

A script stopped working after enabling Combine JavaScript. This is usually a dependency-order problem, or a script that relies on inline code attached to it. Turn off Combine JavaScript. If the script also has defer or delay applied, you can keep that script out of those features using the Defer / Delay Exclusions list.

Combining seems to make my site slower. Your host may use HTTP/2, where combining offers little benefit. Turn combining off.

FAQ

Does combining minify my files too? Combining and minifying are separate settings. You can turn on either or both.

Will combining merge files from a CDN or another domain? No. Only local files are combined. External files are left untouched.

  • Minifying CSS, JavaScript, and HTML
  • Deferring and Delaying JavaScript
  • Loading CSS Asynchronously