Page experience has become a significant ranking factor, highlighted by Google’s introduction of Core Web Vitals. Initially, the focus was on mobile page experience, but Google’s recent page experience update has changed the landscape for desktop pages as well.
Google has implemented its most significant change to Core Web Vitals since its introduction in 2020. In March 2024, Google replaced the First Input Delay (FID) with the Interaction to the Next Paint (INP) metric in its recent page experience update. This change will impact site owners globally, and website owners should take the necessary steps to improve their INP.
As you know, each update can significantly impact your rankings and traffic. However, the worst thing you can do is overreact and make changes based on the hardest-hit sections of your website. Let’s look into Google’s Page Experience Update.
About Google Page Experience Update
Google defines page experience as the measure of how users perceive their interaction with a web page beyond its content. Core Web Vitals, which include the Cumulative Layout Shift, Largest Contentful Paint, and First Input Delay, are key components of this measure. In September 2021, Google introduced the page experience update for mobile, combining Core Web Vitals with existing User Experience ranking factors into a new category called “Search signals for page experience.”
Google announced the completion of their page experience update for desktop, which took only nine days to roll out, from February 22 to March 3. This is much faster compared to the mobile page experience update, which took over two months.
Which Desktop Parameters Were Considered in the Former Google Page Experience Update?
Google’s page experience update for desktop indicates that your desktop pages will now be assessed similarly to your mobile pages, without the mobile-friendliness factor. This page experience update includes all the other factors seen in the mobile page experience update:
• Largest Contentful Paint (LCP): Measures perceived load speed and indicates the point when the page’s main content has loaded.
• Cumulative Layout Shift (CLS): Measures visual stability and quantifies unexpected layout shifts during a page visit.
• First Input Delay (FID): Measures load responsiveness to demonstrate the experience users have when trying to interact with unresponsive pages.
• HTTPS Security: Ensures data protection between a user’s device and the site.
• Absence of Intrusive Interstitials: Refers to the lack of obstructive elements like pop-ups that block on-page content.
This previous page experience update underscores the importance of aligning your SEO and UX teams. Creating a great page experience requires cross-departmental collaboration, and it is crucial for both teams to understand how their efforts impact and support each other.
Why does Page Performance Matter?
A fast-loading page offers visitors a smoother, more enjoyable experience. Conversely, slow pages can frustrate users, resulting in increased bounce rates and decreased engagement. According to Google, meeting the Core Web Vitals thresholds reduces the likelihood of users abandoning page loads by 24%.
Also Read: Page Load Techniques For Improving Website Speed to 2X
Reason for Google to replace First Input Delay (FID) with Interaction to Next Paint (INP) in the Recent Page Experience Update
Google has chosen to replace the First Input Delay (FID) with Interaction to Next Paint (INP) in its recent page experience update to provide a more comprehensive measure of website responsiveness to user actions and their subsequent visual feedback. INP offers a standardized approach across different devices and network conditions, ensuring a more accurate assessment of user experience.
Interaction to Next Paint (INP) measures the delay between a user’s interaction (like a click or touch) and the following visual update on the website, known as the “next paint.” For instance, if there’s a half-second delay after clicking a button before the page updates, the INP value would be 500 milliseconds. This metric helps understand how quickly users see results after their actions.
Google defines INP using data from the Event Timing API to gauge responsiveness. A low INP
indicates that the page consistently responds swiftly to user interactions, contributing to better user satisfaction. Therefore, website owners and developers are encouraged to optimize for INP to enhance the overall user experience.
What constitutes a good INP score? According to Google’s page experience update, a good INP score is 200 milliseconds or less. Scores between 200 and 500 milliseconds require improvement, while anything above 500 milliseconds is deemed poor. So, let’s read more about Optimizing INP to get a good score.
How to Optimize Interaction to Next Paint (INP)
Step 1: Measuring Your INP
If you’re uncertain how to measure your Google Core Web Vitals, a good starting point is to review the reports available in either Google Search Console or PageSpeed Insights. These reports highlight which pages of your website require optimization. In case your core web vitals assessment test fails, here is our guide that tells you what to do next.
Once you’ve identified the pages needing improvement, you can utilize any of the following methods to analyze slow interactions that impact your INP score:
I) Perform manual tests using Chrome DevTools
To identify INP issues on your website, you can utilize Chrome DevTools for detailed insights into interactions. DevTools offers comprehensive analysis capabilities to understand various factors affecting your website.
Follow these steps using the “Performance” tab in DevTools:
- Right click on any web page you want to check the INP score of, select “Inspect” to open DevTools.
- Navigate to the “Performance” tab.
- Click on the “Start Recording” to begin capturing performance data.
- Interact with a UI element (e.g., click a button) on your webpage.
- Stop the recording after the interaction is complete.
- In the performance profile, open the “Interactions” lane to examine detailed insights.
- Review the “Main” lane to analyze CPU work executed during the interaction, identifying specific tasks responsible for any delays.
II) Utilize Real User Monitoring (RUM) tools
A highly reliable source for field data is the Chrome UX Report, offering user experience metrics based on how actual Chrome users interact with popular websites. However, if your website isn’t part of the CrUX dataset, no data or information will be available for analysis. If your website does not qualify to use the Chrome UX Report, you can consider using either of the RUM tools listed in this guide. Image below from Datadog Rum tool shows how INP is displayed.
Step 2: Optimizing Your Interactions
After identifying interactions causing delays, you can replicate them in DevTools to generate a performance profile that provides detailed insights into areas needing improvement. Each interaction typically involves three key stages:
1. Input delay
2. Processing time
3. Presentation delay
Addressing each of these stages is crucial for optimizing Interaction to Next Paint (INP), focusing on reducing CPU processing requirements to enhance responsiveness.
Optimizing Input Delay
To improve input delay on your website, focus on the following strategies:
- Optimize JavaScript: Minimize JavaScript files by eliminating unnecessary code and dependencies. Enable GZip compression for JavaScript files to reduce file size and improve loading times. Utilize JavaScript frameworks like React, which optimize rendering and improve performance. Serve JavaScript files through Content Delivery Networks (CDNs) to deliver them faster to users globally.
- Minimize Thread Activity: High activity on your page (e.g., numerous images and videos) can slow down input responsiveness. Use web workers to execute scripts independently from the main thread, enhancing performance by offloading tasks to background threads.
- Address Interaction Overlap: Interaction overlap occurs when a user interacts with one element before the initial interaction has been fully rendered. Common in scenarios like typing in autosuggest fields. Resolve this issue by debouncing inputs to reduce the frequency of callbacks and improve responsiveness.
Optimizing Processing Time
To reduce processing time on your website, focus on the following techniques:
• Streamline event callbacks triggered by user input to be as lightweight as possible. Eliminate unnecessary callbacks whenever feasible.
• If callbacks are necessary, break down complex tasks into smaller steps. Execute only essential processes required for immediate visual updates.
• Utilize setTimeout to schedule callbacks to run in separate tasks, ensuring they do not block the main thread and impact user interaction responsiveness.
Optimizing Presentation Speed
To accelerate the rendering of events on web pages, it’s crucial to streamline the DOM (Document Object Model). The DOM serves as the interface between web pages and scripting/programming languages. Faster rendering is achieved with smaller DOM sizes, whereas larger DOMs can prolong rendering times. In the DevTools, DOM appears as follows:
When you click on any of the tasks, it gives you details on how to reduce DOM size:
Here are strategies to reduce DOM size:
1. Minimize framework and library usage: Opt for lightweight frameworks or libraries and only incorporate necessary components to avoid unnecessary DOM elements.
2. Limit third-party widgets and plugins: These often introduce additional DOM elements. Consider lighter alternatives or use them sparingly.
3. Avoid excessive element nesting: Complex DOM trees arise from nesting. Maintain a flat HTML structure whenever possible.
4. Utilize virtual DOM techniques: Frameworks like React use virtual DOMs to optimize real DOM updates, reducing the number of changes.
5. Implement lazy loading: Load content and images on demand, especially for content below the fold or not immediately visible.
6. Prefer CSS animations over JavaScript: CSS animations are typically more efficient, minimizing DOM modifications compared to JavaScript alternatives.
7. Optimize images and media: Compress and appropriately size images and media files to decrease overall webpage file sizes.
Conclusion
Meeting Google’s requirements can often feel like solving a constantly evolving puzzle. While page experience factors are just one piece of this puzzle, they are crucial. We strongly recommend addressing this page experience update and prioritizing your website’s performance for optimal user experience.
Nearly 50% of internet users leave a website page if it takes more than 3s for the page to load. Identify and resolve any factors impacting low INP and Core Web Vitals scores. By addressing these issues highlighted in page experience update promptly, you’ll enhance the overall user experience and boost conversion rates effectively.
