A modern, high-performance web analytics tool that allows users to run Google Lighthouse audits on any website. Built with Node.js, Express, and a custom-tuned Chrome instance for accurate, reproducible results.

Features • Visual Tour • Getting Started • Deployment

✨ Comprehensive Features

🎯 Multi-Run Statistics

Run tests multiple times (1, 3, 5, or 10 runs) to get statistically significant results. The system automatically calculates:

Median Performance Score ⭐ (identifies the most representative run)
Average & Standard Deviation for all Core Web Vitals
Individual Run Comparison with detailed metrics for each test

Perfect for eliminating variance and getting reliable performance data.

📊 Performance Grades (A-F)

Industry-standard grading system for 6 critical metrics:

First Contentful Paint (FCP) - When users first see content
Largest Contentful Paint (LCP) - Main content rendering time
Cumulative Layout Shift (CLS) - Visual stability score
Total Blocking Time (TBT) - Interactivity delays
Speed Index - How quickly content is visually displayed
Time to Interactive (TTI) - When page becomes fully interactive

Each metric is color-coded (Green A → Red F) based on WebPageTest standards.

📈 Request Waterfall Chart

Detailed visual timeline showing:

Sequential request loading with precise timing
HTTP status codes (200 = success, 404 = not found, etc.)
Resource types (HTML, CSS, JS, Images, Fonts)
File sizes and transfer times
Request/Response headers for debugging
Vertical time grid for easy time tracking

🔗 Connection View

Advanced networking analysis that groups requests by their socket connection:

Connection Reuse Detection (♻️ Reused vs 🆕 New)
HTTP/2 Multiplexing Visualization - See parallel requests
Domain Grouping - Identify third-party dependencies
Protocol Display (HTTP/1.1, HTTP/2, HTTP/3)

Helps optimize connection pooling and identify opportunities for HTTP/2 upgrades.

📦 Content Breakdown Analysis

Interactive pie chart and detailed table showing:

Resource Type Distribution (Document, Stylesheet, Script, Image, Font, Other)
Request Count per type
Total Size & Transfer Size (before/after compression)
Optimization Opportunities - Identifies large unoptimized images

🖼️ Image Gallery & Optimization

Dedicated image analysis tool that displays:

All loaded images with thumbnails
Format detection (WebP, AVIF, PNG, JPEG, SVG, GIF)
Size warnings for images over 100KB
Optimization suggestions (e.g., "Switch to WebP for 30% savings")
Total statistics (count, total size, average size)

🔄 Test Comparison

Select up to 10 previous tests and compare them side-by-side:

Performance score trends
Core Web Vitals differences
Page load time variations
Resource count changes

Perfect for tracking performance improvements over time or A/B testing different configurations.

🕰️ Recent Tests with Clickable URLs

Your test history, enhanced:

Click any website URL to instantly reload previous results
Checkboxes for comparison selection
Device indicators (📱 Mobile / 💻 Desktop)
Performance scores at a glance
Quick access buttons (Waterfall, View Report)

🔐 Privacy & User Isolation

Client-side UUID tracking - Your tests stay yours
No shared history between users
Automatic cleanup - Old tests are periodically archived

⚙️ Additional Features

📱 Device Emulation - Toggle between Desktop (1920x1080) and Mobile (Moto G4)
💾 Persistent Storage - PostgreSQL database for reliable history
📄 Export Capabilities - Download HAR files and JSON reports
🚀 Request Queue System - Handles concurrent users without crashes
⏱️ Real-time Progress - Live updates during multi-run tests
🎨 Dark Mode Interface - Easy on the eyes, professional design

📸 Visual Tour

🖥️ Desktop Dashboard View

Full-featured dashboard showing test configuration, results, and analysis tools

📱 Mobile Responsive Design

Fully optimized mobile experience - test on any device

🚀 Getting Started

Prerequisites

Node.js v20 or higher
Google Chrome or Chromium
PostgreSQL 15+ (for test history)

Installation

Clone the repository:

git clone https://github.com/DeNNiiInc/Web-Page-Performance-Test.git
cd Web-Page-Performance-Test

Install dependencies:
```
npm install
```
Configure the database:
- Update lib/db-config.js with your PostgreSQL credentials
- Run migrations:
```
cd migrations
chmod +x run-migration.sh
./run-migration.sh
```
Start the server:
```
npm start
```
The application will run on http://localhost:3000

Usage

Enter a website URL (e.g., https://example.com)
Select device type (Desktop or Mobile)
Choose number of runs (1 for quick test, 3-5 for reliable median)
Click "Run Test" and wait for results
Explore the data:
- View performance grades and Core Web Vitals
- Click "View Waterfall Chart" for detailed request timeline
- Check "View Image Gallery" for optimization opportunities
- Select tests to compare performance over time

🛠️ Deployment

This project includes automated deployment for production environments.

Automated Deployment (Linux/Proxmox)

Auto-sync script (auto-sync-robust.sh) pulls GitHub changes every 60 seconds
Systemd service manages the Node.js application
Environment variables stored in .env (git-ignored for security)
Graceful restarts only when code changes are detected

Manual Deployment

Pull latest code: git pull origin main
Install dependencies: npm install
Run migrations: cd migrations && ./run-migration.sh
Restart service: systemctl restart web-page-performance-test

Configuration Files

lib/db-config.js - Database connection settings
deploy-config.json - Deployment credentials (git-ignored)
.env - Environment variables (git-ignored)

🔧 Technology Stack

Component	Technology
Backend	Node.js 20+ with Express 4.18+
Testing Engine	Google Lighthouse 13.0+
Browser	Chrome Launcher (headless)
Database	PostgreSQL 15+
Frontend	Vanilla JavaScript, CSS3, HTML5
Charts	Canvas-based custom rendering
Analysis	HAR file parsing, statistical calculations

📝 License

Distributed under the GPL-3.0 License. See LICENSE file for more information.

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

📧 Support

For questions or support, please open an issue on GitHub or contact Beyond Cloud Technology.

_{Developed and maintained by Beyond Cloud Technology}
_{⭐ Star this repo if you find it useful!}

Languages

JavaScript 59.1%

HTML 22.8%

CSS 8.8%

PowerShell 5.6%

Shell 3.7%