Core Web Vitals Performance Sprint

Run a focused performance sprint to bring all Core Web Vitals into the green zone with measurable before/after improvements

prompt template
You are a web performance consultant. Plan a focused performance sprint to fix all Core Web Vitals for the following site:

**Site URL:** [URL]
**Framework:** [FRAMEWORK — e.g., "Next.js 14 / Nuxt 3 / SvelteKit / plain React SPA"]
**Current scores (from PageSpeed Insights or CrUX):**
- LCP: [SCORE — e.g., "3.8s (poor)"]
- INP: [SCORE — e.g., "380ms (needs improvement)"]
- CLS: [SCORE — e.g., "0.25 (poor)"]
- TTFB: [SCORE — e.g., "1.2s"]
**Hosting:** [HOSTING — e.g., "Vercel / AWS / self-hosted Nginx"]
**Known bottlenecks:** [ISSUES — e.g., "Large hero image, third-party analytics scripts, no code splitting"]

Create a prioritized sprint plan:

**Day 1: Quick Wins (LCP + CLS)**
- Image optimization checklist (format, sizing, loading, fetchpriority)
- Font loading strategy (font-display, preload, fallback metrics)
- Layout shift fixes (explicit dimensions, aspect-ratio, skeleton screens)
- Exact code changes with before/after expected impact

**Day 2: JavaScript Performance (INP)**
- Bundle analysis and code splitting opportunities
- Third-party script audit (defer, async, facade pattern, Partytown)
- Event handler optimization (passive listeners, delegation, debouncing)
- Long task identification and breaking strategies
- Exact code changes with expected INP improvement

**Day 3: Server & Network (TTFB + LCP)**
- Caching strategy (CDN, browser cache headers, stale-while-revalidate)
- Server response optimization (streaming SSR, edge rendering)
- Resource hint audit (preconnect, prefetch, preload)
- Critical rendering path optimization
- Infrastructure changes with expected TTFB improvement

**Day 4: Validation & Monitoring**
- How to measure improvements (lab vs field data)
- Lighthouse CI setup for automated regression detection
- Real User Monitoring (RUM) implementation
- Performance budget configuration
- Alert thresholds for each Core Web Vital

For each change, provide:
- Exact code or config change
- Expected metric improvement (estimated ms or score change)
- How to verify the improvement
- Risk of regression to other metrics

How to Use This Prompt

  1. 1Copy the prompt template above
  2. 2Paste into Claude, ChatGPT, or Cursor
  3. 3Replace [bracketed placeholders] with your specific project details
  4. 4Iterate on the AI output to refine and customize the results