Performance Test

Analyze HTML performance

HTML Code

How to Use

Enter Input

Enter your input in the input area above.

Configure Options

Configure any options if available.

Process

Click the convert/process button.

Get Result

View the result in the output area.

\n\n

\n \n

Welcome

This is a sample page.

\n \n'; function initPerformanceTester() { function formatBytes(bytes) { if (bytes < 1024) return bytes + ' B'; if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'; return (bytes / (1024 * 1024)).toFixed(2) + ' MB'; } function analyze() { var html = document.getElementById('htmlInput').value; if (!html.trim()) { showToast('Please enter HTML code to analyze'); return; } var suggestions = []; var score = 100; var details = []; // HTML size var htmlSize = new Blob([html]).size; details.push({ label: 'HTML Document Size', value: formatBytes(htmlSize) }); if (htmlSize > 100000) { score -= 15; suggestions.push({ type: 'bad', text: 'Large HTML document (' + formatBytes(htmlSize) + '). Consider splitting into multiple pages or reducing inline content.' }); } else if (htmlSize > 50000) { score -= 5; suggestions.push({ type: 'warn', text: 'HTML document is somewhat large (' + formatBytes(htmlSize) + '). Consider optimizing content.' }); } else { suggestions.push({ type: 'good', text: 'HTML document size is good (' + formatBytes(htmlSize) + ').' }); } // DOM elements var parser = new DOMParser(); var doc = parser.parseFromString(html, 'text/html'); var allElements = doc.querySelectorAll('*'); var elementCount = allElements.length; details.push({ label: 'DOM Elements', value: elementCount }); if (elementCount > 1500) { score -= 15; suggestions.push({ type: 'bad', text: 'Too many DOM elements (' + elementCount + '). This can slow down rendering. Consider reducing nested elements.' }); } else if (elementCount > 800) { score -= 5; suggestions.push({ type: 'warn', text: 'Relatively high DOM element count (' + elementCount + '). Consider simplifying the structure.' }); } else { suggestions.push({ type: 'good', text: 'DOM element count is reasonable (' + elementCount + ').' }); } // Images var images = doc.querySelectorAll('img'); var imgCount = images.length; details.push({ label: 'Images', value: imgCount }); var missingAlt = 0; var missingDimensions = 0; images.forEach(function(img) { if (!img.getAttribute('alt')) missingAlt++; if (!img.getAttribute('width') && !img.getAttribute('height')) missingDimensions++; }); if (missingAlt > 0) { score -= 5 * Math.min(missingAlt, 3); suggestions.push({ type: 'bad', text: '' + missingAlt + ' image(s) missing alt attribute. Add descriptive alt text for accessibility and SEO.' }); } if (missingDimensions > 0) { score -= 5; suggestions.push({ type: 'warn', text: '' + missingDimensions + ' image(s) missing width/height. Specify dimensions to prevent layout shift (CLS).' }); } if (imgCount > 0 && missingAlt === 0 && missingDimensions === 0) { suggestions.push({ type: 'good', text: 'All images have alt attributes and dimensions.' }); } // CSS references var cssLinks = doc.querySelectorAll('link[rel="stylesheet"]'); var inlineStyles = doc.querySelectorAll('[style]'); var styleTags = doc.querySelectorAll('style'); var cssCount = cssLinks.length; details.push({ label: 'External CSS Files', value: cssCount }); details.push({ label: 'Inline Styles', value: inlineStyles.length }); details.push({ label: 'Style Tags', value: styleTags.length }); if (cssCount > 5) { score -= 10; suggestions.push({ type: 'bad', text: 'Too many external CSS files (' + cssCount + '). Consider combining and minifying CSS files.' }); } else if (cssCount > 2) { score -= 3; suggestions.push({ type: 'warn', text: 'Multiple CSS files (' + cssCount + '). Consider combining to reduce HTTP requests.' }); } if (inlineStyles.length > 5) { score -= 5; suggestions.push({ type: 'warn', text: '' + inlineStyles.length + ' inline styles found. Move styles to external CSS for better caching and maintainability.' }); } // JS references var jsScripts = doc.querySelectorAll('script[src]'); var inlineScripts = doc.querySelectorAll('script:not([src])'); var jsCount = jsScripts.length; details.push({ label: 'External JS Files', value: jsCount }); details.push({ label: 'Inline Scripts', value: inlineScripts.length }); if (jsCount > 5) { score -= 10; suggestions.push({ type: 'bad', text: 'Too many external JS files (' + jsCount + '). Consider bundling and minifying JavaScript.' }); } else if (jsCount > 2) { score -= 3; suggestions.push({ type: 'warn', text: 'Multiple JS files (' + jsCount + '). Consider combining to reduce requests.' }); } if (inlineScripts.length > 2) { score -= 5; suggestions.push({ type: 'warn', text: '' + inlineScripts.length + ' inline script(s) found. Move to external files for better caching.' }); } // Render-blocking resources var renderBlocking = 0; cssLinks.forEach(function(link) { if (!link.getAttribute('media') || link.getAttribute('media') === 'all') renderBlocking++; }); jsScripts.forEach(function(script) { if (!script.getAttribute('async') && !script.getAttribute('defer')) renderBlocking++; }); details.push({ label: 'Render-Blocking Resources', value: renderBlocking }); if (renderBlocking > 4) { score -= 10; suggestions.push({ type: 'bad', text: '' + renderBlocking + ' render-blocking resources. Use async/defer for JS and preload critical CSS.' }); } else if (renderBlocking > 2) { score -= 5; suggestions.push({ type: 'warn', text: '' + renderBlocking + ' render-blocking resources. Consider async/defer for scripts.' }); } // Meta tags var hasViewport = !!doc.querySelector('meta[name="viewport"]'); var hasDescription = !!doc.querySelector('meta[name="description"]'); var hasCharset = !!doc.querySelector('meta[charset]'); details.push({ label: 'Viewport Meta', value: hasViewport ? 'Yes' : 'Missing' }); details.push({ label: 'Description Meta', value: hasDescription ? 'Yes' : 'Missing' }); details.push({ label: 'Charset Meta', value: hasCharset ? 'Yes' : 'Missing' }); if (!hasViewport) { score -= 10; suggestions.push({ type: 'bad', text: 'Missing viewport meta tag. Add <meta name="viewport" content="width=device-width, initial-scale=1.0"> for mobile responsiveness.' }); } if (!hasDescription) { score -= 5; suggestions.push({ type: 'warn', text: 'Missing meta description. Add a meta description for better SEO.' }); } // Tables for layout var tables = doc.querySelectorAll('table'); if (tables.length > 0) { suggestions.push({ type: 'warn', text: '' + tables.length + ' table(s) found. Ensure tables are used for data, not layout. Use CSS Grid or Flexbox instead.' }); } // Ensure score is in range score = Math.max(0, Math.min(100, score)); // Update UI document.getElementById('resultsSection').style.display = 'block'; // Score ring var circumference = 2 * Math.PI * 52; var offset = circumference - (score / 100) * circumference; var ring = document.getElementById('scoreRing'); var color; if (score >= 80) color = '#10B981'; else if (score >= 60) color = '#F59E0B'; else if (score >= 40) color = '#F97316'; else color = '#EF4444'; ring.style.stroke = color; ring.style.strokeDashoffset = offset; document.getElementById('scoreValue').textContent = score; document.getElementById('scoreValue').style.color = color; var label; if (score >= 90) label = 'Excellent'; else if (score >= 80) label = 'Good'; else if (score >= 60) label = 'Fair'; else if (score >= 40) label = 'Needs Improvement'; else label = 'Poor'; document.getElementById('scoreLabel').textContent = label; // Details var detailsHtml = ''; details.forEach(function(d) { detailsHtml += '

' + d.label + '' + d.value + '

'; }); document.getElementById('detailsList').innerHTML = detailsHtml; // Suggestions var sugHtml = ''; suggestions.forEach(function(s) { var iconSvg; if (s.type === 'good') iconSvg = ''; else if (s.type === 'warn') iconSvg = ''; else iconSvg = ''; sugHtml += '

' + iconSvg + '

' + s.text + '

'; }); document.getElementById('suggestionsList').innerHTML = sugHtml; showToast('Analysis complete! Score: ' + score); } document.getElementById('btnAnalyze').addEventListener('click', analyze); document.getElementById('btnSample').addEventListener('click', function() { document.getElementById('htmlInput').value = sampleHtml; }); document.getElementById('btnPaste').addEventListener('click', function() { navigator.clipboard.readText().then(function(text) { document.getElementById('htmlInput').value = text; showToast('Content pasted from clipboard'); }).catch(function() { showToast('Unable to read clipboard'); }); }); document.getElementById('btnClear').addEventListener('click', function() { document.getElementById('htmlInput').value = ''; document.getElementById('resultsSection').style.display = 'none'; showToast('Cleared'); }); }