Google’s Core Web Vitals measure key aspects of user experience. The Core Web Vitals report shows how your pages perform, based on real world usage data (sometimes called field data). In your metric type report, you may wonder why the INP is rated as ‘Poor’ and how to fix it. This guide will walk you through all needed steps. Let’s dive in! 

Interaction to Next Paint (INP)

Interaction to Next Paint (INP) is rated “poor” when responses to user actions take longer than 500 milliseconds. This delay causes noticeable lags in visual feedback, frustrating visitors and reducing engagement.

Practical steps to optimize INP score:

1. Diagnose the Problem: First, you need to identify which interactions are slow. INP measures the latency of all user interactions, from input delay to the next visual paint. You can use tools to find and diagnose these bottlenecks.
   
1. Field Data: Use Real User Monitoring (RUM) tools to collect data from actual users. This is the most accurate way to find out which specific interactions are causing the worst scores on your site.
2. Lab Data: For a quick check, use browser developer tools like Chrome DevTools Performance panel. You can record a trace of your interactions to pinpoint where the main thread is being blocked. The Web Vitals Chrome Extension can also provide on-the-spot diagnostic information.
3. Shopify suggests using tools and methods to identify which scripts are causing the largest delays (long tasks, rendering updates).
   
   
2. Optimize Your Code: After identifying the slow interactions, focus on these areas to improve your code:
   
1. Break up Long Tasks: If a task takes more than 50 milliseconds, it can block the main thread and delay user input. Break these long tasks into smaller, asynchronous chunks. Use setTimeout or requestIdleCallback to defer non-essential work until the browser is idle.

Added setTimeout to the HTML.

1. Reduce JavaScript Execution Time: Minimize your JavaScript payload by using code splitting, lazy loading, and removing unused code. This reduces the time the browser spends parsing and executing scripts.
2. Provide Immediate Visual Feedback: For complex interactions that take longer to process, provide immediate visual feedback (e.g., a loading spinner or progress bar). This gives the user a sense that their input has been received and something is happening, even if the full response is still being processed.
3. Avoid Excessive DOM Size: A large Document Object Model (DOM) can make rendering updates expensive and slow. Keep your DOM as lean as possible by removing unnecessary elements.
4. Use Web Workers: Offload heavy or complex JavaScript computations to a web worker. This keeps the main thread free to handle user interactions without delay.
   

General Best Practices: 

1. Optimize CSS: Use efficient CSS selectors and reduce the complexity of your styles to minimize rendering times.
2. Audit and remove unused or heavy apps / third-party scripts: Many Shopify stores suffer from “script bloat” — apps or third-party code that’s still present even if the app isn’t used. 
   
1. Evaluate which apps are essential and which ones harm performance more than they help.
2. Load third-party scripts only when they are needed.
   
3. Monitor continuously: INP optimization is an ongoing process. Regularly monitor your site's performance to track your progress and identify new issues.
4. Minimize layout thrashing: Avoid forcing the browser to repeatedly recalculate element positions and sizes.
   

What This Means in Plain Language

Simply put, poor INP happens when your site feels slow to react after someone clicks, taps, or types. To make interactions feel faster and smoother:

1. Break down big, heavy tasks into smaller ones so the browser doesn’t freeze up.
2. Cut down on unnecessary or bulky JavaScript so clicks and taps respond more quickly.
3. Show users something right away (like a loading spinner) if an action takes time to finish, so they know the site is responding.
4. Keep your pages lean—remove extra elements, unused apps, or third-party code that slows things down.
5. Move heavy background work off the main thread, so it doesn’t block interactions.
6. Regularly monitor your site’s performance to catch new issues before they pile up.

Now you know what leads to poor Core Web Vitals metric types - INP. It’s best to check this component frequently and fix any errors as soon as possible. If you need any support on this, the Tapita team is here to help.