Last updated
HTML Compression vs Minification
HTML compression typically refers to two different things: minification (removing whitespace and comments from the HTML source) and HTTP compression (gzip/Brotli encoding applied by the web server). Both reduce the amount of data transferred, but they work at different levels. Minification reduces the raw file size; HTTP compression reduces the transfer size.
What HTML Minification Removes
| What's Removed | Example |
|---|---|
| HTML comments | <!-- TODO: fix this --> |
| Whitespace between tags | Newlines and indentation |
| Optional closing tags | </li>, </td> |
| Attribute quotes (sometimes) | class="foo" → class=foo |
| Default attribute values | type="text" on inputs |
| Inline CSS/JS whitespace | Spaces in style/script blocks |
html-minifier-terser
JavaScript
import { minify } from 'html-minifier-terser';
const result = await minify(htmlString, {
collapseWhitespace: true,
removeComments: true,
removeOptionalTags: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
minifyCSS: true,
minifyJS: true,
useShortDoctype: true
});
console.log(`Original: ${htmlString.length} bytes`);
console.log(`Minified: ${result.length} bytes`);