Minification removes whitespace, comments, and shortens variable names in CSS, JavaScript, and HTML files. This reduces file size without affecting functionality.
What minification removes
- Whitespace and line breaks
- Code comments
- Unused code (dead code)
- Long variable names (renamed)
- Semicolons (where optional)
Before and after example
// Before minification
function calculateTotal(items) {
let total = 0;
for (const item of items) {
total += item.price;
}
return total;
}
// After minification
function calculateTotal(t){let e=0;for(const l of t)e+=l.price;return e}
Minification tools
- JavaScript: Terser, UglifyJS, esbuild
- CSS: cssnano, clean-css
- HTML: html-minifier
Minification in build tools
Most bundlers include minification:
- Webpack (TerserPlugin)
- Vite (built-in)
- Next.js (automatic)
Impact on performance
Minification typically reduces file sizes by 30-50%, improving:
- Download time
- Parse time
- Time to First Byte
How VitalSentinel handles this
Minification shrinks file size, which speeds up FCP and LCP by getting bytes to the browser faster. VitalSentinel's synthetic monitoring runs Lighthouse on every check and flags unminified CSS or JavaScript so you'll know when a build step misfires and ships uncompressed assets. Find out in hours, not weeks, when your bundler stops minifying.
Related Terms
Code Splitting
A technique that breaks JavaScript bundles into smaller chunks that can be loaded on demand, improving initial page load performance.
Critical Rendering Path
The sequence of steps the browser takes to convert HTML, CSS, and JavaScript into pixels on the screen.
JavaScript Execution Time
The time the browser spends parsing, compiling, and executing JavaScript code, which can block the main thread and delay interactivity.
Render Blocking
Resources that prevent the browser from rendering page content until they are fully downloaded and processed.