🚀 Lighthouse Performance Monitor

Automated Lighthouse performance monitoring and trend analysis tool for web applications. Tracks performance, accessibility, SEO, and best practices metrics over time with beautiful visualizations.

---

📋 Overview

This tool automates daily Lighthouse analysis of web applications, collecting performance metrics and generating comprehensive trend visualizations. Perfect for tracking website performance improvements and regressions over time.

Key Features:

• ✅ Automated daily Lighthouse audits
• ✅ Historical trend tracking (months of data)
• ✅ Beautiful 2x2 grid visualizations
• ✅ JSON export for further analysis
• ✅ Min/Max value indicators
• ✅ Easy cron job integration

---

🧾 Project Summary

• Purpose: Automated daily Lighthouse analysis with historical trend tracking
• Method: Daily cron job collects Lighthouse scores and stores them as JSON and visual charts
• Technologies: Node.js (Lighthouse), Python (pandas, matplotlib), shell script
• Outputs: Daily reports and trend visualizations
• Chart folder: trend/
• Data folder: Configured in Lighthouse Report Script.js

---

📦 Project Structure

lighthouse-performance-monitor/
├── run-all.sh                      # Main automation script
├── Lighthouse Report Script.js     # Lighthouse analysis runner
├── analyze-lighthouse-reports.js   # JSON summary generator from reports
├── plot_lighthouse_summary.py      # Trend visualization generator
├── requirements.txt                # Python dependencies
├── package.json                    # Node.js dependencies
├── README.md                       # This file
├── .gitignore                     # Git ignore rules
├── data/                          # Data storage folder (configurable)
│   ├── report-YYYY-MM-DD.json     # Daily Lighthouse reports
│   └── YYYY-MM-DD/                # Alternative folder structure
│       └── report.json
├── trend/                         # Generated charts
│   └── trend_YYYY-MM-DD_HH-MM-SS.png
└── report-summary.csv             # Aggregated metrics

---

🧰 Installation

Prerequisites

• Node.js (v14+)
• Python 3.7+
• npm

Setup Steps

Clone the repository:

git clone https://github.com/c3nk/lighthouse-performance-monitor.git
cd lighthouse-performance-monitor

Install Python dependencies:

python3 -m venv venv-lighthouse
source venv-lighthouse/bin/activate
pip install -r requirements.txt

Install Node.js dependencies:

npm install

Make script executable:

chmod +x run-all.sh

Configure your website URL: Edit Lighthouse Report Script.js and update the domain variable:

const domain = 'https://example.com';  // Replace with your target website URL

---

▶️ Usage

Manual Run

Simply execute the main script:

./run-all.sh

This will:

1. Run Lighthouse analysis on your configured website
2. Generate JSON summary from all historical reports
3. Create trend visualization charts

Script Commands

You can also run individual components:

# Run Lighthouse analysis only
npm run lighthouse

# Generate CSV from reports
npm run analyze

# Generate charts only
npm run plot

---

🔁 Automation (Cron Job)

Set up a daily cron job to automate the analysis:

# Edit crontab
crontab -e

# Add this line (runs daily at 6 AM)
# Replace /path/to/ with the actual absolute path to your project directory
0 6 * * * /path/to/lighthouse-performance-monitor/run-all.sh >> /path/to/lighthouse-performance-monitor/lighthouse.log 2>&1

Note:

• Make sure to provide absolute paths in the cron job
• Replace /path/to/ with your actual project directory path (e.g., /home/user/projects/)

---

📊 Understanding the Output

JSON Summary (report-summary.csv)

Contains daily metrics with columns:

• Date: Analysis date
• Performance: Performance score (0-100)
• Accessibility: Accessibility score (0-100)
• BestPractices: Best practices score (0-100)
• SEO: SEO score (0-100)

Trend Charts (trend/trend_YYYY-MM-DD_HH-MM-SS.png)

Beautiful 2x2 grid visualization showing:

• Performance Trend: Performance metrics over time
• Accessibility Trend: Accessibility metrics over time
• SEO Trend: SEO metrics over time
• Best Practices Trend: Best practices metrics over time

Each chart includes:

• Line graph showing score progression
• Min/Max value indicators (red/green dots)
• Date range from oldest to newest data

---

⚙️ Configuration

Changing the Analyzed Website

Edit Lighthouse Report Script.js:

const domain = 'https://example.com';  // Replace with your target website URL

Changing Data Storage Location

Edit Lighthouse Report Script.js and analyze-lighthouse-reports.js:

// In Lighthouse Report Script.js:
const folder = './data/' + now.toISOString().split('T')[0];  // Change 'data' to your preferred folder name

// In analyze-lighthouse-reports.js:
const baseDir = './data';  // Must match the folder name used above

Lighthouse Options

Modify Lighthouse flags in Lighthouse Report Script.js:

exec(`npx lighthouse ${domain} --output json --output-path=${outputFile} --emulated-form-factor=desktop --chrome-flags="--headless"`, ...);

---

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

The MIT License is a permissive free software license that allows anyone to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the software without restriction. You are free to use this project for any purpose, including commercial purposes, with minimal restrictions.