Page Experience Update – Interaction to Next Paint (INP) Is Live: Your Next Steps to Improve Website User Experience & SEO

As of March 12, 2024, Interaction to Next Paint (INP) is officially a new Page Experience metric, replacing First Input Delay (FID).  

INP is now a core web vital metric as part of Google Page Experience algorithm. Meeting the requirements of INP first and foremost ensures you’re offering your website visitor the best possible user experience, driving engagement, and meeting this SEO signal to help drive your ranking on search.  

In our previous article – Page Experience Update: Interaction to Next Paint IN, First Input Delay OUT!, we covered what is INP, why Google is replacing the metric First Input Delay with Interaction to Next Paint, and touched upon what your business website needs to consider when preparing to meet the requirement of INP – response latency of less than 200ms.  

In this article, we’ll emphasize the aspects you need to consider to measure INP and an overview of how to optimize for this new Page Experience metric.   

A quick recap of the difference between FID and INP: FID gauges a singular interaction, while INP evaluates clusters of individual interactions forming part of a user action. INP provides a comprehensive view of the page’s responsiveness across its lifespan, encompassing the end-to-end latency of individual events. 

Understanding Events & Event Handling Data

Events are basically any user interaction with a website that fires a signal to mechanize an action that can be taken automatically. An example of an event is submitting a form, playing or pausing a video, clicking, hovering over the web page, selecting an element, etc.  

Event handling data involves managing user interactions with web elements. By utilizing event listeners like addEventListener(), developers can assign specific actions to these interactions. For instance, in the example of handling a click event on a button, JavaScript code is employed to change the background color of the webpage when the button is clicked. This approach enhances interactivity and user experience, crucial for improving INP on websites. 

To monitor these events effectively, you’ll need to implement Google Analytics, configure event tracking using Google Tag Manager, and establish event-based goals.  

Testing your event data for INP 

The Web Vitals Chrome Extension offers a streamlined approach to manually testing interaction latency with minimal effort. Upon installation, the extension showcases interaction data in the Dev Tools console following these steps: 

Step 1: Open Google Chrome and locate the extension icon situated to the right of the address bar. 

Step 2: Click on the extension icon to reveal a drop-down menu. 

Step 3: From the drop-down menu, select the Web Vitals extension. 

Step 4: Once the extension is selected, click on its icon again to access its settings. 

Step 5: Choose the “Options” menu from the extension settings. 

Step 6: Within the Options menu, check the box labeled “Console logging” to enable this feature. 

Step 7: After enabling console logging, click on the “Save” button to confirm and apply the changes. 

Once set up, proceed to access the console within Chrome DevTools to initiate testing of suspected interactions on your website. As you interact with the page, pertinent diagnostic data will be displayed in the console. 

Below, you’ll find an illustration of the console logging facilitated by the Web Vitals extension for interactions. This logging comprises diverse details, including timings and contextual information, facilitating the evaluation of website performance.  

Alternatively, you can utilize JavaScript within the DevTools console as an alternative method. The provided code generates identical console output to that of the Web Vitals extension for each interaction. It’s worth noting that utilizing the code snippet feature in Chrome DevTools presents a more convenient way to employ the provided JavaScript code. 

let worstInp = 0; 
 
const observer = new PerformanceObserver((list, obs, options) => { 
  for (let entry of list.getEntries()) { 
    if (!entry.interactionId) continue; 
 
    entry.renderTime = entry.startTime + entry.duration; 
    worstInp = Math.max(entry.duration, worstInp); 
 
    console.log(‘[Interaction]’, entry.duration, `type: ${entry.name} interactionCount: ${performance.interactionCount}, worstInp: ${worstInp}`, entry, options); 
  } 
}); 
 
observer.observe({ 
  type: ‘event’, 
  durationThreshold: 0, // 16 minimum by spec 
  buffered: true 
}); 

Note: A more convenient way of using the preceding code is to use the snippets feature in Chrome DevTools. 

Using Google Analytics for Real-time reports when testing new events   

Here’s a step-by-step process to test your new event (and goal) using real-time reports in Google Analytics: 

1. Configure Everything: Ensure that all configurations related to your event or goal are properly set up. 

2. Test Your Work: Before finalizing, it’s crucial to test your setup to verify that everything reports as expected. 

3. Access Real-Time Reports: Navigate to Google Analytics and access the Real-Time Reports section. 

4. Select Event or Goal Testing: Within the Real-Time reports, click on “Events” to test your events or “Conversions” to test your goals. 

5. Adjust Timeframe: By default, the view displays Active Users. For easier testing, switch to a narrower timeframe by selecting “Events (Last 30 min)” or “Goal Hits (Last 30 min)”. 

6. Initiate Testing: Now, proceed to test by visiting your website and interacting with the element you’ve set up to trigger the goal or event. 

7. Consider IP Filtering: If you’ve filtered out internal IP addresses, your data might not be tracked in Google Analytics. To ensure accurate testing, try testing on a mobile device with WiFi turned off to use mobile data and avoid the standard IP address. 

8. Review Real-Time Reports: If all configurations are correct, you should observe the event or goal trigger in real-time reports within Google Analytics. 

By following these steps, you can effectively test and validate the functionality of your events and goals using real-time reports in Google Analytics. 

Let’s move into viewing your INP performance now. 

How can you see your site’s INP Performance?  

You can evaluate your website’s INP within the Milestone Insights Dashboard.  This data is sourced from Google PageSpeed. Using Milestone Insights, we’ll provide your INP score against your direct competition and automated recommendations to improve if required under the ‘recommended fixes’ tab.  

We track both the lab and field data. Lab data is collected in a controlled environment with predefined device and network settings, whereas field data is collected from the real users visiting your site. 

However, it’s important to note that the URL needs to have been visited enough times to have an appointed value to report. In addition, when page-level data is not available for the given URL in PageSpeed Insights, the provided field data will be aggregated over the entire website.

What to do if lab and field data results are different?   

Primarily, prioritize addressing discrepancies in field data as it reflects real-world user experiences. However, it’s crucial to investigate why lab data may differ to identify optimization areas. Moreover, field data is gathered once the site is fully loaded, but poor network conditions can affect load times. In such cases, lab data can offer insights into potential improvements. Ultimately, tracking these data points is vital for identifying opportunities to enhance your Page Experience. 

Seeing bad results? How to optimize your site for INP  

While this is covered in detail in Google’s article on how to optimize for INP and covered in our last Page Experience blog, we’ll give you a summary here. Enhancing the responsiveness of your website involves dissecting interactions into three pivotal phases: input delay, processing time, and presentation delay. Each phase contributes to the overall latency of interactions, underscoring the importance of optimizing every aspect effectively. 

• Input Delay: The input delay commences when a user triggers an interaction and concludes when the event callbacks for that interaction are initiated. It’s crucial to minimize this delay by mitigating any activities that may occur on the main thread, such as script loading or timer functions. 
• Processing Time: After minimizing the input delay, the focus shifts to optimizing event callbacks. These callbacks should be lightweight to ensure swift completion. Tasks can be segmented into separate ones to prevent them from evolving into lengthy tasks that obstruct the main thread. 
• Presentation Delay: Moreover, reducing the presentation delay is imperative for ensuring a seamless user experience. This entails minimizing DOM size, utilizing CSS properties like content visibility for deferred element rendering, and being mindful of the performance implications associated with rendering HTML via JavaScript.

In summary, enhancing the Interactivity and Responsiveness (INP) of your site demands continual effort and meticulous attention to detail. By identifying and optimizing sluggish interactions, you can elevate the overall user experience and meet the expectations of your website visitors. Is your site ready for INP and to meet the Page Experience requirements? Head over here for a quick audit.