mirror of
https://github.com/DeNNiiInc/Web-Page-Performance-Test.git
synced 2026-04-17 20:05:58 +00:00
DeNNiiInc
4aa890da6f
Features Added: - Interactive waterfall timeline visualization - Color-coded timing bars (DNS, Connect, SSL, TTFB, Download) - Request filtering by resource type (HTML, JS, CSS, Images, Fonts) - Detailed request inspector dialog with timing breakdown - HAR data extraction from Lighthouse results - Size/compression metrics display - Third-party resource identification - Render-blocking resource detection Technical Implementation: - Created lib/har-parser.js for network data extraction - Built waterfall.html with SVG-based timeline renderer - Added waterfall.js with interactive controls - Integrated HAR generation into test runner workflow - Updated main UI with View Waterfall link
143 lines
7.9 KiB
HTML
143 lines
7.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="Beyond Cloud Technology Project Base">
|
|
<title>Web Page Performance Test</title>
|
|
<link rel="icon" type="image/png" href="Logo.png">
|
|
<link rel="stylesheet" href="styles.css?v=2.2">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<!-- Header -->
|
|
<header class="header">
|
|
<div class="header-content">
|
|
<h1 class="title">
|
|
<img src="Logo.png" alt="BCT Logo" class="title-icon">
|
|
Web Page Performance Test
|
|
</h1>
|
|
<p class="subtitle">Developed and maintained by Beyond Cloud Technology</p>
|
|
<a href="https://www.youtube.com/@beyondcloudtechnology" target="_blank" rel="noopener noreferrer"
|
|
class="youtube-link">
|
|
<svg class="youtube-icon" viewBox="0 0 24 24" fill="currentColor">
|
|
<path
|
|
d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
|
|
</svg>
|
|
Watch on YouTube @beyondcloudtechnology
|
|
</a>
|
|
</div>
|
|
<div class="header-controls">
|
|
<!-- Theme toggle or other controls can go here -->
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content Area -->
|
|
<main class="main-content">
|
|
<div class="panel">
|
|
<div class="panel-header">
|
|
<div class="panel-icon">⚡</div>
|
|
<h2 class="panel-title">Start Performance Test</h2>
|
|
</div>
|
|
|
|
<!-- Test Launcher Form -->
|
|
<div class="launcher-form">
|
|
<div class="form-group">
|
|
<label class="form-label" for="test-url">Enter Website URL</label>
|
|
<input type="url" id="test-url" class="form-input" placeholder="https://example.com" required>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label class="form-label">Device Emulation</label>
|
|
<div class="toggle-group">
|
|
<div class="toggle-option" data-value="mobile" onclick="setDevice('mobile')">
|
|
📱 Mobile
|
|
</div>
|
|
<div class="toggle-option active" data-value="desktop" onclick="setDevice('desktop')">
|
|
💻 Desktop
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button id="run-btn" class="btn-primary">
|
|
<span>Run Test</span>
|
|
<div id="loading-spinner" class="loading-spinner" style="display: none;"></div>
|
|
</button>
|
|
<p id="error-msg" style="color: var(--color-accent-danger); display: none;"></p>
|
|
</div>
|
|
|
|
<!-- Live Results -->
|
|
<div id="results-area" class="results-container">
|
|
<h3>Latest Results</h3>
|
|
<div class="metrics-grid">
|
|
<div class="metric-card">
|
|
<div class="metric-value" id="score-perf">-</div>
|
|
<div class="metric-label">Performance</div>
|
|
</div>
|
|
<div class="metric-card">
|
|
<div class="metric-value" id="metric-lcp">-</div>
|
|
<div class="metric-label">LCP (ms)</div>
|
|
</div>
|
|
<div class="metric-card">
|
|
<div class="metric-value" id="metric-cls">-</div>
|
|
<div class="metric-label">CLS</div>
|
|
</div>
|
|
<div class="metric-card">
|
|
<div class="metric-value" id="metric-tbt">-</div>
|
|
<div class="metric-label">TBT (ms)</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Waterfall Link -->
|
|
<div style="margin-top: 1.5rem; display: none;" id="waterfall-link-container">
|
|
<a href="#" id="view-waterfall" class="button" style="display: inline-block; padding: 0.75rem 1.5rem; background: var(--color-accent); color: white; text-decoration: none; border-radius: 8px; font-weight: 600;">
|
|
📊 View Waterfall Chart
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Content Breakdown -->
|
|
<div id="content-breakdown" style="margin-top: 2rem; display: none;">
|
|
<h3>Content Breakdown</h3>
|
|
<canvas id="breakdown-chart" style="max-width: 500px; margin: 0 auto;"></canvas>
|
|
<div id="breakdown-stats" style="margin-top: 1rem;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- History -->
|
|
<div class="history-list" id="history-list">
|
|
<!-- History items will be populated here -->
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<p>© 2025 Beyond Cloud Technology. All rights reserved.</p>
|
|
|
|
<!-- GitHub Link -->
|
|
<a href="https://github.com/DeNNiiInc/Web-Page-Performance-Test" target="_blank" rel="noopener noreferrer" class="github-link">
|
|
<svg class="github-icon" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
|
</svg>
|
|
<span>View on GitHub</span>
|
|
</a>
|
|
|
|
<!-- Git Version Badge -->
|
|
<div id="version-badge" class="version-badge">
|
|
<svg class="badge-icon" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M21.007 8.222A3.738 3.738 0 0 0 15.045 5.2a3.737 3.737 0 0 0 1.156 6.583 2.988 2.988 0 0 1-2.668 1.67h-2.99a4.456 4.456 0 0 0-2.989 1.165V7.4a3.737 3.737 0 1 0-1.494 0v9.117a3.776 3.776 0 1 0 1.816.099 2.99 2.99 0 0 1 2.668-1.667h2.99a4.484 4.484 0 0 0 4.223-3.039 3.736 3.736 0 0 0 3.25-3.687zM4.565 3.738a2.242 2.242 0 1 1 4.484 0 2.242 2.242 0 0 1-4.484 0zm4.484 16.441a2.242 2.242 0 1 1-4.484 0 2.242 2.242 0 0 1 4.484 0zm8.221-9.715a2.242 2.242 0 1 1 0-4.485 2.242 2.242 0 0 1 0 4.485z"/>
|
|
</svg>
|
|
<span id="commit-id" class="commit-id">Loading...</span>
|
|
<span class="version-separator">•</span>
|
|
<span id="commit-age" class="commit-age">Loading...</span>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<script src="main.js"></script>
|
|
</body>
|
|
|
|
</html> |