Skip to content

Latest commit

 

History

History
61 lines (50 loc) · 1.65 KB

README.md

File metadata and controls

61 lines (50 loc) · 1.65 KB

CrUX Dashboard

A live web performance monitoring dashboard that tracks Core Web Vitals metrics for multiple websites using Chrome User Experience Report (CrUX) data. Live version available at: https://crux.gotomi.info

Features

  • Automated Daily Updates: Fetches fresh CrUX data every day at 7:00 UTC
  • Multiple View Options:
    • Distribution view - Shows good/needs improvement/poor percentages
    • P75 view - Displays 75th percentile values in a table format
    • Historical charts - Tracks metrics over time
  • Website Categories:
    • Polish ecommerce sites
    • European ecommerce sites
    • Radio stations
  • Core Web Vitals Metrics:
    • First Contentful Paint (FCP)
    • Largest Contentful Paint (LCP)
    • Cumulative Layout Shift (CLS)
    • Time to First Byte (TTFB)
    • Interaction to Next Paint (INP)

Setup for Your Own Dashboard

  1. Fork the repository

  2. Configure GitHub Secrets:

    • Add PSIKUS secret with your CrUX API key

  3. Configure GitHub Pages:

    • Enable GitHub Pages in repository settings
    • Set custom domain (optional)

  4. Add/Modify Website Lists: Update JSON files in src/_urls/ directory, for example:

    [
  "example.com",
  "otherdomain.com"
]

  5. The GitHub Actions workflows will:

    • Build and deploy on every push to master
    • Fetch new CrUX data daily and update the dashboard

GitHub Actions Workflows

Daily Data Update (gh-pages-scheduled.yml)

name: update data scheduled
on:
  schedule:
    - cron: '0 7 * * *'

This workflow:

  • Runs daily at 7:00 UTC
  • Fetches fresh CrUX data
  • Updates historical charts
  • Commits new data to repository
  • Deploys updated dashboard