Core Web Vitals: Engineering Frontends That Feel Instant

Speed is a feature, and Google ranks for it. Hitting green Core Web Vitals is an engineering discipline, not a last-minute tweak. Here's how we build frontends that load fast and stay fast.

The Three Metrics

• LCP (Largest Contentful Paint): How fast the main content appears — target under 2.5s
• INP (Interaction to Next Paint): How responsive the page feels — target under 200ms
• CLS (Cumulative Layout Shift): How stable the layout is — target under 0.1

Winning LCP

• Server-render or statically generate the above-the-fold content
• Optimize and properly size your hero image — modern formats, correct dimensions
• Preload the critical resources, defer everything else
• Cut render-blocking CSS and JavaScript

Winning INP

• Break up long JavaScript tasks so the main thread stays free
• Defer non-critical work until after interaction
• Ship less JavaScript — code-split and lazy-load aggressively

Winning CLS

• Always set explicit width and height on images and media
• Reserve space for ads, embeds, and dynamic content
• Avoid injecting content above existing content after load

Measure Real Users

Lab scores lie. Collect field data from real users with the web-vitals library and watch the 75th percentile — that's what Google scores and what most users feel.

The Payoff

Faster pages convert better and rank higher. Treating performance as a continuous engineering metric — tracked in CI and on dashboards — keeps it from silently regressing with every new feature.