Make the page respond faster to clicks and taps

perf.cwv.inp_needs_improvement · effort: about an hour

Why it matters

Interaction to Next Paint is the delay between a visitor's click, tap or key press and the page showing a result, and the value is above the good threshold. Trimming the JavaScript that runs on every page usually brings it into the good range.

Staged change. Do this in stages and check each one before the next, so a mistake does not break your site or your mail.

The fix

Find the slow interactions with real data. Look in the field data of PageSpeed Insights or Google Search Console, then record the interaction in the Chrome DevTools Performance panel to see which tasks block the main thread.
Break long JavaScript tasks into smaller pieces. Do the work that the visitor must see first, then yield to the browser so it can paint before the rest runs, with scheduler.yield() where available and setTimeout as a fallback.
Reduce what runs on the page. Remove or delay third-party scripts (tag managers, chat widgets, A/B testing, heatmaps, social embeds) until they are needed, load scripts with defer, and drop libraries you do not use.
Keep event handlers light, avoid reading and writing layout properties in alternating order, and keep the DOM small. A huge DOM and forced layouts make every interaction slower.
Measure again with real users, since INP is a field metric. It needs a few weeks of visits to show the effect of changes.

html

<script>
  function yieldToMain() {
    if (globalThis.scheduler && scheduler.yield) return scheduler.yield();
    return new Promise((resolve) => setTimeout(resolve, 0));
  }

  async function onClick() {
    showSpinner();            // what the visitor must see first
    await yieldToMain();      // let the browser paint
    doExpensiveWork();        // the rest can wait
  }
</script>

Read the documentation (opens in a new tab)

Scan your domain to see whether this applies to you.

Why it matters

The fix

Related