Lighthouse Monitoring Dashboard & Custom SEO Plugin

Technology: lighthouse · Category: monitoring · Last reviewed: 2026-08-23

Source: https://tech-stack.codeamanilabs.org/guide/lighthouse

Insight:

Lighthouse gives you an automated, repeatable way to measure and improve Performance, Accessibility, Best Practices, and SEO (the PWA category was retired in Lighthouse 12). Run it on every deploy with custom plugins for your domain (e.g. KSO index presence, county geo signals, structured School data). The dashboard here lets you pick a site and instantly see scores + metrics + history. Use the plugin system to ship your own audits as a shareable node module. Grounded in official Chrome + Google Search docs; reviewed 2026-08-23 against lighthouse 13.4.

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

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 four scored categories — the PWA category was removed in Lighthouse 12 (May 2024); installability/service-worker checks moved to the Chrome DevTools Application panel and are no longer scored by Lighthouse:

Performance score weights (Lighthouse 10–13)

The Performance score is a weighted blend of five lab metrics — these weights have not changed since Lighthouse 10 (verified against the official scoring doc, 2026-08-23):

Score bands: 90–100 green (good), 50–89 orange, 0–49 red. Note that INP is not part of the lab Performance score — it needs a real user interaction, so it surfaces only as field data (CrUX / PageSpeed Insights), not from a cold lab run.

Core Web Vitals thresholds ("good" measured at the 75th percentile)

INP replaced FID as the responsiveness Core Web Vital on 12 March 2024; FID is fully retired. These are the thresholds the dashboard's mobile CWV panel is graded against.

Versions & tooling (verified 2026-08-23)

The PSI (default) path only needs Node 18+ (global fetch); the --full Chrome path pulls in lighthouse + chrome-launcher and therefore Node ≥ 22.19.

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
• Performance scoring / metric weights: https://developer.chrome.com/docs/lighthouse/performance/performance-scoring
• Core Web Vitals: https://web.dev/articles/vitals
• Lighthouse CI (for CI/CD, @lhci/cli): 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@v12
  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-08-23 (lighthouse 13.4, @lhci/cli 0.15, PSI API v5). 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.

Official docs:

• https://developer.chrome.com/docs/lighthouse/overview
• https://developer.chrome.com/docs/lighthouse/seo
• https://developer.chrome.com/docs/lighthouse/performance/performance-scoring
• https://github.com/GoogleChrome/lighthouse/blob/main/docs/plugins.md
• https://web.dev/articles/vitals