Make Shopify interactions more responsive.

Follow an interaction to the next paint

Input delay, processing, and presentation delay contribute to the time before visible feedback. Inspect the interaction that feels slow—opening a menu, choosing a variant, or changing a filter—rather than assuming one particular script is responsible.

Good INP is at most 200 ms. Above 200 ms through 500 ms needs improvement; above 500 ms is poor. A 350 ms example therefore needs improvement. Visit-level INP includes outlier handling; aggregate field reporting uses the 75th percentile across visits. A single interaction trace is a diagnostic example, not the entire field score.

Yield between noncritical tasks

Make the essential UI change, then allow the browser to schedule a rendering opportunity before continuing noncritical work. Long microtask chains do not provide the same yield to the browser. Feature detection keeps the fallback usable.

The helper below accepts application callbacks. The calling component must handle errors and stale selections; it should not announce a successful network mutation before the response confirms it.

export function yieldToBrowser() {
  if (globalThis.scheduler?.yield) {
    return globalThis.scheduler.yield();
  }
  return new Promise(resolve => setTimeout(resolve, 0));
}

export async function respondToSelection(showSelection, doSecondaryWork) {
  showSelection();
  await yieldToBrowser();
  await doSecondaryWork();
}

Make the audit repeatable

1. Reproduce the interaction on a representative mobile device.
2. Inspect its trace for long tasks, repeated layouts, and expensive rendering.
3. Remove unnecessary work or split it without breaking the user-visible state.
4. Test rapid repeated inputs, keyboard use, and failure paths.
5. Compare field measurements after release. A Lighthouse loading score is not a substitute for field INP.