dennii/Web-Page-Performance-Test
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/Web-Page-Performance-Test.git synced 2026-04-17 20:05:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Implement all Gap Analysis features: Visualization, Network, Bulk, Compare

Browse Source
This commit is contained in:
DeNNiiInc
2025-12-28 10:56:28 +11:00
parent 9cd5cac287
commit 0419bd6a9e
5 changed files with 353 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

246
compare.html
View File

@@ -3,197 +3,105 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Compare Tests - Web Page Performance Test</title>
<title>Test Comparison - Web Page Performance Test</title>
<link rel="icon" type="image/png" href="Logo.png">
<link rel="stylesheet" href="styles.css?v=3.0">
<style>
.comparison-container {
max-width: 1400px;
max-width: 1600px;
margin: 2rem auto;
padding: 2rem;
padding: 0 1rem;
}
.comparison-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin-top: 2rem;
}
.test-card {
background: var(--color-bg-secondary);
padding: 1.5rem;
border-radius: 12px;
}
.metric-comparison {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 1rem;
.metric-diff {
display: flex;
align-items: center;
padding: 1rem;
background: var(--color-bg-tertiary);
border-radius: 8px;
margin-bottom: 1rem;
justify-content: space-between;
padding: 0.5rem;
border-bottom: 1px solid var(--color-border);
}
.metric-name {
font-weight: 600;
text-align: center;
color: var(--color-text-secondary);
.diff-better { color: var(--color-accent-success); font-weight: bold; }
.diff-worse { color: var(--color-accent-error); font-weight: bold; }
.diff-neutral { color: var(--color-text-secondary); }
.filmstrip-row {
display: flex;
gap: 0.5rem;
overflow-x: auto;
padding: 1rem 0;
}
.metric-value {
font-size: 1.5rem;
font-weight: bold;
}
.delta {
font-size: 0.9rem;
font-weight: 600;
padding: 0.25rem 0.5rem;
border-radius: 4px;
}
.delta.better {
background: #4CAF50;
color: white;
}
.delta.worse {
background: #F44336;
color: white;
}
.delta.neutral {
background: var(--color-bg-tertiary);
color: var(--color-text-secondary);
.filmstrip-img {
height: 100px;
border: 1px solid var(--color-border);
}
</style>
</head>
<body>
<div class="comparison-container">
<h1>Test Comparison</h1>
<div style="display: flex; gap: 1rem; margin-bottom: 2rem;">
<input type="text" id="test1-id" placeholder="Test 1 ID" style="flex: 1; padding: 0.75rem; border-radius: 8px; border: 2px solid var(--color-border);">
<input type="text" id="test2-id" placeholder="Test 2 ID" style="flex: 1; padding: 0.75rem; border-radius: 8px; border: 2px solid var(--color-border);">
<button id="compare-btn" class="btn-primary" style="padding: 0.75rem 2rem;">Compare</button>
<header>
<div class="logo-container">
<img src="Logo.png" alt="Logo" class="logo">
<h1>Test Comparison</h1>
</div>
<a href="/" class="btn-secondary">← Back to Dashboard</a>
</header>
<div class="comparison-container">
<div id="loading" style="text-align: center; padding: 2rem;">Loading comparison...</div>
<div id="comparison-results"></div>
</div>
<script>
// Auto-load comparison from URL parameters
window.addEventListener('DOMContentLoaded', () => {
const params = new URLSearchParams(window.location.search);
const test1 = params.get('test1');
const test2 = params.get('test2');
if (test1 && test2) {
document.getElementById('test1-id').value = test1;
document.getElementById('test2-id').value = test2;
document.getElementById('compare-btn').click();
}
});
document.getElementById('compare-btn').addEventListener('click', async () => {
const test1Id = document.getElementById('test1-id').value.trim();
const test2Id = document.getElementById('test2-id').value.trim();
if (!test1Id || !test2Id) {
alert('Please enter both test IDs');
return;
}
try {
const [test1, test2] = await Promise.all([
fetch(`/reports/${test1Id}.json`).then(r => r.json()),
fetch(`/reports/${test2Id}.json`).then(r => r.json())
]);
renderComparison(test1, test2);
} catch (error) {
alert('Failed to load test results: ' + error.message);
}
});
function renderComparison(test1, test2) {
const container = document.getElementById('comparison-results');
const metrics = [
{ key: 'performance', label: 'Performance Score', path: 'scores.performance', higherBetter: true },
{ key: 'lcp', label: 'LCP (ms)', path: 'metrics.lcp', higherBetter: false },
{ key: 'cls', label: 'CLS', path: 'metrics.cls', higherBetter: false },
{ key: 'tbt', label: 'TBT (ms)', path: 'metrics.tbt', higherBetter: false }
];
let html = '<div class="comparison-grid">';
// Test 1 Card
html += `
<div class="test-card">
<h3>Test 1</h3>
<p><strong>URL:</strong> ${test1.url}</p>
<p><strong>Date:</strong> ${new Date(test1.timestamp).toLocaleString()}</p>
<p><strong>Device:</strong> ${test1.isMobile ? 'Mobile' : 'Desktop'}</p>
</div>
`;
// Test 2 Card
html += `
<div class="test-card">
<h3>Test 2</h3>
<p><strong>URL:</strong> ${test2.url}</p>
<p><strong>Date:</strong> ${new Date(test2.timestamp).toLocaleString()}</p>
<p><strong>Device:</strong> ${test2.isMobile ? 'Mobile' : 'Desktop'}</p>
</div>
`;
html += '</div>';
// Metric Comparisons
html += '<h2 style="margin-top: 2rem;">Metrics Comparison</h2>';
metrics.forEach(metric => {
const value1 = getNestedValue(test1, metric.path);
const value2 = getNestedValue(test2, metric.path);
const delta = value2 - value1;
const percentDelta = ((delta / value1) * 100).toFixed(1);
let deltaClass = 'neutral';
let deltaText = `${delta >= 0 ? '+' : ''}${percentDelta}%`;
if (metric.higherBetter) {
deltaClass = delta > 0 ? 'better' : delta < 0 ? 'worse' : 'neutral';
} else {
deltaClass = delta < 0 ? 'better' : delta > 0 ? 'worse' : 'neutral';
}
html += `
<div class="metric-comparison">
<div class="metric-value" style="text-align: right;">${formatValue(value1, metric.key)}</div>
<div style="text-align: center;">
<div class="metric-name">${metric.label}</div>
<div class="delta ${deltaClass}">${deltaText}</div>
<div id="comparison-content" style="display: none;">
<div class="comparison-grid">
<!-- Test A -->
<div class="test-column" id="col-a">
<h2 id="title-a">Test A</h2>
<div class="card">
<div id="meta-a"></div>
<div class="grade-circle" id="grade-a">
<span class="grade-letter"></span>
</div>
<div class="metric-value">${formatValue(value2, metric.key)}</div>
</div>
`;
});
container.innerHTML = html;
}
function getNestedValue(obj, path) {
return path.split('.').reduce((acc, part) => acc && acc[part], obj);
}
function formatValue(value, key) {
if (key === 'cls') return value.toFixed(3);
return Math.round(value);
}
</script>
<div id="filmstrip-a" class="filmstrip-row"></div>
</div>
<!-- Test B -->
<div class="test-column" id="col-b">
<h2 id="title-b">Test B</h2>
<div class="card">
<div id="meta-b"></div>
<div class="grade-circle" id="grade-b">
<span class="grade-letter"></span>
</div>
</div>
<div id="filmstrip-b" class="filmstrip-row"></div>
</div>
</div>
<!-- Metrics Diff Table -->
<div class="card" style="margin-top: 2rem;">
<h3>Metrics Comparison</h3>
<table style="width: 100%; border-collapse: collapse;">
<thead>
<tr>
<th>Metric</th>
<th>Test A</th>
<th>Test B</th>
<th>Difference</th>
</tr>
</thead>
<tbody id="metrics-body"></tbody>
</table>
</div>
</div>
</div>
<script src="compare.js"></script>
</body>
</html>