PerformanceIsPerception

There's a temptation to optimize for numbers that don't matter. Bundle size, TTFB, server response time - these are real signals, but they describe the delivery of a page, not the experience of using it. Two pages with identical Lighthouse scores can feel completely different to a real user.

The metrics that matter are the ones that map to perception.

The three that count

LCP - does anything appear?

Largest Contentful Paint measures when the biggest above-the-fold element becomes visible. Not when the document loads. Not when the framework boots. When the user sees something they came for.

A page can score perfectly on every other metric and still feel slow if LCP is bad. A page can score mediocre everywhere else and feel fast if LCP is under 1.5 seconds.

INP - does it respond when I touch it?

Interaction to Next Paint measures the worst input-to-response time during a session. Click a button, type a character, tap a link - INP measures the slowest of these. Below 200ms feels instant. Above 500ms feels broken.

INP is harder to fix than LCP because it's not about the initial load. It's about every interaction afterward. Long-running effects, expensive renders, synchronous deserialization - anything that blocks the main thread during a user action shows up here.

CLS - does the layout stop moving?

Cumulative Layout Shift counts the visual jank of late-arriving images, ads, fonts, embeds. Below 0.1 feels stable. Above 0.25 feels like quicksand.

CLS is usually the cheapest to fix and the most ignored. Reserve aspect ratios. Specify image dimensions. Use font-display: swap with size descriptors. Don't insert content above the user's reading position after load.

What I actually do

For LCP: render the hero on the server, ship the critical CSS inline, no client-side data fetching for content above the fold, use next/image with priority on the LCP element. For INP: defer everything that isn't immediately interactive, virtualize long lists, never run sync JSON.parse on multi-MB strings during a render.

For CLS: explicit width/height on every image and embed, reserve ad slots with min-height, use CSS aspect ratios for responsive media, never inject banners above the fold post-load.

// Reserve ad slot space so AdSense fills don't shift content.
<div className="ad-slot ad-slot--in-article">
  <ins className="adsbygoogle" data-ad-client={CLIENT} data-ad-slot={SLOT} />
</div>

.ad-slot--in-article {
  min-height: 280px;
}

The point isn't the specific CSS - it's that reserved space is non-negotiable.

The mental model

Don't optimize for the score. Optimize for the feeling. The score is a proxy. When you focus on what the user perceives, the score follows.