Deconstructing Interaction to Next Paint (INP)

In March 2024, Google formally promoted Interaction to Next Paint (INP) to a Core Web Vital, replacing the obsolete First Input Delay (FID). While FID only measured the delay of the user's very first interaction, INP tracks the latency of every single interaction—clicks, taps, keyboard presses—across the user's entire session.

INP measures the duration from when a user interacts to the precise frame when the browser paints visual feedback:

INP Breakdown 
INP = Input Delay (waiting for main thread)
    + Processing Duration (executing event callbacks)
    + Presentation Delay (layout, styling, composition, and screen paint)

If your website attaches heavy JavaScript loops to scroll or input listeners, the main thread locks up, causing the interface to feel sluggish or unresponsive.

Accelerating Largest Contentful Paint (LCP)

Largest Contentful Paint measures how quickly the primary content element—typically the article's H1 or hero image—is rendered on screen. To achieve an LCP of under 1.8 seconds:

  • Server-Side Render (SSR) the Main Heading: Deliver the article text in the initial HTTP payload so the browser does not wait for client JavaScript bundles to download before showing text.
  • Avoid Lazy-Loading Above-the-Fold Images: Never place loading="lazy" on the featured hero image. Priority hero assets should be declared with fetchpriority="high".

Taming Cumulative Layout Shift (CLS)

There are few web experiences more irritating than attempting to click a link, only for the text to jump unexpectedly under your thumb because an image or banner just loaded above it.

CLS must be maintained below 0.1. The solution is straightforward: always reserve aspect ratios in CSS:

CSS Aspect Ratio Reservation 
.article-featured-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background-color: var(--color-surface-subtle);
}

The Vanilla CSS Performance Advantage

Modern CSS features—such as CSS custom properties (variables), native nesting, container queries, and subgrid—provide everything needed for responsive, premium design systems. Eliminating heavy CSS-in-JS runtimes ensures zero JavaScript parse overhead for styling, keeping the main thread free for swift user interactions.