Skip to content

Interaction to Next Paint

Find where an interaction waits, then move or reduce the work blocking its next visual response.

Predict first

Before you read: predict

A proctor's short console visit has a quick opening click and a sluggish later filter interaction. This visit does not qualify for an outlier exemption.

Which summary should its INP reporter use?

Pick one

The 30-second version

INP describes a page visit's near-worst interaction, not just its first click. An interaction includes waiting for handlers, executing them, and presenting the next frame. Diagnose those phases separately. Yielding splits work so rendering can proceed; it does not guarantee a paint. Give useful visual feedback before deferring work that need not block that feedback.

Find where an interaction waits, then move or reduce the work blocking its next visual response.

How it works

Step 1 of 7

INP considers interactions across the visit and normally retains the worst, with outlier handling for interaction-heavy visits. S1

Analogy: A pottery studio's glaze request

A visitor requests a change. First the potter must finish the task occupying the bench. Then the potter handles the request. Finally the changed piece must be made visible on the display shelf. Reporting only the queue before the first request misses later problems and the work after that queue.

Studio scene Interaction boundary
Request waiting for the potter Input delay
Potter handling the request Processing
Preparing its visible display Presentation
Showing an acknowledgement before later finishing work Early visual feedback

In real terms: ask whether the blocked work lies before handlers, inside them, or after them. Breaks down when: pottery completion can involve a long kiln cycle. INP ends at the next visual response; it does not wait for the application's complete business operation. No kiln duration maps to a browser threshold. Contrasting case: a potter can acknowledge a request before the piece is fired. Likewise, a page can display useful pending feedback before an asynchronous operation finishes. S1

The event-loop record owns task scheduling; the frame pack owns layout dependencies. Those mechanisms explain possible work, but this lesson attributes that work to an interaction's boundaries.

Examples, run for real

4.1 ExamHall: a report blocks feedback

EXH-1580, Proctor feedback waits behind synchronous report preparation. The fixture uses a local server that holds one synchronous response. With the hold inside the click callback, Chromium places it between the Event Timing processing boundaries. Moving that same hold before the click or into an animation callback changes its phase. The following are actual mechanisms.mjs lines. S2

worked phase fixtures: handler-boundary placements asserted

The synchronous request is a laboratory blocking device, not application guidance. The server releases each held response explicitly; there is no external request in a graded run. The browser receives trusted mouse input, and both its Event Timing entry and EventDispatch trace record are asserted. S5

4.2 Catalog: make progress visible

MR !1780, Separate proctor feedback from deferred catalog reconciliation, first shows Catalog sync queued and then runs reconciliation. One worked path crosses two rendering callbacks; a separate combined path does not. The callbacks are an explicit paint boundary, not evidence that scheduler.yield() alone schedules a paint. S3

worked worked-separate: paint before reconciliation=true; final=Catalog sync complete
worked worked-combined: paint before reconciliation=false; final=Catalog sync complete

The two worked paths use a catalog-sync acknowledgement and do not reuse D2's Saving… structures. They show that a paint opportunity must occur between a useful acknowledgement and later work; a paint opportunity is not itself proof of useful feedback. Production diagnosis should inspect what the user can actually see, as well as which stage the trace names. S1

Try it

Answer first, then check. Nothing is saved.

Question 1 of 4

A catalog dashboard from 2023 reports FID, LCP and CLS as its Core Web Vitals.

Which current three-metric list should replace it?

Pick one

Question 2 of 4

A filter button has two click listeners. The first updates a label and returns; the second prepares a report synchronously. The trace marker for the first listener has ended.

Which phase contains the second listener's work?

Pick one

Question 3 of 4

On a filter click, the Saving… label appears only after the scheduled report finishes. A review says that returning from the click listener excludes the report from the interaction.

What is the mistaken inference?

Pick one

Question 4 of 4

Three catalog-save implementations all set the same Saving… label before report work.

Which trace makes that label observable before the report begins?

Pick one

Go deeper

Pro tip

When recording a reproduction, label the interaction and preserve the Event Timing entry's interactionId alongside the trace. This helps locate a particular gesture among unrelated work. Tool documentation: PerformanceEventTiming.interactionId, read 2026-09-29. This lesson checks that trusted mouse input produces a nonzero interaction ID.

Sources

Related lessons

Checked against the tools and docs as of 2026-09-29.