██╗     ██╗ ██████╗ ██╗  ██╗████████╗██╗  ██╗ ██████╗ ██╗   ██╗███████╗███████╗
██║     ██║██╔════╝ ██║  ██║╚══██╔══╝██║  ██║██╔═══██╗██║   ██║██╔════╝██╔════╝
██║     ██║██║  ███╗███████║   ██║   ███████║██║   ██║██║   ██║███████╗█████╗  
██║     ██║██║   ██║██╔══██║   ██║   ██╔══██║██║   ██║██║   ██║╚════██║██╔══╝  
███████╗██║╚██████╔╝██║  ██║   ██║   ██║  ██║╚██████╔╝╚██████╔╝███████║███████╗
╚══════╝╚═╝ ╚═════╝ ╚═╝  ╚═╝   ╚═╝   ╚═╝  ╚═╝ ╚═════╝  ╚═════╝ ╚══════╝╚══════╝

Lighthouse Monitoring Dashboard & Custom SEO Plugin

Focus: Run Google Lighthouse on demand, pick from your sites, see full scores + Core Web Vitals + custom domain audits. Includes a production-ready custom Lighthouse plugin you can publish to npm. Everything you need for continuous performance + SEO monitoring.

Why Lighthouse in 2026

Lighthouse is the official automated auditor from the Chrome team. It produces the numbers that power:

• Chrome DevTools
• PageSpeed Insights
• Lighthouse CI (GitHub Action / Vercel)
• Search ranking signals (via Core Web Vitals)

It now covers five categories:

The Interactive Dashboard (right here)

Use the Site Selector below to pick a known site (e.g. kenyanschools.org or any of your deployed projects). Click Run Audit to simulate (or connect to) a fresh Lighthouse run. You'll see:

• Overall scores (0-100) for all categories
• Key metrics with pass/fail
• Your custom plugin audits (e.g. "Has KSO index", "County geo present", "School JSON-LD")
• Historical runs table

The implementation is a self-contained React component that matches the rest of the tech-stack portal (glass, fresh green accents, tilt cards). In a real setup you would wire the "Run" button to a server route that actually invokes lighthouse + your plugin.

Lighthouse Plugin System

Lighthouse is extensible. A plugin is just a small npm package that adds new audits and a new category to the report.

See the full official guide: https://github.com/GoogleChrome/lighthouse/blob/main/docs/plugins.md

Minimal plugin structure (copy-paste ready)

// lighthouse-plugin-kenyan-schools/plugin.js
export default {
  audits: [
    { path: 'lighthouse-plugin-kenyan-schools/audits/school-index-present.js' },
  ],
  category: {
    title: 'Kenyan Schools SEO',
    auditRefs: [{ id: 'school-index-present', weight: 1 }],
  },
};

Example custom audit (checks for KSO-XXXX):

// audits/school-index-present.js
import { Audit } from 'lighthouse';

class SchoolIndexPresent extends Audit {
  static get meta() {
    return {
      id: 'school-index-present',
      title: 'Page contains unique KSO school index',
      requiredArtifacts: ['MainDocumentContent'],
    };
  }
  static audit({ MainDocumentContent }) {
    const has = /KSO-\d{4}/i.test(MainDocumentContent);
    return { score: has ? 1 : 0, numericValue: has ? 1 : 0 };
  }
}
export default SchoolIndexPresent;

Usage (local dev):

npx lighthouse https://kenyanschools.org \
  --plugins=lighthouse-plugin-kenyan-schools \
  --only-categories=lighthouse-plugin-kenyan-schools,seo

Publish to npm as lighthouse-plugin-kenyan-schools and anyone can use it.

Pre-built Custom Audits (included)

The dashboard demonstrates these audits that ship with the example plugin:

• school-index-present — looks for KSO-XXXX in page content
• county-geo-data — county name + lat/long mentions
• structured-school-data — @type": "School" JSON-LD present
• descriptive-slugs — human readable URLs (not just IDs)

Site Selector + Stats

The live module below lets you:

1. Select a site from your portfolio (or type a custom URL)
2. See the latest Lighthouse numbers
3. "Re-run" to get fresh (demo) numbers

Connect the Run button to a real endpoint (the original internal run-audit.js + express server from the monorepo is a perfect starting point).

Official Links

• Lighthouse overview & plugins: https://developer.chrome.com/docs/lighthouse
• SEO audits reference: https://developer.chrome.com/docs/lighthouse/seo
• Core Web Vitals: https://web.dev/articles/vitals
• Lighthouse CI (for CI/CD): https://github.com/GoogleChrome/lighthouse-ci

Live Dashboard (deployed)

This entry ships a live interactive dashboard, not a mock:

• URL: https://tech-stack.codeamanilabs.org/guide/lighthouse
• Pick a site (primary: kenyanschools.org, plus the portal itself, dev-resources, and other portfolio subdomains) → Run Audit (PSI) for hosted Google PageSpeed Insights data, or Full Chrome Runner locally for a headless-Chrome run.
• Real output rendered: category scores, Core Web Vitals, the custom Kenyan-Schools plugin audits, cache insights, opportunities, network summary, third-party, plus recharts radial score gauges and an SEO/Performance trend chart.
• Production data path = PSI (server-side). ?full=true is a local/CI bonus — on Vercel (no Chrome binary) it falls back to PSI automatically. Set PSI_API_KEY for higher quota.

Run the same logic from the CLI: node lighthouse/examples/run-audit.js https://kenyanschools.org [--full].

Next.js / Vercel Integration Pattern

// .github/workflows/lighthouse.yml (example)
- name: Lighthouse
  uses: treosh/lighthouse-ci-action@v10
  with:
    urls: |
      https://kenyanschools.org
      https://kenyanschools.org/schools
    configPath: ./lighthouserc.json

lighthouserc.json can load your custom plugin.

Copy-Paste Templates

See the examples/ directory in this tech-stack entry for:

• Full plugin package skeleton
• Server + UI dashboard (the one powering the selector below)
• GitHub Action that posts scores back to your review system

All files are ready to drop into any project.

Status: Fresh as of 2026-06-21. This entry ships both the measurement tool (dashboard) and the extensibility story (plugin + custom audits) that the rest of the CodeAmani stack relies on for performance gates.