How do I fix Core Web Vitals issues?

Diagnose first: Google Search Console (Experience → Core Web Vitals) shows real user data. PageSpeed Insights shows lab data with specific recommendations. Fix the metrics with the worst scores first. Fix LCP (loading): identify the largest element on your page (usually hero image or heading). Preload it with <link rel="preload">. If it is an image: compress, convert to WebP/AVIF, set explicit width/height, and serve appropriate sizes via srcset. If it is text: preload the font file. Reduce server response time (TTFB) with caching, CDN, or static generation. Fix CLS (visual stability): add explicit width/height to all images and iframes. Reserve space for ads and dynamic content. Avoid inserting elements above existing content after page load. Use font-display: optional or swap with size-adjust to prevent font-swap shift. Fix INP (interactivity): reduce main-thread JavaScript. Break long tasks into smaller chunks using requestIdleCallback or setTimeout. Defer non-critical JavaScript. Remove unused JavaScript (audit with Chrome DevTools Coverage tab). Use web workers for heavy computation. Priority order: fix issues on your highest-traffic pages first. Core Web Vitals are measured per page, and Google ranks pages, not sites. A poor CWV score on your homepage matters more than on a deep archive page.