Webコードの圧縮方法：CSS、JavaScript、HTML
CSS、JS、HTMLの圧縮方法。ファイルサイズ削減、読み込み速度改善。
What is minification and why it matters
Minify removes unnecessary characters from source code without changing functionality: whitespace, line breaks, comments, and optionally renames variables.
Real impact: 50KB CSS → ~35KB (-30%). 200KB JS → ~120KB (-40%). Google uses Core Web Vitals for ranking. Amazon estimated 100ms latency costs 1% of sales.
Minify instantly with the NexTools code minifier.
How to use the NexTools minifier
The NexTools minifier: paste code, select type (CSS/JS/HTML), click "Minify", copy result. Shows reduction percentage and before/after size. All in browser.
To prettify minified code, the NexTools JSON formatter helps with JSON.
Minifying CSS: what gets removed and what doesn't
Removed: Whitespace, comments, trailing semicolons, unnecessary zeros (0.5px→.5px), units on zero (0px→0).
NOT removed: Selectors, property values, quoted strings.
Tools: cssnano, clean-css. With Tailwind/CSS Modules, minification is automatic.
Minifying JavaScript: from whitespace to tree shaking
Level 1: Whitespace removal (-20-30%).
Level 2: Mangling — rename variables to short names (-10-20% more).
Level 3: Dead code elimination — remove unreachable code.
Level 4: Tree shaking — remove unused module exports. Webpack, Rollup, esbuild do this automatically.
Tools: Terser (standard), esbuild (100x faster), SWC (Rust-based).
Warning: Aggressive minification can break code using Function.name or eval.
Minification vs compression (gzip/brotli): they complement each other
| Technique | What it does | Typical reduction | When applied |
|---|---|---|---|
| Minification | Removes unnecessary characters | 20-40% | Build time |
| Gzip | Binary compression | 60-80% | Server serving |
| Brotli | Improved compression | 70-85% | Server serving |
Real example: 200KB JS → minified 120KB → gzip 35KB → brotli 28KB. Total: 86% reduction.
For image compression, use the NexTools image compressor.
Automatic minification in build pipelines
Next.js: Auto-minifies JS/CSS with SWC in next build.
Vite: esbuild (JS) + Lightning CSS in vite build.
Webpack: TerserPlugin for JS, CssMinimizerPlugin for CSS.
Manual: npx terser input.js -o output.min.js -c -m
Source maps: debugging minified code
Minified code is unreadable. Source maps (.map) connect minified to original for debugging.
In production: Don't serve public source maps (exposes source). Use private maps in Sentry/Datadog only.
Measuring: how to know if minification helped
Before/after: Compare file sizes in Network panel.
Lighthouse: Shows "Minify CSS/JavaScript" suggestions.
Core Web Vitals: LCP improves with smaller files.
Verify JSON configs are still valid with the NexTools JSON validator.
このツールを試す：
ツールを開く→よくある質問
Can minification break my code
Rarely. JS mangling can break code using Function.name or eval. CSS/HTML minification almost never causes issues. Always test after minifying.
Should I minify in development or only production
Only production. Minified code is unreadable. Build tools auto-minify only for production.
What's the difference between minifying and gzip compression
Minification removes characters (20-40%). Gzip/Brotli compresses binary (60-85%). Apply both: minify first, then server compresses. Combined: 80-90% reduction.
Do modern frameworks auto-minify
Yes. Next.js, Vite, Nuxt, Angular all auto-minify in production builds.
What are source maps and should I use them
Maps connect minified code to original for debugging. In dev: always. In production: use private maps (error tracking only, not public).
How much does minification improve loading speed
Depends on original size. 200KB JS minified saves ~80KB (40%). With gzip/brotli, transfer drops to ~28KB (86% less). On 3G: ~1 second faster.