How to use the CSS & JS Minifier
Minification reduces CSS and JS file size by 30–60% with no functional change. Smaller files load faster, which directly improves Core Web Vitals — a real ranking signal.
Paste your code
Drop in CSS or JS. The minifier auto-detects the language.
Pick the minification level
Standard strips whitespace and comments. Aggressive additionally renames variables and removes dead code (JS only). Use Standard for most cases.
Compare before/after sizes
Most CSS minifies 30–40%. Most JS minifies 40–60%. Aggressive JS minification can reach 70%+.
Replace your production file
Save the minified output as your production CSS/JS. Keep the unminified source in version control for editing.
Why minification matters for Core Web Vitals
Page load speed is a confirmed Google ranking signal. Minified CSS and JS load faster, parse faster, and execute faster. The improvement is measurable in Largest Contentful Paint and Total Blocking Time — both Core Web Vitals.
What minification removes
- Whitespace — newlines, indentation, spaces around operators.
- Comments — both inline (
// ...) and block (/* ... */). - Unnecessary semicolons — last statement in a block.
- Empty rules (CSS) — selectors with no declarations.
- Variable name shortening (JS, aggressive mode) —
userName→a.
Performance impact
- Smaller download — direct LCP win, especially on slow connections.
- Faster parse — minified JS parses in less time.
- Better gzip compression — minified files compress further than verbose ones.
- Lower bandwidth costs — at scale, CDN bills drop.
Frequently asked questions
What's the difference between minifying and compressing?
Minification removes characters from the source code itself (whitespace, comments). Compression (gzip, brotli) is applied at HTTP-transport level. They're complementary: minify the file, then compress the minified file. The combined reduction is typically 70–85% of original size.
Will minification break my code?
Standard minification (whitespace + comments only) is functionally identical to the original. Aggressive minification (variable renaming, dead-code elimination) can break code that relies on string-based reflection (eval, dynamic property access by name). Test thoroughly when using aggressive mode.
Should I minify in development?
No — keep development files unminified for debugging. Set up your build process to minify only on production builds. Most modern build tools (Webpack, Vite, esbuild) handle this automatically based on environment.
How much does minification reduce file size?
CSS typically minifies 30–40%. JavaScript minifies 40–60% with standard rules, 60–80% with aggressive variable renaming. Combined with gzip compression, the over-the-wire size drops 70–85% versus the original unminified file.
Does Google care if my CSS is minified?
Indirectly — Google measures page speed via Core Web Vitals (LCP, INP, CLS) and uses those as ranking signals. Minified CSS contributes to faster LCP. Google doesn't specifically reward minification; it rewards the speed minification produces.