A key aspect of a positive user experience is website responsiveness. Sluggish websites that fail to respond promptly to user interactions can lead to frustration and abandonment.
Google's Core Web Vitals, a set of metrics designed to evaluate website user experience, includes Interaction to Next Paint (INP) as a crucial measure of website responsiveness. Google added INP was introduced as an experimental measure to Search Console in May of 2022, and officially into the Core Web Vitals report in March of this year. The official Core Web Vitals documentation was also recently updated with new details on INP scoring.
Understanding and optimizing INP is vital for website owners striving to deliver a seamless and satisfying experience for their users. This article explores INP, provides a detailed guide for auditing your INP score based on Google's updated documentation, and offers a comprehensive FAQ section to address common queries.
image via web.dev
What is INP?
Interaction to Next Paint (INP) is a Core Web Vital metric that measures how long it takes a website to respond to user interactions such as clicks, taps, and keyboard inputs.
Unlike the now-retired First Input Delay (FID) metric, which only considered the delay of the first interaction, INP evaluates the latency of all interactions on a page, offering a more comprehensive and accurate picture of the actual user experience.
A lower INP score indicates a more responsive website that provides quick and seamless feedback to user actions.
Why is INP Important?
INP is a critical metric because it directly impacts user perception of your website's performance.
A website that responds quickly to interactions feels smooth, engaging, and reliable. Conversely, a website with a high INP score can feel sluggish and unresponsive, leading to a negative user experience and potential issues with indexation.
Key points about INP:
It reflects real-world user experience by measuring responsiveness throughout the entire page lifecycle, recognizing that users spend most of their time on a page after it loads.
It measures the time it takes for the browser to present visual feedback after an interaction. This visual feedback is crucial because it informs the user that their action has been registered and the website is processing their request.
It encompasses the time it takes to process various events within an interaction, such as "tap" interactions on a touchscreen (pointerup, pointerdown, and click events), and keystrokes (keydown, keypress, and keyup events). The event with the longest duration contributes to the interaction's total latency.
It measures the responsiveness of interactions that occur both in the main document and within iframes embedded on the page.
How INP is Scored
Google has defined specific thresholds for INP scores, categorizing website responsiveness into three levels:
Good - Scores under 200 milliseconds (ms) indicate good responsiveness.
Needs Improvement - Scores between 200 ms and 500 ms suggest that the website's responsiveness could be better.
Poor - Scores over 500 ms indicate poor responsiveness and highlight areas requiring significant optimization.
These thresholds apply to both mobile and desktop devices. While desktop environments often have better hardware and network capabilities, enabling easier achievement of good INP scores, user expectations for responsiveness remain consistent across devices. Because of this, optimizing INP for both mobile and desktop users is very important.
Auditing Your INP Score
Now that you have a clear understanding of INP and its importance, let's outline a step-by-step process for auditing your website's INP score, based on Google's updated documentation:
Step 1: Measure Your Current INP Score
Begin by using tools like Google PageSpeed Insights to measure your website's current INP score. This tool provides valuable field data, reflecting the actual user experience on your website. You can also use Real User Monitoring (RUM) tools to gather more detailed data about individual user interactions and identify specific areas for improvement.
Step 2: Prioritize Mobile Performance
Recognize that the INP scoring thresholds are primarily based on the performance limitations of mobile devices. Mobile devices generally have more constrained hardware and network capabilities compared to desktops. Prioritizing mobile performance optimization is critical to achieving good INP scores.
Step 3: Consider Lower-End Devices
Pay close attention to how your website performs on lower-end mobile devices, as these devices often have limited processing power and slower internet connections.
Emulate these environments during your audit to identify potential bottlenecks and optimize your website for a wider range of user devices.
Step 4: Benchmark Against Top Sites
The INP scoring thresholds were also influenced by an analysis of the performance of the top 10,000 websites globally.
Use competing websites as benchmarks to gauge realistic achievability of good INP scores. Analyze their performance and identify best practices you can adopt to improve your website's responsiveness.
Step 5: Identify Problem Interactions
Utilize both field and lab data to pinpoint specific user interactions contributing to high INP scores. RUM tools can highlight problematic interactions in real-world scenarios, while lab testing allows you to reproduce these interactions and investigate the underlying causes.
Analyze user flows and focus on interactions that occur during page load, as this is when the main thread is often busiest and most prone to delays.
Step 6: Optimize for Responsiveness
Implement performance optimization techniques based on your audit findings. Common techniques include:
Optimizing JavaScript execution: Reduce the amount and complexity of JavaScript code, defer non-critical scripts, and use web workers to offload processing to background threads.
Optimizing rendering performance: Avoid large, complex layouts and layout thrashing, reduce the complexity of style calculations, and optimize DOM size.
Once nice thing about Googles PageSpeed Insights tool is that it gives us similar recommendations to the above, and helps send us in the right direction for optimization.
Step 7: Continuously Monitor and Improve
Regularly monitor your INP score using tools like Google PageSpeed Insights and track your progress over time. As you implement optimizations, continue to measure the impact of these changes and refine your approach for continuous improvement.
Also monitor Google Search Consoles Core Web Vitals Report as this may give a more accurate representation of how your site's performance is at scale.
INP FAQ
How is INP different from First Input Delay (FID)?
INP is the successor to FID, offering a more comprehensive assessment of website responsiveness. FID only measured the delay of the first interaction, while INP measures the latency of all interactions throughout a user's visit to the page. Therefore, INP provides a more accurate representation of the user's overall experience with your website.
What if no INP value is reported?
Several scenarios can lead to no INP value being reported:
No User Interaction - The page may have loaded, but the user did not perform any interactions that are measured for INP, such as clicking, tapping, or pressing keys.
Unmeasured Interactions - The user may have interacted with the page, but through gestures that aren't factored into INP calculations, like scrolling or hovering over elements.
Bot Access - The page might be accessed by a bot or crawler that does not perform user interactions.
What are the best tools for measuring INP?
You can measure INP using a variety of tools:
Google PageSpeed Insights - Provides real-world INP data from the Chrome User Experience Report (CrUX).
Real User Monitoring (RUM) Tools - Offer granular data about individual user interactions and can help pinpoint specific interactions causing high INP scores.
Chrome DevTools - Allows you to simulate user interactions and measure their latency.
Lighthouse - An open-source tool that can be run in Chrome DevTools or as a Node module to audit website performance, including INP.
What factors did Chrome consider when setting the thresholds for INP scores?
When setting the thresholds for INP scores, the Chrome team considered several key factors:
Mobile Achievability: The thresholds were primarily set based on what is achievable for lower-end mobile devices, as these devices often have limited processing power and slower internet connections. Since mobile usage is often the majority of traffic for most sites, this was considered less of a concern. The documentation explains that while high-end mobile devices are powerful, the capabilities of lower-end devices are not increasing at the same rate.
User Expectations: User expectations for a good or poor experience are not device-dependent. So the Chrome team chose one set of thresholds that applies to both mobile and desktop devices, even though achieving a good score is easier on a desktop. This decision was made to simplify the understanding of the thresholds and avoid complexity that could arise from trying to categorize devices.
Research on Quality of Experience: A 100 ms threshold has been supported by research into the quality of experience, but Chrome ultimately chose a 200 ms threshold for "good" scores, considering both the research and the achievability criteria.
Achievability for Popular Sites: The team also examined the performance of the top 10,000 websites, as they account for the vast majority of website visits. They discovered that these popular websites struggled to achieve performance scores of 300 ms, leading them to choose a higher threshold for "poor" scores. A 300 ms threshold would have classified a majority of popular sites as "poor," stretching the achievability criteria. A 500 ms threshold fit better within the range of 10-30% of sites classified as "poor".
The Chrome team ultimately settled on the following INP thresholds:
Good: Scores under 200 ms.
Needs Improvement: Scores between 200 ms and 500 ms.
What are the three interaction types that are measured by INP?
The three interaction types that are measured by INP are:
Clicking with a mouse. This includes clicking on any element on the page, such as buttons, links, and form fields.
Tapping on a device with a touchscreen. This includes any tap on the screen, such as tapping on a button or link.
Pressing a key on either a physical or onscreen keyboard. This includes typing into a text field, pressing enter to submit a form, or using keyboard shortcuts.
It's important to note that INP only measures these three types of interactions. Other types of interactions, such as scrolling, hovering, or zooming, are not observed for INP.
Why was a mobile device-based threshold chosen for INP?
While desktop environments typically have faster processing speeds and more reliable network conditions compared to mobile environments, the Chrome team chose to use a single set of mobile-based thresholds for INP that applies to both mobile and desktop devices. This was done for several reasons:
Users expect a consistently good experience across devices, regardless of whether they are browsing on a desktop or a mobile device.
Having separate thresholds for different device types would add complexity for website owners. Using a single set of thresholds is easier to understand and implement.
Most websites see a majority of their traffic from mobile devices. Therefore, it makes sense to prioritize mobile performance when setting INP thresholds.
However, setting mobile-based thresholds does present a challenge for websites that receive a significant amount of traffic from desktop users. A 300ms "poor" INP threshold would have classified a majority of popular sites as "poor," so the Chrome team chose a 500ms threshold instead.
Barry Pollard, a Web Performance Developer Advocate on Google Chrome, on a Linkedin post noted that achieving an INP score of under 200ms on low-end mobile devices would be difficult for some time, as the capabilities of low-end mobile devices are not increasing at the same rate as high-end devices
Conclusion
Website responsiveness is incredibly important to delivering a positive user experience. Interaction to Next Paint (INP) is a critical Core Web Vital metric that directly reflects how quickly your website responds to user interactions. By understanding INP, its scoring thresholds, and the factors that can influence it, you can take proactive steps to optimize your website's responsiveness.
The audit process outlined in this article, based on Google's updated documentation, provides a roadmap for identifying areas for improvement and implementing effective optimization strategies.
Through a focused approach on monitoring, analyzing, and improving INP, you can ensure a smooth, engaging, and responsive user experience, leading to increased user satisfaction and better website performance.
Have any questions about page load speed optimization? Contact us today and ask one of our experts!
Kommentare