What are Core Web Vitals?
Answer
Core Web Vitals are user-centered loading, responsiveness, and visual-stability metrics: Largest Contentful Paint, Interaction to Next Paint, and Cumulative Layout Shift. Use field data to prioritize improvements on real user journeys.
Context
Web performance is measured at the user level. Protect the critical rendering path, reduce main-thread work, and validate improvements against field data rather than bundle size alone.
Example
html
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high" />
<img src="/hero.webp" width="1200" height="675" alt="Product dashboard" />Preloading the verified LCP image and reserving its dimensions can improve loading and prevent layout shift.
Practical considerations
- Choose the approach from the requirement and constraints, not from habit.
- Include validation, error handling, and cleanup where the boundary requires them.
- Verify the observable result with focused tests or measurement.
Follow-up prompts
- What failure mode would you expect if this were implemented incorrectly?
- How would you test this behaviour?
- What changes when the feature must scale to a larger application or team?
In practice
For this hard-level topic, make assumptions explicit, choose the smallest safe implementation, and verify the behavior at the relevant boundary.