MAKZR
Loading Html Minifier...

HTML Minifier

Compress and minify your HTML code to reduce file size and improve website performance. Remove unnecessary whitespace and comments.

Minification Options

Input HTML

Characters: 0

Minified HTML

Characters: 0

About HTML Minification

What is HTML Minification?

HTML minification is the process of removing unnecessary characters from HTML code without changing its functionality. This includes removing whitespace, comments, and empty lines to reduce file size.

Benefits

  • • Faster page load times
  • • Reduced bandwidth usage
  • • Better SEO performance
  • • Improved user experience

What Gets Removed?

  • Comments:
  • Extra Whitespace: Multiple spaces, tabs
  • Empty Lines: Blank lines between elements
  • Line Breaks: Unnecessary line breaks

Note: Always test your minified HTML to ensure it works correctly, especially if you have inline JavaScript or CSS that depends on whitespace.

`; function updateCharCount() { inputCount.textContent = htmlInput.value.length.toLocaleString(); outputCount.textContent = htmlOutput.value.length.toLocaleString(); if (htmlInput.value.length > 0 && htmlOutput.value.length > 0) { const reduction = ((htmlInput.value.length - htmlOutput.value.length) / htmlInput.value.length * 100); compressionRatio.textContent = `${reduction.toFixed(1)}% reduction`; } else { compressionRatio.textContent = ''; } } function minifyHTML() { let html = htmlInput.value; if (!html.trim()) { alert('Please enter some HTML code to minify.'); return; } // Get options const removeComments = document.getElementById('removeComments').checked; const removeWhitespace = document.getElementById('removeWhitespace').checked; const removeEmptyLines = document.getElementById('removeEmptyLines').checked; // Remove HTML comments if (removeComments) { html = html.replace(//g, ''); } // Remove extra whitespace if (removeWhitespace) { // Remove leading/trailing whitespace from lines html = html.replace(/^\s+|\s+$/gm, ''); // Replace multiple spaces with single space html = html.replace(/\s{2,}/g, ' '); // Remove whitespace around tags html = html.replace(/>\s+<'); } // Remove empty lines if (removeEmptyLines) { html = html.replace(/^\s*\n/gm, ''); } // Final cleanup html = html.trim(); htmlOutput.value = html; updateCharCount(); } // Event listeners htmlInput.addEventListener('input', updateCharCount); minifyBtn.addEventListener('click', minifyHTML); document.getElementById('clearInput').addEventListener('click', () => { htmlInput.value = ''; htmlOutput.value = ''; updateCharCount(); }); document.getElementById('loadSample').addEventListener('click', () => { htmlInput.value = sampleHTML; updateCharCount(); }); document.getElementById('copyOutput').addEventListener('click', async () => { if (!htmlOutput.value) { alert('No minified HTML to copy.'); return; } try { await navigator.clipboard.writeText(htmlOutput.value); const btn = document.getElementById('copyOutput'); const originalText = btn.innerHTML; btn.innerHTML = 'Copied!'; setTimeout(() => { btn.innerHTML = originalText; lucide.createIcons(); }, 2000); } catch (err) { alert('Failed to copy to clipboard.'); } }); document.getElementById('downloadOutput').addEventListener('click', () => { if (!htmlOutput.value) { alert('No minified HTML to download.'); return; } const blob = new Blob([htmlOutput.value], { type: 'text/html' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'minified.html'; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); }); // Auto-minify on input change htmlInput.addEventListener('input', () => { if (htmlInput.value.trim()) { minifyHTML(); } else { htmlOutput.value = ''; updateCharCount(); } }); // Initial count updateCharCount();