DEV Community

Cover image for Building a Lighthouse Performance Monitor: Tracking Web Performance Over Time
cenk
cenk

Posted on • Originally published at c3nk.com

Building a Lighthouse Performance Monitor: Tracking Web Performance Over Time

#opensource #siteoptimization #siteperformance #lighthouse

The Challenge: Measuring Performance Impact of Major Changes

When our team decided to overhaul both our website's frontend interface and Content Management System (CMS), we faced a critical question: How would we measure the performance impact of these changes?

Google's Lighthouse is an excellent tool for performance auditing. You run it, get your scores, and see what needs improvement. But here's the problem: Lighthouse gives you a snapshot, not a story.

When you're planning major changes like a complete CMS migration or frontend redesign, you need more than point-in-time measurements. You need:

  • Historical data to establish baseline performance
  • Trend analysis to spot gradual improvements or regressions
  • Before-and-after comparisons that show real impact
  • Long-term monitoring to catch seasonal variations and unexpected changes

That's why I built the Lighthouse Performance Monitor - an automated tool that transforms Lighthouse from a one-time audit tool into a continuous monitoring solution.

The Solution: Automated Daily Monitoring with Visual Trends

The Lighthouse Performance Monitor is a lightweight automation wrapper around Google's Lighthouse that:

  1. Runs daily automated audits using cron jobs
  2. Stores historical data in JSON and CSV formats
  3. Generates visual trend charts showing performance over time
  4. Tracks all key metrics: Performance, Accessibility, SEO, and Best Practices

Real-World Benefits for Product Managers and Developers

For Product Managers:

  • Data-driven decisions: See exactly how your redesign affected performance metrics
  • Stakeholder reporting: Beautiful visualizations that clearly show trends over months
  • ROI justification: Prove that performance improvements directly result from your investments
  • Risk mitigation: Catch performance regressions before they impact users

For Frontend Developers:

  • Continuous feedback: Know immediately if your changes hurt performance
  • Debugging insights: Pinpoint when performance degraded and correlate with deployments
  • Optimization tracking: Watch your optimization efforts pay off over time
  • Seasonal patterns: Understand how your site performs during high-traffic periods

A Practical Use Case: The CMS Migration Journey

Let me share a practical scenario that mirrors the motivation behind this tool:

Week 1-4 (Baseline Period)

  • Run daily Lighthouse audits on existing site
  • Establish baseline: Performance 65, Accessibility 88, SEO 92, Best Practices 79
  • Identify current pain points and optimization opportunities

Week 5-8 (Migration Phase)

  • Continue monitoring as CMS migration begins
  • Notice gradual changes as content is moved to new system
  • Spot unexpected accessibility regressions early (dropped from 88 to 82)
  • Fix issues before full launch

Week 9-12 (Post-Launch)

  • Monitor new site's performance stabilization
  • Final scores: Performance 78, Accessibility 95, SEO 95, Best Practices 88
  • Clear data showing 20% performance improvement and 8% accessibility boost

Months 3-6 (Long-term)

  • Observe seasonal traffic spikes (holiday shopping, back-to-school)
  • Identify that performance drops to 72 during peak periods
  • Plan infrastructure scaling based on data, not assumptions

Without automated monitoring, these insights would be invisible. You'd only have "before" and "after" snapshots, missing the entire journey and valuable optimization opportunities.

How It Works: Simple Architecture, Powerful Results

The tool uses a hybrid approach combining Node.js and Python:

Daily Cron Job Triggers
        ↓
Node.js runs Lighthouse audit
        ↓
Saves JSON report with timestamp
        ↓
Node.js aggregates all reports into CSV
        ↓
Python generates visual trend charts
        ↓
Beautiful 2x2 grid visualization ready
Enter fullscreen mode Exit fullscreen mode

Key Features:

🤖 Fully Automated

  • Set it and forget it - runs daily via cron job
  • No manual intervention needed after initial setup

📊 Visual Insights

  • 2x2 grid charts showing all four metric categories
  • Min/Max value indicators (green/red dots)
  • Clear date ranges showing data history

💾 Data Portability

  • JSON reports for detailed analysis
  • CSV summary for spreadsheet integration
  • Easy to integrate with existing monitoring tools

⚙️ Highly Configurable

  • Change target URL easily
  • Adjust data storage location
  • Modify Lighthouse flags (mobile/desktop, throttling settings)

Getting Started in 5 Minutes

The tool is designed for minimal setup friction:

# 1. Clone the repository
git clone https://github.com/c3nk/lighthouse-performance-monitor.git
cd lighthouse-performance-monitor

# 2. Install dependencies
pip install -r requirements.txt
npm install

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

# 4. Run it!
./run-all.sh
Enter fullscreen mode Exit fullscreen mode

That's it! You'll get your first report and trend chart immediately.

To automate it daily:

# Add to crontab (runs daily at 6 AM)
0 6 * * * /path/to/lighthouse-performance-monitor/run-all.sh >> /path/to/lighthouse.log 2>&1
Enter fullscreen mode Exit fullscreen mode

Why This Approach Works

Leveraging Industry Standards

Rather than building a performance monitoring tool from scratch, this project leverages Google's battle-tested Lighthouse engine. You get:

  • The same metrics Chrome DevTools uses
  • Regular updates as Lighthouse evolves
  • Industry-standard benchmarks
  • Trusted, reproducible results

Minimal Overhead, Maximum Value

The tool's philosophy is "do one thing well": automate Lighthouse and visualize trends. It doesn't try to be a full APM (Application Performance Monitoring) solution. Instead, it:

  • Runs lean (minimal server resources)
  • Stores data locally (no external dependencies)
  • Outputs standard formats (JSON, CSV, PNG)
  • Integrates easily with existing workflows

Design Process Integration

This isn't just a monitoring tool it's a design process tool. By running it throughout your redesign or migration project, you:

  • Make data-informed design decisions
  • Catch regressions during development
  • Validate performance requirements before launch
  • Build institutional knowledge about what affects your metrics

What Could Come Next

While the current version focuses on core functionality, there's room for enhancement:

  • Alert thresholds: Get notified when scores drop below defined limits
  • Slack/Email notifications: Push reports to your team automatically
  • Comparative analysis: Side-by-side comparison of different time periods
  • Multi-site monitoring: Track multiple websites from one installation
  • Web dashboard: Interactive UI for exploring historical data
  • CI/CD integration: Run checks before deploying to production

These features aren't implemented yet, but the foundation is ready for community contributions.

The Hidden Benefit: Seasonal Pattern Recognition

One of the most valuable and unexpected insights from long-term monitoring is seasonal pattern recognition.

In the short term (days or weeks), you can't distinguish between:

  • Temporary performance fluctuations
  • Genuine improvements/regressions
  • Seasonal traffic patterns
  • Infrastructure issues

But with months of data, patterns emerge:

  • "Our performance always dips in Q4 due to holiday traffic"
  • "Accessibility scores correlate with our content team's rotation schedule"
  • "SEO scores improve gradually after major content updates"
  • "That 'performance improvement' in March was actually just lower traffic"

These insights are impossible to obtain from one-time audits or even weekly manual checks.

Conclusion: From Snapshots to Stories

Google Lighthouse is powerful, but it's designed for point-in-time analysis. For teams planning major changes - redesigns, migrations, platform upgrades - you need continuous monitoring.

The Lighthouse Performance Monitor transforms Lighthouse from a diagnostic tool into a strategic performance intelligence system. It helps you:

  • Measure the real impact of your work
  • Catch problems before users notice
  • Make data-driven decisions
  • Build performance culture in your team

Whether you're a Product Manager justifying a redesign investment or a Frontend Developer optimizing for Core Web Vitals, having historical performance data changes everything.

Get Started Today

The project is open source and available on GitHub:
https://github.com/c3nk/lighthouse-performance-monitor

  • ⭐ Star the repo if you find it useful
  • 🐛 Report issues or suggest features
  • 🤝 Contribute improvements
  • 📢 Share with your team

License: MIT (free to use, modify, and distribute)

What performance monitoring challenges are you facing? How do you track the impact of your web development projects? Share your experiences in the comments below!

Top comments (0)