Fix a Poor Interaction to Next Paint Measured From Real Users

What is this warning?

Chrome's field data shows that interactions on this page — clicks, taps and key presses — take more than 500 milliseconds to produce a visible response for at least a quarter of real visits. The page fails Google's Interaction to Next Paint assessment. INP is caused by JavaScript occupying the main thread when the user acts, or by an event handler that does too much work before the browser can paint.

How to Fix This Issue

button.addEventListener('click', () => {
  recalculateEverything();   // 400ms of work
  renderResults();
});

button.addEventListener('click', async () => {
  button.classList.add('is-busy');           // paints right away
  await scheduler.yield?.() ?? new Promise(r => setTimeout(r));
  recalculateEverything();
  renderResults();
});