This post was sponsored by DebugBear. The opinions expressed are the sponsor’s own.
Keeping your website fast is important for user experience and SEO. The Core Web Vitals initiative by Google provides a set of metrics to help you understand the performance of your website. The three Core Web Vitals metrics are crucial for assessing this performance. This post focuses on the recently introduced INP metric and how to improve it.
In This Guide:
- How Is Interaction To Next Paint Measured?
- How To Identify & Fix Slow INP Times
- How To Investigate High Input Delay
- How To Investigate High Presentation Delay
- Get The Data You Need To Improve Interaction To Next Paint
How Is Interaction To Next Paint Measured?
INP measures how quickly your website responds to user interactions, such as a button click. Specifically, it tracks the time in milliseconds between the user input and when the browser finishes processing the interaction and is ready to update the page visually. Your website should complete this process in under 200 milliseconds for a "Good" score, while values over half a second are marked as "Poor." A poor score in a Core Web Vitals metric can negatively impact search engine rankings. Google collects INP data from real visitors on your website as part of the Chrome User Experience Report (CrUX), which ultimately affects rankings.
How To Identify & Fix Slow INP Times
Identifying the causes of poor Interaction to Next Paint can often be complex. Follow this guide to understand slow interactions and find potential optimizations.
1. How To Identify A Page With Slow INP Times
Different pages on your website will have varying Core Web Vitals scores. Firstly, identify a slow page and investigate the reasons for the delay.
Using Google Search Console: One way to check INP scores is via the Core Web Vitals section in Google Search Console, which reports based on the discussed Google CrUX data. Page URLs are grouped, so click on each group to see if URL-specific data is available and focus on those.
Using A Real-User Monitoring (RUM) Service: Google does not report Core Web Vitals data for every page and only provides raw measurements without details. A Real-user monitoring tool like DebugBear can provide the necessary insights. It works by installing an analytics snippet on your website to measure speed for visitors.
2. Figure Out What Element Interactions Are Slow
Visitors on the same page can have different experiences based on interaction types, affecting INP. RUM data helps by providing a breakdown of page elements interacted with and respective delays.
3. Identify What INP Component Contributes The Most To Slow Interactions
INP delays can be broken into three components:
- Input Delay: Background code blocking the interaction.
- Processing Time: Time handling the interaction.
- Presentation Delay: Time displaying updates.
Focus on the component contributing most to the slow INP during investigations.
4. Check Which Scripts Are Contributing To Slow INP
Browsers can sometimes report scripts contributing to slow interactions. Your website likely contains both first-party and third-party scripts affecting INP times. DebugBear can help identify whether these are your own code or from third parties.
5. Identify Why Those Scripts Are Running
Understanding script purpose is crucial. DebugBear provides an INP Primary Script Invoker breakdown to see script involvement in interactions.
6. Review Specific Page Views
Transitioning from aggregated to specific INP events helps conclude slow INP causes. Tools like DebugBear allow reviewing of specific user experiences for detailed insights.
7. Use The DevTools Profiler For More Information
Real user monitoring tools access limited data for performance and security. Chrome DevTools can measure page performance more comprehensively.
How You Might Resolve This Issue
Addressing slow INP could involve:
- Working with third-party script providers to optimize scripts.
- Removing non-essential scripts or finding alternatives.
- Adjusting your code’s interaction with these scripts.
How To Investigate High Input Delay
High input delay may result from:
- Interactions during page load.
- Scheduled page tasks.
- Loading or rendering new content.
Analyzing invoker names and INP scripts of specific user experiences can shed light.
How To Investigate High Presentation Delay
Presentation delay may arise from browser behavior rather than specific scripts. Although challenging, focus remains on identifying specific pages and interactions.
Get The Data You Need To Improve Interaction To Next Paint
Setting up real-user monitoring helps you understand user experience and implement improvements. Tools like DebugBear monitor lab data, CrUX data, and real user data, providing a comprehensive overview for optimization.
This article has been sponsored by DebugBear, representing the sponsor’s perspective.
