{
  "slug": "lighthouse",
  "title": "Lighthouse Performance Audit",
  "description": "Monitor your site's performance, accessibility, SEO, and best practices with integrated Google PageSpeed Insights scanning.",
  "category": "guides",
  "order": 32,
  "locale": "en",
  "translationGroup": "9a6cd872-3d17-48c0-ad2b-7837cf4bb8a5",
  "helpCardId": null,
  "content": "## Overview\n\nThe Lighthouse page in CMS admin scans your deployed site via Google PageSpeed Insights and gives you four scores:\n\n- **Performance** — page load speed, rendering, interactivity\n- **Accessibility** — screen readers, contrast, ARIA, keyboard navigation\n- **SEO** — meta tags, crawlability, structured data\n- **Best Practices** — HTTPS, image formats, console errors, deprecated APIs\n\nScores use Google's official thresholds: 🟢 90-100 (good), 🟡 50-89 (needs work), 🔴 0-49 (poor).\n\n## Core Web Vitals\n\nCore Web Vitals are the metrics Google uses for search ranking. They measure real-world user experience:\n\n| Metric | What it measures | Good | Needs work | Poor |\n|--------|-----------------|------|------------|------|\n| **LCP** (Largest Contentful Paint) | How fast the main content loads | < 2.5s | 2.5–4.0s | > 4.0s |\n| **CLS** (Cumulative Layout Shift) | How much the layout shifts during load | < 0.1 | 0.1–0.25 | > 0.25 |\n| **FCP** (First Contentful Paint) | When first text/image appears | < 1.8s | 1.8–3.0s | > 3.0s |\n| **TTFB** (Time to First Byte) | Server response time | < 800ms | 800–1800ms | > 1800ms |\n| **INP** (Interaction to Next Paint) | Response time to user input | < 200ms | 200–500ms | > 500ms |\n\n## How to run a scan\n\n1. Navigate to **Tools → Lighthouse** in the sidebar\n2. Click **Run Scan**\n3. Both mobile and desktop audits run in parallel — results appear side by side\n4. Wait 10-30 seconds for Google to analyze your site\n\nThe site must be publicly accessible — localhost URLs cannot be scanned. Set your production URL as Preview URL in Site Settings.\n\n## Opportunities & Diagnostics\n\n**Opportunities** are specific improvements with estimated time savings:\n- \"Reduce unused JavaScript\" — save 0.6s\n- \"Serve images in next-gen formats\" — save 1.2s\n- \"Eliminate render-blocking resources\" — save 0.4s\n\n**Diagnostics** flag issues that don't have direct time savings but indicate problems:\n- DOM size too large\n- Missing cache headers\n- Excessive network requests\n\n## Score History\n\nEvery scan is saved. The history table shows your scores over time so you can track improvements after optimizations.\n\n## API Key Setup\n\nLighthouse works out of the box — a shared API key is included. If you run many scans and hit the daily quota, you can add your own free Google PageSpeed Insights API key:\n\n### Via Google Cloud Console (web)\n\n1. Go to [Google Cloud Console → PageSpeed Insights API](https://console.cloud.google.com/apis/library/pagespeedonline.googleapis.com)\n2. Select or create a project\n3. Click **Enable**\n4. Go to [Credentials](https://console.cloud.google.com/apis/credentials)\n5. Click **Create Credentials → API Key**\n6. Copy the key\n7. In CMS admin: when you see the quota error, paste your key in the setup form\n\nThe key is stored per-site in `_data/site-config.json` as `psiApiKey`.\n\n### Via gcloud CLI\n\nIf you have [gcloud CLI](https://cloud.google.com/sdk/docs/install) installed:\n\n```bash\n# Authenticate (opens browser)\ngcloud auth login\n\n# Enable the API\ngcloud services enable pagespeedonline.googleapis.com --project=YOUR_PROJECT\n\n# Create an API key restricted to PSI only\ngcloud services api-keys create \\\n  --display-name=\"CMS Lighthouse\" \\\n  --project=YOUR_PROJECT \\\n  --api-target=service=pagespeedonline.googleapis.com\n```\n\nThe key is returned in the output as `keyString`. Paste it in CMS admin.\n\n### Installing gcloud CLI\n\n```bash\n# macOS (Homebrew)\nbrew install google-cloud-sdk\n\n# Or download installer\ncurl https://sdk.cloud.google.com | bash\nexec -l $SHELL\ngcloud init\n```\n\nFor other platforms, see the [official install guide](https://cloud.google.com/sdk/docs/install).",
  "excerpt": "Overview\n\nThe Lighthouse page in CMS admin scans your deployed site via Google PageSpeed Insights and gives you four scores:\n\n- Performance — page load speed, rendering, interactivity\n- Accessibility — screen readers, contrast, ARIA, keyboard navigation\n- SEO — meta tags, crawlability, structured da",
  "seo": {
    "metaTitle": "Lighthouse Performance Audit — webhouse.app Docs",
    "metaDescription": "Monitor site performance, accessibility, SEO with integrated Google PageSpeed Insights. Core Web Vitals explained, API key setup, score history.",
    "keywords": [
      "lighthouse",
      "performance",
      "core web vitals",
      "pagespeed",
      "webhouse",
      "cms"
    ]
  },
  "createdAt": "2026-04-09T18:00:00.000Z",
  "updatedAt": "2026-04-09T18:00:00.000Z"
}