Frontend Performance: Core Web Vitals in 2026

Core Web Vitals are SEO-critical and user-experience-critical. The targets are clear; the patterns to hit them are mechanical.

Three metrics that matter

Core Web Vitals collapsed dozens of frontend metrics into three numbers that match what users feel. Each one maps to a perceptual moment.

• LCP (Largest Contentful Paint). When the main content is visible; under 2.5s is the target.
• INP (Interaction to Next Paint). Responsiveness to clicks and taps; under 200ms is the target.
• CLS (Cumulative Layout Shift). Visual stability; under 0.1 is the target; ad and image insertions usually drive this.
• SEO link. Google ranks on these explicitly; the metrics are user-experience and search-impact at the same time.

Percentile thresholds

• LCP < 2.5s. INP < 200ms. CLS < 0.1.
• Measured at p75 across all sessions, not just yours.

Four pattern toolkit

Hitting the targets is mechanical once you know the four levers. Each one moves a different metric; together they cover most pages.

• Image optimisation. WebP/AVIF formats, lazy loading, explicit width/height; LCP and CLS both improve.
• Critical CSS inlined. Above-the-fold CSS in the document head; defer the rest; LCP improves visibly.
• JavaScript code-splitting. Route-based chunks; smaller bundles per page; INP improves.
• SSR or SSG. Server-side rendering or static generation reduces time-to-first-paint; LCP and INP both benefit.

Mobile-specific

Mobile devices and networks are slower and more variable. Budget half what desktop allows and measure with RUM, not lab tools.

• Half the budget. Mobile users have slower CPUs and worse networks; budget half the JS, half the images, half the time.
• RUM is truth. Real-user monitoring captures actual user experience; lab tools (Lighthouse) miss real-world variability.
• p75 across devices. Track the 75th percentile of all devices; the long tail is mostly low-end mobile.
• Network-aware. Test on throttled 4G; that is what most mobile users actually have, not your office Wi-Fi.

Antipatterns

• Optimizing for Lighthouse only. Real users on mobile slower.
• No image lazy-loading. LCP destroyed.
• JS bundle > 200kb. INP suffers.

What to do this week

Three moves. (1) Apply this pattern to your slowest production endpoint. (2) Measure p99 before/after. (3) Document the win and ship the runbook so the team can reproduce.