Code Minifier

Minify HTML, CSS, and JavaScript by removing whitespace, comments, and unnecessary characters. Shows original size, minified size, and savings percentage.

Key features

Minifies HTML, CSS, and JavaScript code
Shows original size, minified size, and savings percentage
Download minified file directly
All processing happens in your browser

Guide

Code minification reduces file size by removing characters that are necessary for human readability but not for machine execution. Whitespace, line breaks, comments, and sometimes unnecessary syntax are stripped away. The result is a file that performs identically to the original but downloads faster. The code minifier tool handles HTML, CSS, and JavaScript, showing you the original size, minified size, and the percentage of bytes saved. Minification is a standard step in web performance optimization. Every byte removed from your CSS, JavaScript, and HTML files reduces page load time. On a fast connection, the difference might be milliseconds. On a slow mobile connection, it can be seconds. When multiplied across all the files a page loads and all the users who visit, the cumulative bandwidth savings are substantial. To use the tool, select the language (HTML, CSS, or JavaScript), paste your code into the input area, and the minified output appears immediately. You can copy the minified code with one click. The tool shows three numbers: original size in bytes, minified size in bytes, and the savings percentage. These numbers help you gauge whether minification is worthwhile for a particular file. CSS minification removes whitespace between selectors, properties, and values. It strips comments. It removes the last semicolon before a closing brace (which CSS allows you to omit). It collapses multiple whitespace characters into single spaces where space is required. A well-commented, neatly formatted CSS file can shrink by 20 to 40 percent through minification alone. For CSS, the minifier preserves all functional aspects of your stylesheet. Media queries, selector specificity, property values, and @import rules remain intact. Only characters that have no effect on rendering are removed. The minified CSS produces the exact same visual output as the original. JavaScript minification is more complex. The minifier removes whitespace and comments, but JavaScript has more syntax rules about where whitespace is required. A space between a keyword and an identifier (like "var x") cannot be removed. A space between two operators sometimes can be. The tool handles these rules correctly to produce valid, executable JavaScript. JavaScript savings are typically higher than CSS because JavaScript files tend to have more comments, longer variable names, and more verbose formatting. A JavaScript file can shrink by 30 to 60 percent through basic minification. Advanced minifiers also rename variables to shorter names (mangling), but this tool focuses on whitespace and comment removal, which is the safest approach when you need to debug the code later. HTML minification removes whitespace between tags, strips HTML comments, and collapses whitespace within text content where appropriate. HTML is sensitive to whitespace in certain contexts (inside <pre> and <code> tags, for example), so the minifier preserves whitespace in those elements. The savings from HTML minification are usually 10 to 25 percent. The tool is useful for quick, one-off minification tasks. If you are editing a CSS file directly on a server, you can minify it through this tool before uploading. If you receive unminified code from a vendor and need to reduce its size, paste it in and copy the output. If you are debugging and want to compare the size of your code before and after optimization, the size display gives you the numbers. For production deployments, most teams use build tools like Webpack, Vite, Rollup, or esbuild that include minification as part of the build pipeline. The browser-based tool does not replace those workflows. It complements them by providing a quick way to minify code outside of a build system, check the output of your build tool, or process standalone files that are not part of a larger project. The savings percentage gives you a concrete metric to discuss performance with stakeholders. Saying "we reduced our CSS by 35 percent through minification" is more compelling than saying "we removed comments and whitespace." The tool provides this number automatically, which is useful for reports and optimization audits. When working with CSS, certain patterns yield more minification savings than others. Large comment blocks at the top of files (license headers, documentation) are common and get stripped entirely. Heavily indented nested selectors lose significant whitespace. Commented-out old code is removed. If your CSS file has a lot of these patterns, the savings will be at the higher end of the range. JavaScript patterns that yield high savings include JSDoc comments, inline explanatory comments, debug logging statements (though the basic minifier does not remove console.log calls, which require dead code elimination), and verbose formatting with blank lines between functions. Framework-generated code often includes extensive comments that minification removes. HTML savings depend on your templating style. If your HTML includes many comments for developer orientation (marking where sections start and end, noting component boundaries), minification removes all of these. If your HTML is already compact, the savings will be modest. The tool does not modify your original code. The input and output are separate. You can compare them side by side to verify that the minification looks correct. This is particularly useful if you are learning what minification does. Seeing the before and after teaches you which characters are safe to remove and which are necessary. Minification is distinct from compression. Minification changes the file content by removing unnecessary characters. Compression (gzip, brotli) encodes the file content more efficiently without changing it. The two work together: minification reduces the raw file size, and then compression reduces the transfer size further. A file that is both minified and gzip-compressed is significantly smaller than one that is only compressed. To illustrate: a 100KB CSS file might minify to 65KB (35 percent savings). That 65KB file might gzip-compress to 12KB for transfer. The same 100KB file without minification might gzip-compress to 18KB. So minification saved 6KB of transfer size even after compression. Over millions of page loads, those 6KB add up to meaningful bandwidth and cost savings. The tool runs entirely in your browser. Your code is not sent to any server. This matters for proprietary code, client projects under NDA, and any code you do not want leaving your machine. You can minify confidential source files without any privacy concerns. For developers working on WordPress, Shopify, or other CMS platforms where build tools are not part of the standard workflow, the browser-based minifier fills a gap. You can minify your custom CSS or JavaScript before pasting it into the CMS's code editor. This improves page performance without requiring any server-side build configuration. The tool handles large files efficiently because it runs on your device's processor. There is no upload time and no server queue. A 500KB JavaScript file minifies in under a second on a modern computer. This makes the tool practical for files of any size you are likely to encounter in web development. When debugging minified code, having the original unminified version is important. The tool does not save your input, so keep your original files intact. Minification is a one-way transformation for deployment. You edit the original files during development and minify them for production. Some developers minify inline CSS and JavaScript within HTML files. The tool handles each language separately, so you would need to extract the CSS or JavaScript, minify it, and paste it back into the HTML. For inline code, the savings are usually small in absolute terms but can still contribute to overall page weight reduction. The percentage display helps you set realistic expectations. If your CSS file is 10KB and minification saves 30 percent, you gain 3KB. That is useful but not transformative. If your JavaScript file is 200KB and minification saves 50 percent, you gain 100KB. That makes a noticeable difference in page load time. The tool helps you identify which files offer the most savings and deserve the most attention. For front-end performance audits, run each of your CSS and JavaScript files through the tool and record the savings. This produces a table of files ranked by potential savings. Start optimizing the files with the largest absolute savings first, since those will have the biggest impact on user experience. The minified output is valid, standard code that works in all browsers and environments that support the original code. No functionality is changed. No features are removed. The tool is a safe optimization step that reduces size without introducing risk. CSS minification also handles vendor prefixes correctly. Properties like -webkit-transform, -moz-transition, and -ms-flex-direction are preserved exactly as written. The minifier does not remove or consolidate vendor prefixes because different browsers still rely on them for older properties. The whitespace around these properties is removed, but the properties themselves remain intact. For CSS custom properties (CSS variables), the minifier preserves the variable declarations and references. A declaration like --primary-color: #3498db keeps its value. References like var(--primary-color) are not altered. The minifier only removes the whitespace and comments surrounding these declarations, not the declarations themselves. JavaScript template literals (backtick strings) require special handling during minification. The whitespace inside template literals is significant and must be preserved. The tool recognizes template literals and leaves their content unchanged while minifying the surrounding code. This prevents bugs that would occur if internal template whitespace were removed. For JavaScript, regular expression literals also need careful treatment. A regex like /\s+/g contains characters that look like operators and whitespace to a simple text processor. The minifier recognizes regex literals and preserves them verbatim. This is important because modifying regex content would change the program's behavior. Source maps are not generated by this browser-based tool. Build pipeline minifiers like Terser and cssnano produce source maps that link the minified code back to the original source for debugging. If you need source map support, use a build tool. The browser-based tool is designed for quick tasks where source maps are not needed. For agencies that manage multiple client websites, the tool provides a fast way to minify code during manual deployments. Download the client's CSS or JavaScript file, paste it into the tool, copy the minified output, and upload it. This is faster than setting up a build pipeline for a small site that only has one or two custom files. The tool can also help you understand third-party code. If you download a minified library and want to compare its size to the unminified version, paste the unminified source into the tool. The resulting minified output should be close in size to the distributed minified file. If there is a large discrepancy, the distributed file may use additional optimizations like variable mangling or tree shaking that go beyond basic minification. When minifying CSS for email, be aware that some email clients have strict size limits for embedded stylesheets. Gmail, for example, clips emails that exceed a certain size. Minifying the CSS in your email template helps keep the total email size under these limits. The tool gives you the exact byte count so you can verify that your email stays within bounds. Performance budgets are increasingly common in web development teams. A performance budget sets a maximum size for each type of resource. The minifier helps you check whether your CSS and JavaScript files meet the budget. If a file exceeds the budget after minification, you know that the code itself needs to be reduced through refactoring or removal, not just through whitespace removal. For CSS frameworks like Bootstrap, Tailwind, and Foundation, the unminified source files are large because they include extensive comments, documentation, and formatting. Running the unminified version of Bootstrap through the tool shows you the size difference between the development and production versions. This helps you understand why production builds ship minified versions and why using the unminified version in production is a performance problem. JavaScript libraries have similar characteristics. A library like Lodash unminified is over 500KB. Minified, it drops to about 70KB. The tool demonstrates this reduction and helps you appreciate why CDNs serve minified versions. If you are evaluating whether to include a library in your project, pasting the unminified source into the tool gives you the minified size, which is the actual cost to your users. For CSS animations and transitions, minification does not affect timing, easing, or any visual behavior. A keyframe animation with detailed comments about each step minifies to the same functional animation without the comments. The rendered output on screen is identical. This makes minification safe even for complex animation-heavy stylesheets. HTML minification has special rules for whitespace in inline elements. A space between two inline elements (like two adjacent span tags) affects the visual layout because the browser renders it as a space character between the elements. The minifier preserves this space to avoid layout shifts. Between block elements, whitespace has no visual effect and is safely removed. For Single Page Applications (SPAs), JavaScript minification is especially important because the entire application code downloads on initial page load. A React or Vue application might have 500KB to 2MB of JavaScript before minification. Reducing this by 30 to 50 percent through minification significantly improves the time to interactive, which is a Core Web Vital that affects both user experience and search ranking. The tool does not perform tree shaking (removing unused code) or code splitting (dividing code into smaller chunks). These are optimization techniques that require knowledge of the application's import graph and are handled by build tools like Webpack and Rollup. Minification is a simpler, standalone optimization that works on any file without needing to understand the broader codebase. For developers who write CSS preprocessors like SASS or LESS, the compiled CSS output is what gets minified. The preprocessor source files contain variables, mixins, and nesting that compile to standard CSS. Run the compiled output through the minifier to see how much further it can shrink. If the compiled CSS is very large, the minification savings give you a metric to justify refactoring the SASS source to produce leaner output. Browser caching interacts with minification in an important way. Once a browser caches a minified file, subsequent page loads do not re-download it. The minification saves bandwidth on the first visit and whenever the cache expires. If your site has high return traffic, the first-visit savings still matter because every new visitor pays the full download cost. The tool can serve as a teaching aid for junior developers. Paste a well-formatted file into the tool and show the minified output. Point out what was removed and what was kept. Explain why comments disappear, why indentation goes away, and why the code still works. This visual demonstration builds understanding faster than a lecture about the minification concept. For WordPress theme developers, the Customizer often includes fields for custom CSS. Minifying your custom CSS before pasting it into the Customizer reduces the stored data and improves page load for visitors. Since the Customizer stores CSS in the database, smaller code also means slightly faster database queries on each page load. When minifying third-party embed codes (like analytics scripts, chat widgets, or advertising tags), verify that the minified version works correctly by testing it in a staging environment. Most embed codes are already minified by the provider, but if you receive unminified code, running it through the tool can reduce its size. Always test the minified version because embed codes sometimes contain strings that look like removable whitespace but are actually significant. The tool helps settle debates about code formatting standards. Some developers argue that compact code is faster to scan. Others argue that well-formatted code with comments is more maintainable. The tool demonstrates that both approaches produce identical machine-executed code. Format for readability during development, minify for performance during deployment. The two goals do not conflict when minification is part of the pipeline. For CSS Grid and Flexbox layouts, the minifier correctly handles multi-value properties. A property like grid-template-columns: repeat(3, 1fr) minifies correctly because the tool preserves the values inside parentheses. Similarly, calc() expressions like width: calc(100% - 20px) are preserved intact. The minifier only removes unnecessary whitespace around these properties, not within them. For developers who use CSS-in-JS solutions (styled-components, Emotion, CSS Modules), the output CSS is usually already minified by the build tool. The browser-based minifier is more relevant for developers who write traditional CSS files. If you maintain a project with both CSS files and CSS-in-JS, the tool handles the CSS files while the build tool handles the CSS-in-JS output. For serverless functions and edge workers (Cloudflare Workers, AWS Lambda@Edge, Vercel Edge Functions), JavaScript bundle size directly affects cold start time. Minifying the function code reduces the bytes that need to be loaded when the function spins up from cold. The tool shows you the minified size, which you can compare against the platform's size limits and cold start benchmarks. CSS minification is relevant for critical CSS strategies. Critical CSS extracts the styles needed for above-the-fold content and inlines them in the HTML head. Because this CSS is inline and cannot be cached separately, every byte matters. Minifying the critical CSS before inlining it reduces the HTML document size, which directly affects First Contentful Paint time. The tool does not alter CSS variable fallback values. A declaration like color: var(--brand-color, #333333) keeps its fallback value intact. This is important because the fallback value is functional code that activates when the variable is undefined. Removing or modifying it would change the visual output under certain conditions. For email campaigns with many recipients, even small CSS savings multiply. A newsletter with 2KB of extra CSS sent to 100,000 subscribers wastes 200MB of bandwidth per send. Minifying the CSS once saves that bandwidth on every send. The tool makes this optimization trivial to implement.

Frequently asked questions

What is minification?

Minification removes unnecessary characters (whitespace, comments) from code without changing its functionality, making files smaller.

Will minification break my code?

Basic minification (whitespace/comment removal) is safe. For production use, consider dedicated tools like Terser for JS.