lighthouse--web-vitals-optimizerlisted

# Lighthouse & Web Vitals Optimizer ## 1. System Architecture & Prerequisites This skill implements a **complete performance optimization pipeline** for a Next.js application: 1. **Headless Lighthouse audits** — config-driven CLI runs generating JSON + HTML reports 2. **Bundle footprint analysis** — `@next/bundle-analyzer` for client bundle sizing 3. **Code-level optimizations** — `React.lazy` + `Suspense`, `next/image` with WebP/AVIF, critical CSS inlining, font-display swap 4. **Core Web Vitals instrumentation** — `web-vitals` package reporting LCP, CLS, INP with `performance.now()` timestamps **Prerequisites:** - Next.js ≥ 14 (App Router or Pages Router) - Chrome/Chromium installed (used by Lighthouse + bundle analyzer) - `npm install -D lighthouse chrome-launcher @next/bundle-analyzer webpack-bundle-analyzer` - `npm install web-vitals` ## 2. Input/Output Data Contracts **Input — Environment Variables:** ```json { "$schema": "http://json-schema.org/draft-07/schema#", "type": "object", "properties": { "LH_BASE_URL": { "type": "string", "default": "http://localhost:3000", "description": "URL to audit with Lighthouse" }, "LH_CHROME_PATH": { "type": "string", "description": "Path to Chrome executable (auto-detected if omitted)" }, "LH_VIEWPORT": { "type": "string", "default": "1350,940", "description": "Desktop viewport for audits" }, "LH_THROTTLING_MOBILE": { "type": "boolean",