What are the current Core Web Vitals?
The stable Core Web Vitals are Largest Contentful Paint, Interaction to Next Paint, and Cumulative Layout Shift. LCP measures when the main visible content finishes rendering. INP measures how responsive the page feels across user interactions. CLS measures unexpected visual movement. Google recommends evaluating the 75th percentile of real page visits, separated where useful by mobile and desktop.
- LCP: main-content loading
- INP: interaction responsiveness
- CLS: visual stability
Start with field data, then reproduce the problem
PageSpeed Insights and Search Console can expose Chrome User Experience Report data when a page or origin has enough traffic. That field data reflects real devices, networks, and interactions. Lighthouse and browser developer tools are valuable for reproducing likely causes, but a lab score is a controlled test rather than a substitute for real-user measurement.
- Check page-level and origin-level field data
- Test representative templates, not only the homepage
- Compare mobile and desktop behavior
Improve LCP by finding the actual largest element
The LCP element is often a hero image, heading, banner, or video poster. Improve it by reducing server delay, making the resource discoverable early, serving an appropriately sized modern image, avoiding unnecessary loading screens, and limiting render-blocking work. Do not lazy-load the above-the-fold image that must become the LCP element.
- Inspect the reported LCP element
- Preload only genuinely critical assets
- Size and compress hero media for its rendered viewport
Improve INP and CLS without stripping out the design
INP often suffers when long JavaScript tasks block the main thread or one interaction triggers too much work. Split expensive tasks, reduce third-party scripts, and keep event handlers focused. CLS improves when images and embeds reserve space, font changes are controlled, and banners or notices do not push loaded content unexpectedly. Motion can remain, but it should use efficient properties and respect reduced-motion preferences.
- Break up long main-thread tasks
- Reserve image and embed dimensions
- Avoid inserting content above what the visitor is reading
Treat performance as a release check
Performance can regress when a new hero image, tracking script, font, animation, or plugin is introduced. Test important page families during development, monitor production field data, and define budgets for image weight, JavaScript, and third-party tools. A fast homepage does not compensate for slow service, portfolio, ecommerce, or quote pages.
Primary guidance
Web.dev documents the current metrics, thresholds, field tools, and optimization workflow.