What this prompt does
This prompt diagnoses and fixes Core Web Vitals for a site at [site_url] built with [tech_stack], starting from your current [lcp], [inp], and [cls] scores and driving toward Google's "Good" thresholds. It identifies the [lcp_element] and optimizes it, then works through image formats and responsive loading, font optimization, critical CSS, JavaScript splitting, INP and main-thread work, layout-shift fixes, TTFB tuning for [hosting], and third-party script impact — ending with stack-specific code snippets and a priority order with expected gains per fix.
The structure works because Web Vitals problems are usually a handful of concrete culprits, not a mystery. Naming the [lcp_element] (often a hero image) lets the model target the single biggest LCP win directly. Supplying real [lcp], [inp], and [cls] numbers tells it which metric is worst and worth prioritizing, while [tech_stack] and [hosting] make the code snippets and TTFB advice match your actual environment instead of generic guidance. Each metric maps to a distinct set of fixes — LCP to image and render-path work, INP to main-thread and interaction cost, CLS to layout stability — so the plan reads as three focused tracks rather than one vague "make it faster," and each comes with an expected improvement so you can sequence the work by payoff.
When to use it
- Search Console flagged a Core Web Vitals regression you need to fix
- Your LCP is slow and you suspect a large hero or banner image
- You have visible layout shift from images or ads without set dimensions
- Interactions feel sluggish and INP is over the 200ms threshold
- You want stack-specific fixes rather than generic performance tips
- You need a prioritized list ranked by expected score improvement
Example output
Expect a diagnosis-then-fix report: the identified [lcp_element], a ranked list of issues across LCP, INP, and CLS, and concrete code snippets tailored to [tech_stack] — things like AVIF conversion with priority hints, font-display swap, deferred scripts, and pinned image dimensions. Each fix comes with an expected impact and a priority order, so you can tackle the biggest green-score wins first.
Pro tips
- Pull your real
[lcp],[inp], and[cls]from field data, not a single lab run, so the priorities reflect actual users - Name the
[lcp_element]accurately; if it is the hero image, AVIF plus priority hints is usually the biggest single win - Set
[tech_stack]precisely so the snippets use your real framework's loading and bundling APIs - Tell it the real
[hosting]since TTFB advice for shared hosting differs from a CDN-backed setup - The boring fixes win — pinning image dimensions to kill CLS and optimizing the LCP image often beat exotic tweaks
- Implement in the prompt's priority order and re-measure after each change rather than shipping everything blind
