core-web-vitals

Improve LCP by reducing server response time below 800ms with CDN or edge caching, preloading the LCP image with fetchpriority="high", inlining critical CSS under 14KB, and rendering content server-side instead of client-side.

Fix CLS by adding explicit width and height attributes or aspect-ratio CSS to all images, reserving min-height containers for ads and embeds, and using font-display: optional or matched font metrics to prevent text shifts.

A good INP score is 200ms or less, measured at the 75th percentile of page visits. Measure it with the web-vitals JavaScript library, Chrome DevTools Performance panel, or field data from the Chrome User Experience Report.

Yes, the guidance includes framework-specific fixes for Next.js, React, Vue, and Nuxt. Examples include using next/image with priority for LCP, useTransition and React.memo for INP, and dynamic imports for heavy components.

Slow INP usually comes from long tasks blocking the main thread, heavy event handlers, or third-party scripts competing during interactions. Break work into chunks with yielding, defer non-critical work with requestIdleCallback, and lazy-load third-party widgets.

Do not use it for general web performance work beyond the three metrics, full Lighthouse audits, or Astro-specific optimization. Those scenarios are covered by separate dedicated skills referenced in the documentation.