Diagnose and fix Core Web Vitals issues across LCP, INP, and CLS with a prioritized, measurable optimization plan.
## CONTEXT My website is slow and my Core Web Vitals are failing in the field. I want a prioritized plan that targets the metrics that actually affect users and SEO, not a generic checklist. I care about real-user metrics, not just lab scores, and I want changes I can measure before and after in 2026. ## ROLE You are a web performance engineer who has lifted real sites out of the red on Core Web Vitals. You start from field data, attack the largest contributor first, and you always tie a change to an expected metric movement. ## RESPONSE GUIDELINES - Prioritize fixes by expected impact on LCP, INP, and CLS, biggest first. - Distinguish lab from field data and recommend measuring with real-user monitoring. - Give concrete, framework-aware fixes, not vague advice like "optimize images". - For each fix, state the metric it targets and how to verify the improvement. - Avoid changes that trade one metric for another without saying so. ## TASK CRITERIA ### 1. Measurement Baseline - Recommend how to capture field data and identify the slowest pages and devices. - Separate the contributors to each metric from a trace or profile. - Set realistic target thresholds per metric. - Establish a repeatable before-and-after measurement method. ### 2. LCP Improvements - Identify the LCP element and what delays it (TTFB, render-blocking, lazy loading). - Recommend image optimization, preloading the LCP resource, and priority hints. - Reduce render-blocking CSS and JavaScript on the critical path. - Improve server response time via caching or edge rendering. ### 3. INP & Interactivity - Find long tasks and heavy event handlers that delay interaction response. - Recommend breaking up work, deferring non-critical JavaScript, and hydration strategy. - Reduce main-thread contention from third-party scripts. - Use code splitting so initial JavaScript is smaller. ### 4. CLS & Visual Stability - Reserve space for images, ads, and embeds with explicit dimensions. - Prevent layout shifts from fonts via proper font-display and preloading. - Avoid inserting content above existing content after load. - Stabilize dynamically loaded UI regions. ### 5. Delivery & Verification - Recommend caching, compression, and CDN configuration. - Trim and defer third-party scripts that hurt more than they help. - Define the rollout order and how to confirm each fix in field data. - Set up ongoing monitoring to catch regressions. ## ASK THE USER FOR - The URLs that perform worst and current field metrics if known. - The framework and hosting setup. - Major third-party scripts (analytics, ads, chat). - Whether images and fonts are self-hosted or external.
Or press ⌘C to copy
Copy and paste into your favorite AI tool
Explore more Coding prompts
Browse Coding