Interaction to Next Paint (INP)
Fixing Shopify INP & Cart Interaction Lag
When a shopper taps "Add to Cart" or changes a product variant, the browser must paint the next visual frame within 200ms. Here is how to diagnose and fix main-thread freezes.
Why Shopify Themes Suffer High INP
Under Google's INP standard, a slow interaction is not just an inconvenience—it actively drops shopping cart progression. When a shopper clicks "Add to Cart" and experiences a 350ms freeze, 18% of mobile shoppers tap the button repeatedly ("rage clicks"), initiating duplicate cart requests.
The Main INP Culprits on Shopify:
- Synchronous Pixel Event Handlers: Advertising scripts attaching heavy event listeners to all button clicks.
- Heavy DOM Mutations during Drawer Opening: Re-rendering entire cart drawer Liquid templates client-side on the main thread.
- Missing Yielding to the Main Thread: Long JavaScript loops executing without breaking execution into microtasks.
// How to yield the main thread before dispatching analytics
async function handleAddToCart(productId, variantId) {
// 1. Immediately trigger the visual UI loading state (0ms input delay)
updateCartButtonState({ loading: true });
// 2. Yield to the main thread so the browser can paint the UI update
await new Promise(resolve => setTimeout(resolve, 0));
// 3. Execute the network cart POST request
const response = await fetch('/cart/add.js', { ... });
// 4. Defer non-critical marketing analytics to idle time
if ('requestIdleCallback' in window) {
requestIdleCallback(() => {
window.fbq?.('track', 'AddToCart', { content_ids: [productId] });
});
} else {
setTimeout(() => {
window.fbq?.('track', 'AddToCart', { content_ids: [productId] });
}, 100);
}
}Audit Your Store's INP Today
Check your CrUX p75 INP percentile against the 200ms target.