webhouse.appwebhouse.appdocs

Monitor your site's performance, accessibility, SEO, and best practices with integrated Google PageSpeed Insights scanning.

Overview

The Lighthouse page in CMS admin scans your deployed site via Google PageSpeed Insights and gives you four scores:

  • Performance — page load speed, rendering, interactivity
  • Accessibility — screen readers, contrast, ARIA, keyboard navigation
  • SEO — meta tags, crawlability, structured data
  • Best Practices — HTTPS, image formats, console errors, deprecated APIs

Scores use Google's official thresholds: 🟢 90-100 (good), 🟡 50-89 (needs work), 🔴 0-49 (poor).

Core Web Vitals

Core Web Vitals are the metrics Google uses for search ranking. They measure real-world user experience:

MetricWhat it measuresGoodNeeds workPoor
LCP (Largest Contentful Paint)How fast the main content loads< 2.5s2.5–4.0s> 4.0s
CLS (Cumulative Layout Shift)How much the layout shifts during load< 0.10.1–0.25> 0.25
FCP (First Contentful Paint)When first text/image appears< 1.8s1.8–3.0s> 3.0s
TTFB (Time to First Byte)Server response time< 800ms800–1800ms> 1800ms
INP (Interaction to Next Paint)Response time to user input< 200ms200–500ms> 500ms

How to run a scan

  1. Navigate to Tools → Lighthouse in the sidebar
  2. Click Run Scan
  3. Both mobile and desktop audits run in parallel — results appear side by side
  4. Wait 10-30 seconds for Google to analyze your site

The site must be publicly accessible — localhost URLs cannot be scanned. Set your production URL as Preview URL in Site Settings.

Opportunities & Diagnostics

Opportunities are specific improvements with estimated time savings:

  • "Reduce unused JavaScript" — save 0.6s
  • "Serve images in next-gen formats" — save 1.2s
  • "Eliminate render-blocking resources" — save 0.4s

Diagnostics flag issues that don't have direct time savings but indicate problems:

  • DOM size too large
  • Missing cache headers
  • Excessive network requests

Score History

Every scan is saved. The history table shows your scores over time so you can track improvements after optimizations.

API Key Setup

Lighthouse 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:

Via Google Cloud Console (web)

  1. Go to Google Cloud Console → PageSpeed Insights API
  2. Select or create a project
  3. Click Enable
  4. Go to Credentials
  5. Click Create Credentials → API Key
  6. Copy the key
  7. In CMS admin: when you see the quota error, paste your key in the setup form

The key is stored per-site in _data/site-config.json as psiApiKey.

Via gcloud CLI

If you have gcloud CLI installed:

bash
# Authenticate (opens browser)
gcloud auth login

# Enable the API
gcloud services enable pagespeedonline.googleapis.com --project=YOUR_PROJECT

# Create an API key restricted to PSI only
gcloud services api-keys create \
  --display-name="CMS Lighthouse" \
  --project=YOUR_PROJECT \
  --api-target=service=pagespeedonline.googleapis.com

The key is returned in the output as keyString. Paste it in CMS admin.

Installing gcloud CLI

bash
# macOS (Homebrew)
brew install google-cloud-sdk

# Or download installer
curl https://sdk.cloud.google.com | bash
exec -l $SHELL
gcloud init

For other platforms, see the official install guide.

Tags:AnalyticsSEODeploy: Vercel
Previous
Deploy
JSON API →Edit on GitHub →