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

Minifying CSS, JavaScript, and HTML

3 min read

xSpeed Cache can shrink your site’s code so pages download faster. This article explains what minification is and how to turn it on for HTML, CSS, and JavaScript.

What this does

Minification removes the parts of a file that browsers do not need: extra spaces, line breaks, and comments. The code still works exactly the same, but the file is smaller.

xSpeed Cache handles three types of code:

  • HTML — the page markup that WordPress sends to the browser.
  • CSS — your stylesheets (the files that control how the site looks).
  • JavaScript — the scripts that add behavior to the page.

For CSS and JavaScript, xSpeed Cache only touches local files that your site enqueues. It minifies each file once, saves a cached copy on disk, and points the page at that cached copy. External files (hosted on other domains) are left untouched.

Why use it

Smaller files mean fewer bytes to download. That can lower page weight and help pages load a little faster, especially on slower connections.

How to enable it

  1. Go to the xSpeed Cache settings and open the Minify panel.
  2. Turn on the type of minification you want:
    • Minify HTML
    • Minify CSS
    • Minify JavaScript
  3. Save your settings.
  4. Visit your site in a fresh browser tab and check that pages still look and work correctly.

Tip: Turn on one option at a time and check your site after each. If something breaks, you will know which setting caused it.

Settings explained

SettingWhat it doesDefault
Minify HTMLStrips whitespace and comments from HTML outputOff
Minify CSSCompresses and rewrites enqueued local stylesheetsOff
Minify JavaScriptCompresses enqueued local scriptsOff

Minify HTML removes whitespace and comments from the page markup. It is safe on most themes. Content inside <pre>, <textarea>, <script>, and <style> is left alone so it is not changed by accident.

Minify CSS compresses and rewrites your enqueued local stylesheets. External CSS is left untouched.

Minify JavaScript compresses your enqueued local scripts. If you run into script-loading conflicts on the frontend, turn this off.

All three default to off so nothing changes until you choose to enable it.

Safe-minify fallback

xSpeed Cache includes safety checks so a bad minify result does not break your page.

  • Already-minified files are skipped. If a file name contains .min., xSpeed Cache leaves it as it is.
  • Broken output is rejected. After minifying a CSS or JavaScript file, xSpeed Cache compares the original and the minified version. If the structure does not match (for example, brackets or backticks do not line up), xSpeed Cache throws away the minified copy and serves the original file instead.

This means that if minification ever produces a file that looks wrong, your site keeps using the original, working file.

Note: When WP_DEBUG is enabled in WordPress, xSpeed Cache automatically skips HTML minification. This makes debugging easier because you see the raw markup.

Best practices

  • Enable one minify option at a time and test your site after each.
  • Clear your cache after changing minify settings so visitors get the new files.
  • If you use a developer tool, you can skip minification with the xspeed_skip_minify filter.

Troubleshooting

A page looks broken or a script stopped working after enabling minify. Turn off the related minify option (CSS or JavaScript) and check whether the problem goes away. If it does, that file does not minify cleanly. You can leave that option off, or use combine and defer settings selectively instead.

My already-minified files are not getting smaller. That is expected. xSpeed Cache skips files that are already minified (those with .min. in the name).

I need to disable minification temporarily for debugging. You can toggle the option off in the admin UI, enable WP_DEBUG to skip HTML minification, or use the xspeed_skip_minify filter.

FAQ

Does minify change my source files? No. Your original files are left in place. xSpeed Cache creates separate minified copies in its own cache directory and serves those.

Will minify touch files from other sites or a CDN? No. Only local enqueued files are minified. External files are left untouched.

  • Combining CSS and JavaScript Files
  • Deferring and Delaying JavaScript
  • Loading CSS Asynchronously
  • Removing Query Strings