Discipline

The CWV Performance Audit Playbook

LCP, CLS, INP — measure it properly, then fix the things that actually move it.

CWV-PERFORMANCE-AUDIT-PLAYBOOK.md · 17 sections · 1,898 words · 13 KB · markdown

A repeatable performance audit: how to measure with Lighthouse and DevTools without fooling yourself, what performance budget to hold, and the culprits that come up over and over — including the dashboard-hydration anti-pattern that turns a fast app into a five-second loading screen.

What's inside

//An audit procedure using Lighthouse + DevTools that produces comparable runs
//A performance budget worth defending
//The common LCP / CLS / INP culprits, ranked
//The dashboard hydration anti-pattern and its fix
//A re-audit cadence

When to use it

Pre-launch, then every 60-90 days.

Build these first

Nothing. This one stands alone.

Straight from the file

INP replaced FID in March 2024. Lab tools (Lighthouse, DevTools) cannot measure INP without scripted interactions — it surfaces only via field data (CrUX / RUM).

Table of contents

0. Use this spec
1. The three metrics (Google CWV thresholds)
2. Lab vs field
3. URLs to test on each launch
4. Device profiles — mobile + desktop both
5. Running the audit — Chrome DevTools MCP
6. Performance budget (hard limits — set in CLAUDE.md, enforce in PRs)
7. Common LCP culprits + fixes
8. Common CLS culprits + fixes
9. Common INP culprits + fixes
10. Performance-impacting Next.js settings (lock in at scaffold time)
11. Audit artifact storage
12. REPORT.md structure
13. 60–90 day re-audit (field data)
14. The workspace-loading anti-pattern (BKE-specific, generalizes)
15. Common pitfalls
16. Kickoff prompt

How to run it

Drop CWV-PERFORMANCE-AUDIT-PLAYBOOK.md into your repo, then tell Claude Code: “Read CWV-PERFORMANCE-AUDIT-PLAYBOOK.md and implement it in this codebase.” It's written for an agent to execute end to end. Search the file for angle-bracket placeholders and swap in your own project names, domains, and keys before the first run.

↓ Download the playbook

More discipline playbooks

C-tier

← All 28 Claude templates

The CWV Performance Audit Playbook

Pre-Production Hardening

Supabase Migrations

AI Compliance Gate