Why fast sites win — and how we hit green Core Web Vitals

Speed is the most underrated feature in software. Every hundred milliseconds you shave off load time measurably lifts conversion, and every second you add quietly sends users to a competitor. Google has made it explicit: Core Web Vitals are a ranking signal, so a slow site doesn't just feel worse — it ranks lower and earns less traffic to begin with.

The mistake most teams make is treating performance as a clean-up task they'll get to before launch. They never do. By then the bundle is bloated, the images are unoptimised, and every fix fights against decisions baked in months earlier. We treat performance the way we treat accessibility or security: as a budget you set on day one and defend on every pull request.

Concretely, that budget is the three Core Web Vitals. Largest Contentful Paint (LCP) measures how fast the main content appears — we target under 2.0 seconds. Interaction to Next Paint (INP) measures how quickly the interface responds to a tap — under 200 milliseconds. Cumulative Layout Shift (CLS) measures how much the page jumps around as it loads — under 0.1. Three numbers, checked continuously, keep everyone honest.

Hitting LCP is mostly about the critical path. We render on the server so the first paint is real HTML, not a spinner waiting on JavaScript. We optimise and correctly size every image, serve modern formats, and lazy-load anything below the fold. Fonts are preloaded and swapped so text never disappears while a webfont downloads. The hero you see first is the thing we optimise hardest.

INP is a JavaScript problem. The more script you ship, the longer the main thread stays busy and the laggier every interaction feels. So we ship less of it: code-split by route, keep interactive islands small, and avoid hydrating entire pages that are really just static content. A button should respond the instant you press it, not after a 300-millisecond hydration stall.

CLS is the cheapest to fix and the most often ignored. Reserve space for images and embeds with explicit dimensions, never inject banners above content that's already visible, and animate with transforms instead of properties that trigger layout. Most layout shift is a handful of missing width and height attributes away from zero.

None of this survives without measurement. We run Lighthouse in CI to catch regressions before they merge, and we collect real-user metrics in production because lab numbers and field numbers always disagree. You can't tune what you don't measure — and once a team can see the cost of a heavy dependency, they stop adding them.