dennii/Web-Page-Performance-Test
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/Web-Page-Performance-Test.git synced 2026-04-17 11:55:59 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
main
Web-Page-Performance-Test/README.md

9.0 KiB
Raw Permalink Blame History

Web Page Performance Test ⚡

Premium Real-Time Website Audit & Metrics Tool

Live Demo

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.

NodeJS Express PostgreSQL Lighthouse

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.

Multi-Run Selector

📊 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.

Performance Grades

📈 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
Waterfall Chart

🔗 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.

Connection View

📦 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
Content Breakdown

🖼️ 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)
Recent Tests

🔐 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

Desktop Dashboard

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



📱 Mobile Responsive Design

Mobile Dashboard

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

  1. Clone the repository:

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

  2. Install dependencies:

    npm install

  3. Configure the database:

    • Update lib/db-config.js with your PostgreSQL credentials
    • Run migrations: 
      cd migrations
chmod +x run-migration.sh
./run-migration.sh

  4. Start the server:

    npm start

    The application will run on http://localhost:3000

Usage

  1. Enter a website URL (e.g., https://example.com)
  2. Select device type (Desktop or Mobile)
  3. Choose number of runs (1 for quick test, 3-5 for reliable median)
  4. Click "Run Test" and wait for results
  5. 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

  1. Pull latest code: git pull origin main
  2. Install dependencies: npm install
  3. Run migrations: cd migrations && ./run-migration.sh
  4. 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!
Reference in New Issue View Git Blame Copy Permalink