Complete Guide to HTML Minification: Optimize Your Web Pages for Performance
Learn how to minify your HTML code for faster web pages. Remove whitespace, comments and unnecessary attributes to reduce page size by 15-40%.
Why minify your HTML?
HTML is the skeleton of every web page. Every visit starts with downloading the HTML document, which then triggers the loading of CSS, JavaScript, and images. Leaner HTML means faster first render, better Largest Contentful Paint (LCP), and an improved user experience. HTML minification removes whitespace, comments, optional attributes, and optional closing tags to significantly reduce your page size. Whether you need a quick fix with our online HTML minifier or want to automate the process in your build pipeline, this guide covers everything you need to know about HTML minification.
Real-world performance impact
Here's real data from HTML minification on an e-commerce site with markup-heavy product pages:
Before optimization
After optimization
HTML minification benefits all types of websites:
Full optimization and best practices
HTML minification is most effective as part of a comprehensive optimization strategy. Combine it with <a href="/en/minify-css" class="text-primary hover:underline">CSS</a> and <a href="/en/minify-js" class="text-primary hover:underline">JavaScript</a> minification for maximum impact:
HTML minification is recommended in these situations:
Some situations where HTML minification is not recommended:
Always verify rendering after minification to catch regressions. HTML minification can sometimes affect display if whitespace between inline elements has a visual role. To diagnose issues, check our <a href="/en/blog/improve-core-web-vitals-minification" class="text-primary hover:underline">Core Web Vitals guide</a>.
What does HTML minification remove?
HTML minification goes beyond simple whitespace removal. Here's a concrete example:
Before
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Meta description for SEO -->
<meta name="description" content="My page">
<title>My Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div class="container">
<h1>Welcome</h1>
<p>This is a paragraph.</p>
<!-- TODO: add footer -->
</div>
</body>
</html>
// 420 bytes with formattingAfter
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="description" content="My page"><title>My Page</title><link rel="stylesheet" href="style.css"><script src="app.js"></script></head><body><div class="container"><h1>Welcome</h1><p>This is a paragraph.</p></div></body></html>
// 265 bytes minified = 37% reductionHTML minification performs several optimizations while preserving visual rendering:
Minify HTML online with FastMinify
The fastest way to minify HTML is using an online tool. No installation, no configuration — just paste your code and get optimized HTML in one click.
Step 1: Paste your HTML
Copy your HTML code and paste it into the left editor on the FastMinify HTML Minifier.
Step 2: Click Minify
Click the "Minify" button. The tool removes whitespace, comments, and unnecessary attributes instantly.
Step 3: Copy or download
Copy the minified HTML to your clipboard or download it as an .html file.
The <a href="/en/minify-html" class="text-primary hover:underline">FastMinify HTML Minifier</a> offers several features:
Programmatic HTML minification
The go-to library for HTML minification in Node.js. It offers granular control over each optimization:
Basic example
// Installation
// npm install html-minifier-terser
const { minify } = require('html-minifier-terser');
const html = `
<!DOCTYPE html>
<html>
<head>
<!-- Meta tags -->
<title>My Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<h1>Welcome</h1>
<p>Page content.</p>
</div>
</body>
</html>`;
const result = await minify(html, {
collapseWhitespace: true,
removeComments: true,
removeOptionalTags: true,
removeRedundantAttributes: true,
removeEmptyAttributes: true,
minifyCSS: true,
minifyJS: true
});
console.log(result);File minification
// Minify a complete HTML file
const fs = require('fs');
const { minify } = require('html-minifier-terser');
async function minifyHtmlFile(inputPath, outputPath) {
const html = fs.readFileSync(inputPath, 'utf8');
const minified = await minify(html, {
collapseWhitespace: true,
removeComments: true,
removeOptionalTags: true,
removeRedundantAttributes: true,
removeEmptyAttributes: true,
removeAttributeQuotes: true,
minifyCSS: true,
minifyJS: true,
sortAttributes: true,
sortClassName: true
});
fs.writeFileSync(outputPath, minified);
const originalSize = html.length;
const minifiedSize = minified.length;
const savings = ((originalSize - minifiedSize) / originalSize * 100).toFixed(1);
console.log(`Minified: ${originalSize} → ${minifiedSize} bytes (${savings}% reduction)`);
}
minifyHtmlFile('index.html', 'index.min.html');Automatically minify HTML during the build process with Webpack:
Configuration
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// ...
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
minify: {
collapseWhitespace: true,
removeComments: true,
removeRedundantAttributes: true,
removeEmptyAttributes: true,
minifyCSS: true,
minifyJS: true
}
})
]
};Usage
// Vite — automatic HTML minification in production
// vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
build: {
// Vite automatically minifies HTML in production
// To customize:
rollupOptions: {
output: {
// Asset configuration
}
}
}
});For Python projects (Django, Flask), use the htmlmin library:
Configuration
# Installation
# pip install htmlmin
import htmlmin
html = """
<!DOCTYPE html>
<html>
<head>
<!-- Meta -->
<title>My Page</title>
</head>
<body>
<div class="container">
<h1>Welcome</h1>
</div>
</body>
</html>
"""
minified = htmlmin.minify(html,
remove_comments=True,
remove_empty_space=True,
remove_all_empty_space=False # Preserve significant whitespace
)
print(minified)Usage
# Django middleware for automatic minification
# settings.py
MIDDLEWARE = [
'htmlmin.middleware.HtmlMinifyMiddleware',
'htmlmin.middleware.MarkRequestMiddleware',
# ... other middleware
]
HTML_MINIFY = True # Enable in production
# To exclude certain pages:
# Decorate the view with @htmlmin.decorators.not_minified_responseConclusion
HTML minification is a simple yet effective optimization that should be part of every web performance strategy. By removing whitespace, comments, and unnecessary attributes, you reduce page size by 15-40%, which directly translates to faster load times and better Core Web Vitals. Start with an online tool to quickly test the impact, then integrate minification into your build pipeline for automated, systematic optimization.
Related Articles
Learn how to minify JSON for APIs, config files, and data transfer. Reduce file sizes by 20-60% and improve your application performance.
Understand the differences between online minifiers and build tools. Learn when to use each approach to optimize your development workflow.
Learn how to unminify minified JavaScript for debugging. Transform unreadable code into formatted, understandable code in just a few clicks with our free tool.