No Login Data Private Local Save

HTML Minifier - Online Compress Web Pages

13
0
0
0

HTML Minifier

Compress your HTML by removing whitespace, comments, and optional tags. Reduce file size for faster page loads and improved SEO performance.

Options:
Input HTML 0 B
Minified Output 0 B
0 B
Original Size
0 B
Minified Size
0 B
Bytes Saved
0%
Reduction

Frequently Asked Questions

HTML minification is the process of removing unnecessary characters from HTML source code without affecting how the browser renders the page. This includes stripping out comments, extra whitespace, line breaks, and optionally redundant attributes or closing tags. The result is a smaller file that loads faster, consumes less bandwidth, and can improve your site's Core Web Vitals and SEO rankings.

Yes, our minifier is safe. We protect the content inside <pre>, <code>, <textarea>, <script>, and <style> tags to preserve meaningful whitespace and code integrity. The default options (removing comments and collapsing whitespace) are 100% safe for all valid HTML documents. Advanced options like removing optional closing tags or attribute quotes are marked as experimental—use them with caution and always test the output.

Savings vary depending on your HTML structure. Typical reduction ranges from 10% to 30%. Pages with heavy commenting, deep indentation, and lots of whitespace see the most dramatic results. For example, a 100 KB HTML file might shrink to 70-85 KB. Combined with GZIP compression (which most web servers use), the total bandwidth savings can be substantial.

Indirectly, yes. Google uses page speed as a ranking factor, and minified HTML loads faster. Faster pages provide better user experience, lower bounce rates, and improved Core Web Vitals metrics (especially LCP and FID). While minification alone won't skyrocket your rankings, it's one of many technical SEO best practices that collectively make a measurable difference.

HTML minification removes redundant characters at the source code level, permanently reducing file size. GZIP compression is applied at the server level during transmission, temporarily compressing the file for network transfer. They work best together—minification reduces the raw byte count, and GZIP further compresses the already-lean file during delivery. Always use both for optimal performance.

Yes, in most cases. HTML comments are meant for developers, not end users. They add unnecessary bytes to your pages and can expose internal notes, TODOs, or structural hints to competitors. Exceptions include conditional comments for legacy browser support (rarely needed today) and license/attribution comments required by some open-source licenses. Our tool lets you toggle comment removal on or off depending on your needs.

Not perfectly. Minification is a lossy process—once comments and whitespace are removed, the original formatting cannot be exactly reconstructed. However, you can use an HTML beautifier/formatter (also known as a prettifier) to re-indent the code and restore readability. The logical structure remains intact; only the cosmetic formatting is lost. We recommend keeping a copy of the original, unminified source for development.

Our minifier automatically protects the content inside these tags to prevent breaking your page:
<pre> — preserves preformatted text spacing
<code> — protects inline code blocks
<textarea> — preserves form input content
<script> — prevents breaking JavaScript code
<style> — preserves CSS formatting
These protected blocks are excluded from whitespace collapsing and comment removal.

Yes, completely free! There are no file size limits, no registration requirements, and no hidden costs. All processing happens directly in your browser using client-side JavaScript—your HTML never leaves your device. You can minify as many files as you like, as often as you need, with full privacy and zero limitations.

HTML5 allows certain closing tags to be omitted, such as </li>, </p>, </td>, </tr>, and others. Browsers automatically infer where these tags should close. Removing them can save a few extra bytes, but it may cause rendering issues in older browsers or with complex nested structures. This option is marked as "Advanced"—only use it if you understand the trade-offs and thoroughly test your output.
`; // Minify function function minifyHTML(html, options) { const { removeComments, collapseWhitespace, removeOptionalTags, removeAttributeQuotes } = options; if (!html || !html.trim()) return ''; // Protect special tags content const protectedBlocks = []; const protectedTags = ['pre', 'code', 'textarea', 'script', 'style']; protectedTags.forEach(tag => { const regex = new RegExp(`(<${tag}[^>]*>)([\\s\\S]*?)(<\\/${tag}>)`, 'gi'); html = html.replace(regex, (match, openTag, content, closeTag) => { const placeholder = `___PROTECTED_BLOCK_${protectedBlocks.length}___`; protectedBlocks.push({ open: openTag, content: content, close: closeTag }); return placeholder; }); }); // 1. Remove HTML comments (but not IE conditional comments if we want to be safe) if (removeComments) { // Remove standard comments, preserve conditional comments html = html.replace(//g, ''); // Also remove empty conditional comments that may be leftover html = html.replace(//g, ''); } // 2. Collapse whitespace if (collapseWhitespace) { // Remove whitespace between tags html = html.replace(/>\s+<'); // Collapse multiple whitespace characters into single space (in text nodes) html = html.replace(/\s{2,}/g, ' '); // Remove leading/trailing whitespace html = html.trim(); } // 3. Remove optional closing tags (experimental) if (removeOptionalTags) { const optionalCloseTags = [ '', '', '', '', '', '

', '', '', '', '', '', '', '', '' ]; optionalCloseTags.forEach(tag => { const escaped = tag.replace(/\//g, '\\/'); const regex = new RegExp(escaped, 'gi'); html = html.replace(regex, ''); }); } // 4. Remove attribute quotes where safe if (removeAttributeQuotes) { // Only remove quotes around values without spaces/special chars html = html.replace(/=("|')([^"'\s><=`]+)\1/g, '=$2'); } // Restore protected blocks protectedBlocks.forEach((block, index) => { const placeholder = `___PROTECTED_BLOCK_${index}___`; html = html.replace(placeholder, block.open + block.content + block.close); }); return html; } // Format bytes function formatBytes(bytes) { if (bytes === 0) return '0 B'; if (bytes < 1024) return bytes + ' B'; if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB'; return (bytes / 1048576).toFixed(2) + ' MB'; } // Update stats function updateStats(original, minified) { const originalBytes = new Blob([original]).size; const minifiedBytes = new Blob([minified]).size; const savedBytes = originalBytes - minifiedBytes; const percent = originalBytes > 0 ? Math.round((savedBytes / originalBytes) * 100) : 0; $inputSizeBadge.text(formatBytes(originalBytes)); $outputSizeBadge.text(formatBytes(minifiedBytes)); $statOriginal.text(formatBytes(originalBytes)); $statMinified.text(formatBytes(minifiedBytes)); $statSaved.text(savedBytes >= 0 ? formatBytes(savedBytes) : '0 B'); $statPercent.text(percent + '%'); $progressBar.css('width', percent + '%').attr('aria-valuenow', percent); // Color the savings stat if (percent > 20) { $statPercent.css('color', '#16a34a'); } else if (percent > 5) { $statPercent.css('color', '#ca8a04'); } else { $statPercent.css('color', '#64748b'); } } // Perform minification function performMinify() { const inputHTML = $input.val(); if (!inputHTML.trim()) { $output.val(''); updateStats('', ''); $outputSizeBadge.text('0 B'); return; } const options = { removeComments: $('#opt-remove-comments').is(':checked'), collapseWhitespace: $('#opt-collapse-whitespace').is(':checked'), removeOptionalTags: $('#opt-remove-optional-tags').is(':checked'), removeAttributeQuotes: $('#opt-remove-quotes').is(':checked') }; const minified = minifyHTML(inputHTML, options); $output.val(minified); updateStats(inputHTML, minified); } // Show toast function showToast(message, icon = 'check-circle') { const $toast = $(`
${message}
`); $toastContainer.append($toast); setTimeout(() => { $toast.fadeOut(300, function() { $(this).remove(); }); }, 2200); } // Copy to clipboard function copyToClipboard(text) { if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(text).then(() => { showToast('Copied to clipboard!', 'check-circle'); }).catch(() => { fallbackCopy(text); }); } else { fallbackCopy(text); } } function fallbackCopy(text) { const $temp = $('