First Input Delay under 100ms and Interaction to Next Paint under 200ms

Interaction to Next Paint (INP) replaced FID as a Core Web Vitals metric in 2024. INP above 200ms at the 75th percentile is a failing score that suppresses Google search ranking (ISO-25010 time-behaviour). The root cause is always the same: JavaScript running synchronously on the main thread — form submit handlers doing JSON parsing, click handlers firing analytics events, data table sorts blocking the UI. Every millisecond the main thread is busy is a millisecond the browser cannot render the response to the user's action, making the app feel broken.

Keep event handlers lightweight by offloading heavy work off the main thread. Two primary tools:

1. Use scheduler.yield() to break up long synchronous loops:

async function processLargeDataset(items: Item[]) {
  for (let i = 0; i < items.length; i++) {
    processItem(items[i])
    if (i % 100 === 0) await scheduler.yield()  // yield to browser between chunks
  }
}

2. Move CPU-heavy computation to a Web Worker:

// src/workers/compute.worker.ts
self.addEventListener('message', (e) => {
  const result = expensiveOperation(e.data)
  self.postMessage(result)
})

// src/components/table.tsx
const worker = new Worker(new URL('../workers/compute.worker.ts', import.meta.url))
worker.postMessage(largeDataset)
worker.onmessage = (e) => setResults(e.data)

Profile INP in Chrome DevTools → Performance Insights panel to identify which interaction and which function is responsible.