How to Minify CSS and JavaScript (and When It Actually Helps)

To minify CSS and JavaScript means stripping out everything the browser doesn't need to run the code: comments, spaces, line breaks and, for JavaScript, long variable names. The code behaves exactly the same but downloads faster. Most sites should minify automatically with a build tool or plugin, and also serve files with gzip or Brotli compression.

Minification is one of the oldest speed tips going, and it's still worth doing. But it's also easy to overrate. On a site that already compresses its files, minifying might save a few kilobytes, while one oversized image costs hundreds. This guide explains what minification does, how it fits with compression, how to set it up on common platforms, and how to check the saving is real.

What minification does

Developers write code for people: indented, commented, with descriptive names. Browsers don't care about any of that. A minifier rewrites the file in the most compact form that still means the same thing.

Here's a small CSS example:

/* Primary button styles */
.button-primary {
    background-color: #ffffff;
    padding: 12px 24px;
    margin: 0px;
}

Minified:

.button-primary{background-color:#fff;padding:12px 24px;margin:0}

The comment, whitespace and line breaks are gone, #ffffff became #fff, and 0px became 0.

JavaScript minifiers go further:

// Calculate the total price including VAT
function calculateTotalPrice(netPrice, vatRate) {
    const totalPrice = netPrice * (1 + vatRate);
    return totalPrice;
}

Minified (with name mangling):

function calculateTotalPrice(n,t){return n*(1+t)}

The local variables were renamed to single letters and the unnecessary temporary variable removed. The function name stays because other code might call it. Good JavaScript minifiers, such as Terser and esbuild, also remove unreachable code and simplify expressions.

Minification vs compression: you want both

This is the part people often get confused about. Minification and compression are different, and they stack.

• Minification changes the file itself, permanently, using knowledge of CSS or JavaScript syntax.
• Compression (gzip or Brotli) is applied by the server when sending the file, and the browser decompresses it. It works on any text by finding repeated patterns.

Because compression is very good at squashing repeated whitespace, some people assume minification is pointless once gzip is on. It isn't. web.dev's guide to text compression calls compression an "additive optimization" and gives jQuery as an example:

Minified plus Brotli is less than half the size of unminified plus Brotli. Comments, long variable names and redundant code survive compression, so removing them first still helps. The same guide recommends Brotli over gzip where possible; our gzip vs Brotli guide explains how to check and enable each.

There's a second benefit that compression doesn't give you: smaller JavaScript files are quicker for the browser to parse once they arrive, because there's less code to read.

How to minify CSS and JavaScript

For a one-off file: use an online minifier

If you have a single stylesheet for a small static site, or you want to check how much a file would shrink, an online tool is the quickest option. Our free code minifier minifies CSS, JavaScript, HTML and JSON in your browser, shows the original and minified size, the percentage saved and an estimated gzip size. Nothing is uploaded to a server.

Keep the original readable file. Minified code is miserable to edit, and you'll want to make changes to the source and minify again. If you're handed a minified file you need to understand, the code beautifier turns it back into readable, indented code (though comments and original variable names can't be recovered).

For a site with a build process: let the build tool do it

If your site has a build step, minification is usually already on in production mode, or a one-line setting:

• Vite minifies JavaScript and CSS in production builds by default.
• webpack minifies JavaScript with Terser when mode is set to production; CSS minification needs a plugin such as css-minimizer-webpack-plugin.
• esbuild has a --minify flag.
• Parcel minifies in production builds.
• Laravel Vite, Next.js, Nuxt, Astro and similar frameworks minify their production output automatically.
• PostCSS setups often use cssnano; Lightning CSS is another fast option.

The important habit is to make sure you're deploying the production build, not the development one.

For WordPress: use a performance plugin, carefully

WordPress itself doesn't minify theme or plugin files. Performance and caching plugins add the option, often alongside file combining and deferring. Our guide to speeding up a WordPress site compares the common choices.

Two cautions:

1. Turn options on one at a time. JavaScript minification and combining are the settings most likely to break sliders, forms or checkout pages. Test after each change.
2. Clear every cache (plugin, server, CDN) after changing settings, or you'll be testing old files.

For hosted platforms

Shopify, Wix, Squarespace and Webflow handle much of this for you, and you have limited control over core files. Webflow has publishing options for minifying HTML, CSS and JavaScript. On Shopify, focus on the apps and custom code you add, since each app can load its own scripts. Some CDNs, such as Cloudflare, have offered automatic minification in the past and then retired the feature; check your CDN's current dashboard rather than relying on an old guide.

Source maps: debugging minified code

The obvious downside of minification is that error messages point to line 1, column 48,213 of an unreadable file. Source maps fix that. A source map is a separate file that maps the minified code back to the original, and browser DevTools use it automatically.

Most build tools generate source maps with a single setting. Whether to publish them on your live site is a choice: they make debugging production issues much easier, but they also expose your original source code to anyone who looks. Many teams generate them but upload them only to their error-tracking service.

How to measure the saving

Don't assume minification made a difference; check.

1. Open Chrome DevTools (F12) and go to the Network tab.
2. Tick "Disable cache" and reload the page.
3. Filter by CSS or JS. For each file, compare the transferred size (what came over the network, after compression) with the resource size (the uncompressed file).
4. Check the response headers. Click a file and look for content-encoding: br or gzip. If it's missing, compression isn't on, and that's a bigger win than minification.
5. Run a PageSpeed test. Our PageSpeed checker runs Lighthouse, which flags CSS and JavaScript files that could be minified, with an estimated saving.
6. Re-test after changes and compare the total transfer size of the page.

A quick rule of thumb: if a file has line breaks and comments when you open it in the browser, it isn't minified.

What minification won't fix

Minification makes files smaller. It doesn't change what's in them or when they load. Common speed problems it won't solve:

• Render-blocking resources. A minified stylesheet still blocks the page from painting until it's downloaded. See eliminating render-blocking resources.
• Unused code. A minified 300 KB framework you use 10% of is still mostly waste. Chrome's Coverage panel shows how much of each file runs.
• Too many third-party scripts. Chat widgets, trackers and ad tags are usually minified already; the problem is how many there are. Remove the ones you no longer use.
• Heavy images. On most small business sites, images outweigh CSS and JavaScript combined. Start with the image compressor.
• Slow servers. If the server takes a second to respond, file size isn't the bottleneck.

For the full picture, see how to reduce page size. Minification is a good habit and part of a tidy deployment, but treat it as one step among several. Make It Flow's free tools let you check each of these quickly, and the PageSpeed report shows which ones matter most for your site.

FAQ

Does minifying CSS and JavaScript improve SEO?

Indirectly, and usually by a small amount. Minification reduces file sizes, which can help pages load faster and improve Core Web Vitals such as Largest Contentful Paint. Google uses page experience as one of many signals, but content relevance matters far more. The main benefit is a faster site for visitors.

Is minification still necessary if I use gzip or Brotli?

Yes. Compression and minification work together. Compression handles repeated patterns but can't remove comments, long variable names or dead code. web.dev's jQuery example shows the minified, Brotli-compressed file is less than half the size of the unminified, Brotli-compressed one. Use both.

Can minifying JavaScript break my website?

It can, though modern minifiers are very reliable. Problems usually come from aggressive settings, combining files in the wrong order, or code that relies on function names. If something breaks after enabling minification in a plugin, turn options off one at a time to find the cause, and exclude the problem file.

What's the difference between minifying and uglifying?

They're mostly the same thing. "Uglify" comes from UglifyJS, an older JavaScript minifier that renamed variables and restructured code. Today the term usually means minification with name mangling. Terser, a successor to UglifyJS, and esbuild are the most widely used JavaScript minifiers.

Should I minify HTML too?

It's optional. HTML minification removes whitespace and comments, but compression already handles most of that, so the extra saving is usually small. It's worth doing if your build tool or platform does it automatically. Prioritise CSS, JavaScript and images first.

How do I un-minify a CSS or JavaScript file?

Use a code beautifier to restore indentation and line breaks so the code is readable. It can't bring back comments or original variable names that were removed. If you have access to the site's build process, look for the original source files or a source map instead.

Related reading

• Webflow SEO and Speed: Settings That Actually Matter: Webflow SEO and speed explained: page and CMS SEO fields, 301 redirects, sitemap, schema markup, image conversion, script weight, publishing and hosting.