perf/yield-long-tasks

Why

While a long task runs, the page cannot paint the result of a click or key press. INP measures that delay for the slowest interactions; "good" is 200 ms or less at the 75th percentile. Big re-renders, JSON parsing, analytics and validation inside a handler are the usual causes.

Fix

In a handler, update the UI first, then yield and do the rest (saving, analytics, recalculation). Split loops over large data into chunks and yield between them with scheduler.yield() where it exists and a setTimeout fallback. Move pure computation to a Web Worker. Measure with the DevTools Performance panel and the web-vitals attribution build.

Examples

const yieldToMain = () => (globalThis.scheduler?.yield ? scheduler.yield() : new Promise((r) => setTimeout(r, 0)))
button.addEventListener('click', async () => {
  showSpinner()          // visible update first
  await yieldToMain()
  await saveAndTrack()   // the rest after the next paint
})

Sources

• web.dev, Interaction to Next Paint
• web.dev, Optimize long tasks
• MDN, Scheduler yield() method

Read it in the terminal

npx github:dawidolko/frontend-skills explain perf/yield-long-tasks