🛠️ Tool Xeno

Professional HTML Minifier

Advanced HTML minification with syntax highlighting, real-time preview, and comprehensive compression analytics. Optimize your HTML code for faster loading times and better performance.

Minification Options

Strip tags

Minimize spaces

Clean empty values

CSS & JS optimization

Original HTML

0 lines

Minified HTML

0 lines 
// Minified HTML will appear here...

Compression Statistics

0 B
Original Size
0 B
Minified Size
0%
Size Reduction
0 B
Bytes Saved
Compression Progress 0%

Detailed Analysis

Total Characters: 0
HTML Tags: 0
Attributes: 0
Comments Removed: 0
Whitespace Removed: 0
Empty Attrs Removed: 0
Processing Time: 0ms
Optimization Level: High
`; document.getElementById('originalHtml').value = sampleHTML; minifyHTML(); updateLineCount(); } // Minify HTML function function minifyHTML() { const startTime = performance.now(); const originalHTML = document.getElementById('originalHtml').value; if (!originalHTML.trim()) { clearResults(); return; } let minified = originalHTML; // Reset analytics analytics = { totalChars: originalHTML.length, htmlTags: 0, attributes: 0, commentsRemoved: 0, whitespaceRemoved: 0, emptyAttrsRemoved: 0, processingTime: 0 }; // Count HTML tags and attributes analytics.htmlTags = (originalHTML.match(/<[^>]+>/g) || []).length; analytics.attributes = (originalHTML.match(/\w+\s*=\s*["'][^"']*["']/g) || []).length; // Remove comments if (minifierOptions.removeComments) { const commentsBefore = (minified.match(//g) || []).length; minified = minified.replace(//g, ''); analytics.commentsRemoved = commentsBefore; } // Remove empty attributes if (minifierOptions.removeEmptyAttributes) { const emptyAttrsBefore = (minified.match(/\s+\w+\s*=\s*["'][\s]*["']/g) || []).length; minified = minified.replace(/\s+\w+\s*=\s*["'][\s]*["']/g, ''); analytics.emptyAttrsRemoved = emptyAttrsBefore; } // Collapse whitespace if (minifierOptions.collapseWhitespace) { const whitespaceBefore = minified.length; minified = minified .replace(/>\s+<') // Remove whitespace between tags .replace(/\s+/g, ' ') // Collapse multiple spaces .replace(/^\s+|\s+$/g, '') // Trim leading/trailing whitespace .replace(/\s+>/g, '>') // Remove space before closing tag .replace(/<\s+/g, '<'); // Remove space after opening tag analytics.whitespaceRemoved = whitespaceBefore - minified.length; } // Minify inline CSS and JS if (minifierOptions.minifyCSS) { minified = minified .replace(/]*>([\s\S]*?)<\/style>/gi, (match, css) => { const minifiedCSS = css .replace(/\/\*[\s\S]*?\*\//g, '') // Remove CSS comments .replace(/\s*{\s*/g, '{') .replace(/\s*}\s*/g, '}') .replace(/\s*;\s*/g, ';') .replace(/\s*:\s*/g, ':') .replace(/\s+/g, ' ') .trim(); return match.replace(css, minifiedCSS); }) .replace(/]*>([\s\S]*?)<\/script>/gi, (match, js) => { const minifiedJS = js .replace(/\/\*[\s\S]*?\*\//g, '') // Remove JS comments .replace(/\/\/.*$/gm, '') // Remove single-line comments .replace(/\s*{\s*/g, '{') .replace(/\s*}\s*/g, '}') .replace(/\s*;\s*/g, ';') .replace(/\s+/g, ' ') .trim(); return match.replace(js, minifiedJS); }); } analytics.processingTime = Math.round(performance.now() - startTime); // Display results displayMinifiedHTML(minified); updateStatistics(originalHTML, minified); updateAnalytics(); } // Display minified HTML with syntax highlighting function displayMinifiedHTML(minified) { const codeElement = document.querySelector('#minifiedHtml code'); codeElement.textContent = minified; // Trigger Prism.js highlighting if (typeof Prism !== 'undefined') { Prism.highlightElement(codeElement); } updateMinifiedLineCount(minified); } // Update statistics function updateStatistics(original, minified) { const originalSize = new Blob([original]).size; const minifiedSize = new Blob([minified]).size; const savings = originalSize - minifiedSize; const compressionRatio = originalSize > 0 ? (savings / originalSize * 100) : 0; document.getElementById('originalSize').textContent = formatFileSize(originalSize); document.getElementById('minifiedSize').textContent = formatFileSize(minifiedSize); document.getElementById('compressionRatio').textContent = compressionRatio.toFixed(1) + '%'; document.getElementById('bytesSaved').textContent = formatFileSize(savings); document.getElementById('compressionPercent').textContent = compressionRatio.toFixed(1) + '%'; // Update progress bar const progressBar = document.getElementById('progressBar'); progressBar.style.width = Math.min(compressionRatio, 100) + '%'; } // Update detailed analytics function updateAnalytics() { document.getElementById('totalChars').textContent = analytics.totalChars.toLocaleString(); document.getElementById('htmlTags').textContent = analytics.htmlTags; document.getElementById('attributes').textContent = analytics.attributes; document.getElementById('commentsRemoved').textContent = analytics.commentsRemoved; document.getElementById('whitespaceRemoved').textContent = analytics.whitespaceRemoved; document.getElementById('emptyAttrsRemoved').textContent = analytics.emptyAttrsRemoved; document.getElementById('processingTime').textContent = analytics.processingTime + 'ms'; // Determine optimization level let level = 'Low'; if (analytics.processingTime < 50 && analytics.whitespaceRemoved > 100) level = 'High'; else if (analytics.processingTime < 100) level = 'Medium'; document.getElementById('optimizationLevel').textContent = level; } // Update line counts function updateLineCount() { const original = document.getElementById('originalHtml').value; const lines = original ? original.split('\n').length : 0; document.getElementById('originalLines').textContent = lines + ' lines'; } function updateMinifiedLineCount(minified) { const lines = minified ? minified.split('\n').length : 0; document.getElementById('minifiedLines').textContent = lines + ' lines'; } // Clear all function clearAll() { document.getElementById('originalHtml').value = ''; document.querySelector('#minifiedHtml code').textContent = '// Minified HTML will appear here...'; clearResults(); updateLineCount(); } // Clear results function clearResults() { document.getElementById('originalSize').textContent = '0 B'; document.getElementById('minifiedSize').textContent = '0 B'; document.getElementById('compressionRatio').textContent = '0%'; document.getElementById('bytesSaved').textContent = '0 B'; document.getElementById('progressBar').style.width = '0%'; document.getElementById('compressionPercent').textContent = '0%'; document.getElementById('minifiedLines').textContent = '0 lines'; // Clear analytics Object.keys(analytics).forEach(key => { const element = document.getElementById(key); if (element) element.textContent = key === 'processingTime' ? '0ms' : '0'; }); document.getElementById('optimizationLevel').textContent = 'None'; } // Copy to clipboard function copyToClipboard() { const minifiedCode = document.querySelector('#minifiedHtml code').textContent; if (!minifiedCode || minifiedCode === '// Minified HTML will appear here...') { alert('No minified code to copy!'); return; } navigator.clipboard.writeText(minifiedCode).then(() => { const btn = document.getElementById('copyBtn'); const originalHTML = btn.innerHTML; btn.innerHTML = ''; btn.classList.add('bg-green-500'); setTimeout(() => { btn.innerHTML = originalHTML; btn.classList.remove('bg-green-500'); }, 2000); }).catch(() => { // Fallback for older browsers const textArea = document.createElement('textarea'); textArea.value = minifiedCode; document.body.appendChild(textArea); textArea.select(); document.execCommand('copy'); document.body.removeChild(textArea); alert('Code copied to clipboard!'); }); } // Format file size function formatFileSize(bytes) { if (bytes === 0) return '0 B'; const k = 1024; const sizes = ['B', 'KB', 'MB', 'GB']; const i = Math.floor(Math.log(bytes) / Math.log(k)); return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i]; } // Debounce function function debounce(func, wait) { let timeout; return function executedFunction(...args) { const later = () => { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; }