How to Minify CSS and JavaScript Online
Reduce file size of CSS and JavaScript by removing whitespace, comments, and redundant code with our free Code Minifier tool.
Steps
Select your file type
Choose JavaScript or CSS from the mode selector. Each type uses a different minification algorithm — JavaScript minification also shortens variable names and removes dead code, while CSS minification focuses on whitespace, comment removal, and shorthand property consolidation.
Paste your code
Paste the full content of your .js or .css file into the input area. You can paste any size of code — from a small utility function to an entire application bundle.
Click Minify
Press the Minify button. The tool processes your code and outputs the minified version. You will see the original file size, minified file size, and percentage reduction displayed.
Review the output
Quickly scan the minified output to ensure it looks correct — it should be a single line (or a few lines) with all whitespace and comments removed. Verify the file size reduction matches your expectation.
Copy and deploy
Copy the minified code and replace the original file in your project, or save it as a separate .min.js or .min.css file. In production deployments, serve the minified version while keeping the original for development purposes.
Why Minification Matters for Web Performance
Every kilobyte of JavaScript and CSS that a browser needs to download, parse, and execute adds to page load time. Google's Core Web Vitals, which directly influence search rankings, measure how quickly content becomes visible and interactive. Minification is one of the fastest performance wins available: it requires no changes to functionality, reduces bandwidth costs, decreases parse time, and improves Time to First Byte on repeat visits because minified files are more cache-efficient. For a typical web page, CSS and JavaScript together account for 30–50% of total page weight. Reducing that by even 30% through minification can meaningfully improve Largest Contentful Paint (LCP) and Total Blocking Time (TBT) scores.
Minification vs Compression: Two Complementary Optimisations
Minification and compression (gzip or Brotli) are both important but work at different levels. Minification happens at build time and removes characters from the source file. Compression happens at transfer time — the server compresses the file before sending it over the network, and the browser decompresses it before using it. Both should be applied together for maximum benefit. Importantly, minification makes gzip compression more effective because it removes repetitive patterns (whitespace, repeated keywords) that the compression algorithm would have reduced anyway. A well-minified and gzip-compressed JavaScript file typically reaches 70–85% reduction from the original uncompressed, unminified size.
Source Maps: Debugging Minified Code
Minified code is nearly impossible to debug directly because variable names are meaningless and all code is on one line. Source maps solve this problem: they are a separate .map file that creates a mapping between minified code positions and the original source code. When source maps are present, browser developer tools automatically use them to show you the original code while debugging, even though the browser is running the minified version. Production deployments should use minified code and should either include source maps (for public debugging) or keep source maps on a private server accessible only to your team. Never ship un-minified JavaScript to production when performance matters.
Frequently Asked Questions
Minification removes whitespace, comments, and unnecessary characters while preserving the original variable and function names. Uglification (also called obfuscation) goes further by renaming variables and functions to short names (a, b, c...) and sometimes restructuring the code to make it harder to read. Uglification produces smaller files but makes debugging harder. Tools like Terser perform both minification and uglification when you enable the mangle option.
Properly written code should minify without breaking. However, some patterns can cause issues: JavaScript that relies on function.name or function.toString() will break if function names are mangled. CSS that uses IE-specific hacks with asterisks or underscores may be stripped. eval() in JavaScript with variable name references will break if those variables are renamed. Always test your minified code in a staging environment before deploying to production.
For production projects, a bundler like webpack, Vite, or Rollup is recommended because it handles minification as part of a complete build pipeline that also includes tree-shaking (removing unused code), code splitting, and module bundling. This online minifier is ideal for quick one-off tasks, legacy projects without a build pipeline, or when you need to quickly check how much a file can be compressed.
Typical CSS files see 20–40% reduction from minification. JavaScript files see 30–50% from minification alone, and up to 60–70% with uglification. The actual reduction depends on how much whitespace, comments, and long variable names the original code contains. Heavily commented or auto-generated code often shows larger reductions.