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
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
- 1Copy the prompt template above
- 2Paste into Claude, ChatGPT, or Cursor
- 3Replace [bracketed placeholders] with your specific project details
- 4Iterate on the AI output to refine and customize the results
More Performance Prompts
Related performance templates from the vault
React Memo Optimization Audit
Use this prompt to react memo optimization audit with AI assistance
Server Response Time Optimizer
Use this prompt to server response time optimizer with AI assistance
Next.js Performance Optimization
Optimize a Next.js application for Core Web Vitals and loading speed
Core Web Vitals Optimization Audit
Analyze and fix Core Web Vitals issues for better SEO and UX
You Might Also Like
Prompts from other categories that share similar tags
SQL Query Optimizer
Optimize slow SQL queries with explain analysis
Performance Bottleneck Finder
Identify and fix performance issues in slow code
Memory Leak Detective
Systematically identify and fix memory leaks in Node.js or browser applications
React Server Component Data Pattern
Implement efficient data fetching patterns with React Server Components
Keep Exploring the Vault