Fix Interaction to Next Paint (INP) on Shopify: Mobile Tap Responsiveness

1. The Technical Problem

INP replaced First Input Delay (FID) as a core Google ranking factor in 2024. It measures the latency of every single user tap, click, and keypress across the session.

When a customer taps 'Add to Cart', heavy tracking pixels, variant selectors, and drawer animations execute synchronously on the main thread, freezing the UI for hundreds of milliseconds.

2. Engineering Resolution Strategy

1. Provide immediate optimistic UI feedback (e.g., button loading spinner) in less than 50ms using `requestAnimationFrame`. 2. Yield to the main thread using `scheduler.yield()` or `setTimeout(0)`. 3. Decouple analytics event dispatching from visual cart updates.

<!-- High-Performance INP Add-to-Cart Pattern -->
<script>
  async function handleAddToCart(event) {
    event.preventDefault();
    const btn = event.currentTarget;
    // 1. Instant optimistic visual response
    btn.setAttribute('aria-busy', 'true');
    btn.classList.add('is-loading');

    // 2. Yield thread to let browser paint visual change
    await new Promise(r => setTimeout(r, 0));

    // 3. Perform network dispatch asynchronously
    const res = await fetch('/cart/add.js', {
      method: 'POST',
      body: new FormData(btn.closest('form')),
      headers: { 'Accept': 'application/json' }
    });
    
    // 4. Update UI
    btn.removeAttribute('aria-busy');
    btn.classList.remove('is-loading');
  }
</script>

💡 Pro-Tip: Always create a duplicate theme backup before editing theme.liquid or snippet files.

Frequently Asked Questions