Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Page</title>
</head>
<body>
<header>
<h1>Welcome</h1>
</header>
<main>
<p>This is content</p>
</main>
</body>
</html>Size: ~230 bytes (with whitespace and indentation)
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>My Page</title></head><body><header><h1>Welcome</h1></header><main><p>This is content</p></main></body></html>
Size: ~165 bytes (28% smaller!)
All unnecessary spaces, tabs, and newlines between tags
HTML comments (<!-- comment -->) are removed
Attributes like disabled="" become disabled
Quotes around simple attribute values (class="test" → class=test)
Some closing tags like </li> and </p> (when safe)
Node.js package for minifying HTML
npm install html-minifierMinify HTML during build process
npm install html-loader --save-devTask runner for HTML minification
npm install gulp-htmlmin --save-devWeb-based minifiers for quick testing
Combine with other optimizations:
{
"scripts": {
"build": "npm run minify-html",
"minify-html": "html-minifier --input-dir src --output-dir dist --collapse-whitespace --remove-comments --minify-css --minify-js"
},
"devDependencies": {
"html-minifier": "^4.0.0"
}
}npm run build