Web Vitals
Core Web Vitals score three things a user feels: how fast the main content loads
(LCP), how much the layout jumps (CLS), and how quickly the page responds to
input (INP). They go red for different reasons, so a generic speedup rarely
moves them. Measure real users, find the specific cause of each, then apply a
fix that targets it.
Method
- Measure field data, not just the lab. A Lighthouse run is reproducible
but synthetic. Pull real-user numbers from the CrUX report or the
web-vitals library and optimize the p75 that users actually experience.
- Fix LCP by speeding the largest element. Largest Contentful Paint is
usually a hero image or a heading. Preload it, serve a modern image format,
remove render-blocking CSS and JavaScript, and cut server response time. Aim
for under 2.5 seconds at p75.
- Fix CLS by reserving space. Cumulative Layout Shift comes from images
with no dimensions, injected banners and ads, and late-swapping fonts. Set
explicit width and height or
aspect-ratio, reserve slots for dynamic
content, and never insert content above what is already visible. Aim for
under 0.1.
- Fix INP by shrinking main-thread work. Interaction to Next Paint suffers
when a long task blocks the event handler. Break up long JavaScript tasks,
defer non-critical work, cut hydration cost, and debounce heavy handlers. Aim
for under 200 milliseconds.
- Attribute each regression before fixing it. Use the Performance panel and
the
web-vitals attribution build to name the exact element, script, or
shift behind the number. Do not apply a fix and hope it lands.
- Verify on a throttled mid-tier device. Test under 4x CPU throttling and
Slow 4G, not on your laptop. A metric that is green on desktop is often red
on the median phone.
Checks
- Are you reading p75 field data, or only a lab score on fast hardware?
- Is each of LCP, CLS, and INP traced to a specific element or script?
- Do the three metrics sit under 2.5s, 0.1, and 200ms at p75?
- Did the fix move the field metric on a throttled device, not just Lighthouse?
Boundaries
Shrinking the JavaScript that inflates INP and LCP is bundle-size; right-sizing
the images that dominate LCP is image-optimization; loading fonts without
shifting layout is font-loading. This skill ties fixes to the metric: the
mechanics live in those skills.
1---2name: web-vitals3description: Improve LCP, CLS, and INP by measuring field data, tracing each metric to its specific cause, and applying the fixes known to move that number. Use when Core Web Vitals are failing or a page feels slow to load, settle, or respond.4---56# Web Vitals78Core Web Vitals score three things a user feels: how fast the main content loads9(LCP), how much the layout jumps (CLS), and how quickly the page responds to10input (INP). They go red for different reasons, so a generic speedup rarely11moves them. Measure real users, find the specific cause of each, then apply a12fix that targets it.1314## Method15161. **Measure field data, not just the lab.** A Lighthouse run is reproducible17 but synthetic. Pull real-user numbers from the CrUX report or the18 `web-vitals` library and optimize the p75 that users actually experience.192. **Fix LCP by speeding the largest element.** Largest Contentful Paint is20 usually a hero image or a heading. Preload it, serve a modern image format,21 remove render-blocking CSS and JavaScript, and cut server response time. Aim22 for under 2.5 seconds at p75.233. **Fix CLS by reserving space.** Cumulative Layout Shift comes from images24 with no dimensions, injected banners and ads, and late-swapping fonts. Set25 explicit width and height or `aspect-ratio`, reserve slots for dynamic26 content, and never insert content above what is already visible. Aim for27 under 0.1.284. **Fix INP by shrinking main-thread work.** Interaction to Next Paint suffers29 when a long task blocks the event handler. Break up long JavaScript tasks,30 defer non-critical work, cut hydration cost, and debounce heavy handlers. Aim31 for under 200 milliseconds.325. **Attribute each regression before fixing it.** Use the Performance panel and33 the `web-vitals` attribution build to name the exact element, script, or34 shift behind the number. Do not apply a fix and hope it lands.356. **Verify on a throttled mid-tier device.** Test under 4x CPU throttling and36 Slow 4G, not on your laptop. A metric that is green on desktop is often red37 on the median phone.3839## Checks4041- Are you reading p75 field data, or only a lab score on fast hardware?42- Is each of LCP, CLS, and INP traced to a specific element or script?43- Do the three metrics sit under 2.5s, 0.1, and 200ms at p75?44- Did the fix move the field metric on a throttled device, not just Lighthouse?4546## Boundaries4748Shrinking the JavaScript that inflates INP and LCP is bundle-size; right-sizing49the images that dominate LCP is image-optimization; loading fonts without50shifting layout is font-loading. This skill ties fixes to the metric: the51mechanics live in those skills.
Amey-Thakur