ZeonTools
Interaction to Next Paint (INP)
In March 2024, Google officially deprecated First Input Delay (FID) and replaced it with Interaction to Next Paint (INP) as a Core Web Vital metric. While FID only measured the hardware interrupt delay of the first click on page load, INP measures the complete end-to-end latency of all interactions across the entire lifecycle of the application.
If a user clicks a dropdown, INP measures the exact millisecond delta between the physical click and the moment the browser's GPU paints the open menu on the screen. If this timeline exceeds 200ms, your SEO score degrades. If it exceeds 500ms, your page receives a "Poor" ranking penalty, severely impacting visibility on Google Search.
The LoAF (Long Animation Frames) API
Historically, developers relied on the "Long Tasks API" to debug INP. However, Long Tasks only measured JavaScript execution time; they completely ignored the rendering phase (CSS recalculations and layout). Since INP measures time to the "Next Paint", Long Tasks were fundamentally flawed for debugging.
Chrome 123+ introduced the Long Animation Frames (LoAF) API. A LoAF trace (which our tool simulates) encapsulates the entire frame, including script execution, style calculation, and render time. Crucially, the LoAF JSON payload includes an attribution array (scripts) that pinpoints the exact JavaScript function and file that caused the blockingDuration.
Reflow vs. Repaint: The Layout Thrashing Engine
Our AST Analyzer specifically detects "Layout Thrashing" by differentiating between Reflows and Repaints:
- Reflow (Heavy): Triggered by reading geometry (e.g.,
element.offsetWidthorwindow.getComputedStyle()). The browser is forced to halt the Main Thread, recursively calculate the CSS Box Model for the entire DOM tree, and return the value. Interleaving reads and writes forces multiple synchronous Reflows per frame, instantly failing INP. - Repaint (Light): Triggered by changing composite-only properties (e.g.,
opacityortransform). These mutations bypass the CPU layout engine entirely and are handled directly by the GPU composite layer, causing zero impact on INP Processing Time.
V8 Engine JIT Compilation Delay
One of the most insidious causes of high Input Delay is V8's Just-In-Time (JIT) compiler. When you ship massive JavaScript bundles (e.g., sending an entire unused React library to the client), the V8 engine must parse, compile to bytecode, and optimize the script before it can execute your event handler.
If the user clicks a button exactly while V8 is compiling a third-party analytics payload on the Main Thread, the hardware interrupt is ignored until compilation finishes. This manifests as extreme Input Delay. Code splitting and deferring non-critical scripts is the only architectural fix.
scheduler.yield() Mechanics
To fix heavy processing blocks, developers traditionally used the setTimeout(fn, 0) hack to push remaining work to the back of the task queue. However, this allowed third-party scripts to steal the thread.
The modern Chromium Web API await scheduler.yield() acts as a surgical pause button. It tells V8: "Pause my execution, paint the visual UI update to the screen right now, and then resume my script at the very front of the queue, ahead of other pending tasks."