Unlocking Web Performance
A Guide to INP for Marketers, Product Owners, and Designers.
Get the latest insights directly in your mailbox
Don`t worry it`s a monthly newsletter, you can opt-out anytime.
A Guide to INP for Marketers, Product Owners, and Designers.
Don`t worry it`s a monthly newsletter, you can opt-out anytime.
In the fast-paced world of digital marketing, website performance is not just a technical concern but a pivotal factor driving user engagement and conversion rates. Have you ever considered how a mere second's delay in page load time could slash your conversions by a staggering 20%? Google's research underscores this critical impact, highlighting the urgency of optimizing web speed.
With the introduction of Core Web Vitals as a ranking factor in May 2021, Google signaled a shift, emphasizing page experience as a holistic ranking factor, where speed plays a crucial role. Optimizing for Core Web Vitals might seem challenging at first, but it's more than just meeting technical requirements. It’s about improving your website in ways that make a real difference to users. It's about enhancing user experience, meeting performance standards, and, as a delightful bonus, possibly boosting your SEO rankings.
Enter Interaction to Next Paint (INP), Google's latest metric in the Core Web Vitals suite, aimed at refining our understanding of web responsiveness. But why should this matter to you, a marketer, product owner, or designer? Let's dive into how INP not only represents the frontier of web performance metrics but also serves as a key to unlocking superior user experiences, ensuring your digital presence is not just found but felt, in the blink of an eye.
Sections:
Let's demystify what Interaction to Next Paint really means. Imagine you're interacting with a web page - clicking a button or tapping a link. INP measures the delay between your action (like pressing a button) and the webpage beginning to respond (showing that something is happening).
Think of it as using a coffee machine: You press the button to brew a cup. The delay before the machine springs into action, not the time it takes to actually make the coffee, is what INP is all about. And we're measuring this in milliseconds, aiming for a reaction time of less than 200ms to ensure a smooth experience or a good score on your web vitals.
Every interaction on your webpage is considered, and the slowest one determines your overall INP score. Even if most interactions are quick, a single slow one can affect your score. It's a shift from focusing on the 'First Input Delay' (FID), which only looked at the first interaction, to capturing the full spectrum of user experiences, ensuring we're not just making a great first impression but consistently delivering speed and responsiveness.
Transitioning from FID to INP might sound complex, as it requires monitoring every interaction on your site. However, it's a step towards a deeper understanding of what users experience on your site. And don't worry—optimizing for INP is a challenge we can tackle together, ensuring your site not only meets but exceeds user expectations.
In the fast-paced online world, many of us, particularly in tech-savvy countries like the Netherlands, might take our high-speed internet and advanced devices for granted, assuming delays in web interactions are a rare glitch rather than a common frustration. This might lead us to overlook the critical importance of metrics like Interaction to Next Paint (INP), thinking, as the saying goes in development circles, "it works on my machine." However, this perspective misses a broader reality: not every user enjoys the same level of technology, and even minor delays can significantly affect user experience and, by extension, conversions.
Consider the checkout process on an e-commerce site, a critical juncture where smooth interaction can make or break a sale. Any delay or unresponsiveness in processing user actions—be it clicking a button or filling out a form—can be detrimental. It's here that INP becomes invaluable, acting not just as another metric to monitor but as a crucial diagnostic tool that helps identify and rectify these user experience pitfalls before they impact your business negatively.
By optimizing for INP, we're not just improving numbers on a performance report; we're committing to providing all users, regardless of their technological context, with the fast, responsive interactions that are pivotal to maintaining engagement and driving conversions. Thus, INP should be seen as a vital ally (pun intended) in your quest to create seamless online experiences that cater to every user's expectations, ultimately safeguarding and enhancing your website's conversion potential.
Beyond its impact on user experience, Interaction to Next Paint (INP) plays a crucial role in how your website is perceived by search engines, particularly Google. As a component of Core Web Vitals—Google's set of metrics designed to measure a webpage's overall performance and user experience—INP directly influences your site's online visibility and SEO.
While Core Web Vitals, including INP, are not the sole factors in Google's ranking algorithm, they are significant contributors to the 'page experience' signal, a key component of a larger set of criteria used to assess the quality of a webpage. In essence, INP acts as a critical piece in the SEO puzzle, where every small optimisation can cumulatively enhance your site's ranking potential.
Optimising for INP and other Core Web Vitals signals demonstrates to search engines that your site offers a superior user experience, a factor increasingly important in the competitive landscape of search rankings. It's about building a solid foundation that not only improves your site's performance but also positions you favorably in the 'ranking race.'
To be able to work with INP or any core web vital metrics it is important to understand the difference between the different fields in which data is gathered. We distinguish three different fields on how to assess a metric: CrUx, RUM and Lab-data.
What it is: Imagine conducting a survey across a wide audience to gauge the general health of your website. That's CrUX data, offering a helicopter view of user experience across millions of interactions.
What it is: This is akin to one-on-one interviews, where you get detailed feedback from each user interaction, uncovering specific insights.
What it is: Think of this as product testing in a controlled environment, where you can anticipate user issues before they encounter them.
The interesting thing with INP is that it is something that we can’t really measure in a laboratory environment like lighthouse. You need user interaction to be able to click and tab on things on a webpage to calculate the delay between the click and the browser responding. So how do we measure INP in a synthetic environment where no clicks are performed? With the Total Blocking Time (TBT). The next time you run lighthouse you’ll notice that INP is not present in the metrics overview. This has been replaced by the TBT. Which indicates for how long the main thread, while rendering the page, was blocked by the execution of scripts. Google has indicated that this, TBT, has a strong correlation with INP. So basically they’re saying that if your TBT is good, your INP will probably also be ok when it comes to the field data.
This is all fun and games, but this doesn’t help us in identifying those interactions that cause a delay on our platform in the first place. The delay calculated when a user performs an action is totally different from the total blocking time to render a page. So unfortunately we can only use the TBT as an indicator for INP, and find ourselves using a new approach in debugging INP.
First thing that we need to do is find out where on our website INP is lacking. The quickest way to do this is through Google Pagespeed Insights. But for niece pages it might not always have data for that page. So another good alternative is Google Search Console. I’m assuming here that you don’t have any access to RUM-metrics from installed tooling. Otherwise you can get the data from there and identify pages that have a bad INP score.
Now webpages are often clustered as they follow the same layout or pattern. For example a blog post has the same structure for each blog post, the same goes for a product detail page. So you don’t have to evaluate every page, you rather check a page cluster by dropping a url from that cluster in one of the tools. This will give you the INP for that page, together with the other web vitals. Now remember in the beginning that I said the interaction with the longest duration is eventually calculated as the INP for that page. So if you’ve got nine very fast interactions, but one slow one. The slow one is your INP.
When you have identified the page cluster with a slow INP, it’s time to debug that page. For this we’re going to use lighthouse in the Chrome browser. Go to that page, open the console and select lighthouse from the tablist. There you want to toggle Mode: Timespan, Device: Mobile and Categories: Performance. The rest you can all leave untoggled.
Now you press start timespan, and you can start interacting with your page. Try to click on dropdowns, sliders, anything that a user can interact with, which isn’t a navigational element as you don’t want to move away from this page. Once you’ve clicked a bunch of things, end the timespan-mode and it will start calculating your score. From here you’ll get an overview of how this page is performing. To dive into the slow elements you can toggle the INP-button and this will give you a dropdown in the Diagnostics report called: Minimize work during key interaction. Toggle this dropdown will give you the element with the longest delay.
Optimizing for INP needs an iterative approach to make sure all slow elements have been identified before solutionizing. It’s good to remember that one element with a long delay might be hiding other elements with a slightly less longer delay, but still have a bad INP score. So it’s good to perform the test again, without clicking the element that you’ve already found to be a slow responder. This way you can identify multiple INP elements that have a bad score, and fix everything in one go.
When you have identified the elements on your page that cause a long delay on interaction you can start working towards a solution. Here you want to collaborate with design and development to see what solution will best fit each element. Sometimes it might have looked good from a design perspective, but it doesn’t work well in code. So changing the design could be a simple fix in eliminating the delay. Also the interaction could be slowed down due to some code being executed under the hood while a user presses a dropdown. Adding a simple loading state or refactoring the element could be a solution from a development perspective. Try not to solutionise from what you see, but try to collaborate and find the path of least resistance towards a solution. In the end it’s all about the user experience.
As our journey through the intricacies of INP reveals, excellence in web performance is not the sole responsibility of SEOs or developers; it's a multidisciplinary endeavor. From SEO specialists and designers to marketers, product managers, and developers, each plays a pivotal role in sculpting the user experience and, by extension, the product's success.
For SEOs, your skill in pinpointing user-experience-pitfalls is invaluable. Utilizing tools like lighthouse to document elements causing delays, and systematically creating tickets for development intervention, forms the backbone of our optimization strategy. Your iterative and detailed investigations lay the groundwork for impactful enhancements.
Product Managers, your strategic oversight ensures that INP optimisation tickets are not just another item on the development agenda but a priority. Your role in steering these initiatives directly influences our users' satisfaction and our platform's organic reach—key drivers of our business's growth.
Designers, you are the architects of the user experience. Each element you craft not only adds to the aesthetic but also impacts performance. Being mindful of the balance between functionality and form, especially in interactive elements, helps preempt potential INP challenges, ensuring designs facilitate optimal user interactions.
Developers, we rely on your expertise to breathe life into these designs and strategies, making them a reality. Understanding the weight of each click handler or interactive element on performance is crucial. Simplifying interactions, considering loading states, and maintaining a user-centric approach in coding practices are essential to minimizing delays and bolstering our INP scores.
The linchpin of our success, however, lies in our collective action and mutual understanding. When each team member grasps the impact of their work on INP and the broader spectrum of Core Web Vitals, we unlock a powerful synergy. Regular cross-disciplinary discussions, sharing insights, and collaborating on solutions not only demystify technical challenges but also align our efforts towards common goals.
Imagine a scenario where a designer and developer co-create an interactive feature. Through collaborative brainstorming, they find an innovative solution that enhances user engagement without compromising INP. This tangible example of teamwork underscores the potential of our collective expertise when harnessed towards a unified objective.
Therefore, let us champion a culture of proactive engagement and continuous learning. Encourage open dialogues, share success stories, and embrace feedback—both from within our teams and our users. By fostering an environment where every voice contributes to the optimisation narrative, we ensure that improving INP and web performance is not just a task but a shared mission.
In essence, the magic lies not in code nor design alone but in our ability to communicate and work together towards enhancing user experience. With everyone on board and moving in the same direction, navigating the complexities of INP becomes not just feasible but a catalyst for innovation and growth.
So here you have it, the newest Core Web Vital: INP. The next time you get a cup of coffee remember the delay calculated between you pressing a button and the machine springing into action is the Interaction to Next Paint. A delay that can have serious consequences on the performance of your site. To fix this you’re not on your own, it should be a joint effort between different departments. Where ideally the overall mindset to deliver user friendly code is shared between all ranks. And remember that INP is not here to annoy you, but here to help you. It’s basically a blessing in disguise pointing out those areas on your website that aren't performing.