When examining a session in Noibu, a user wants to know not only whether an error is present and what it looks like, but how the overall page performance impacts the user experience. To date, this assessment has been based on observation and examining global issue metrics, but we’re simplifying this process by leveraging Google’s Web Vitals in session recordings. This allows you to use the Session Search to root out poor performing pages and optimize load times based on core web vital scores.

What are Web Vitals?

Web vitals represent elements of the user experience in a session that can be measured, quantified, and rated on a three point scale: Good, Needs Improvement, or Poor. Each session recording tracks six web vitals:

• Cumulative Layout Shift (CLS): Measures instances of layout shift in a session. A layout shift refers to when a page element changes position or size, which in turn causes shifts in the content around it. Moving elements create a bad user experience, and the larger the score, the more shifting is occurring in the session. Often, a poor CLS score is due to ads, dynamically injected content, and embeds and iframes without dimensions.
  • Good: ≤ 0.1
  • Needs Improvement: ≤ 0.25
  • Poor: > 0.25
    
    
• First Contentful Paint (FCP): Measures the time it takes for the browser to render the first content–text or image–after a user clicks a URL. This quantifies response times, and the longer it takes the render the first piece of content, the lower the user experience.
  • Good: ≤ 1.8s
  • Needs Improvement: ≤ 3s
  • Poor: > 3s
    • Google notes that over 53% of users will click out if a page takes more than 3 seconds to load.
      
      
• First Input Delay (FID): Measures the time between when a user interacts with a page and when the browser responds to the interaction. This could be how long after a user clicks a link or taps a button that the browser begins the action. Delays of this sort indicate slow loading times. Often, a slow FID is caused by bloated JavaScript files.
  • Good: ≤ 100ms
  • Needs Improvement: ≤ 300ms
  • Poor: > 300ms
    
    
• Input Latency (INP): Measures the time taken for a the browser to respond to user input, like clicking or scrolling. Low input latency indicates a more responsive page and ensures a smooth user experience.
  
  
• Largest Contentful Paint (LCP): Measures the time it takes to render the largest content element in the viewport, usually an image or video, based on when the user clicks the URL. This indicates how fast the URL loads the page. Usually, a poor LCP score is caused by oversized files, uncompressed images, JavaScript and CSS that blocks rendering, or slow server response time.
  • Good: ≤ 2.5s
  • Needs Improvement: ≤ 4s
  • Poor: > 4s
    
    
• Time to First Byte (TTFB): Measures the time between the request for a resource and when the first byte of a response begins to arrive. This accommodates redirect time, service worker startup time, DNS lookup, connection and TLS negotiation, and the request itself. A longer connection setup time contributes to a poor user experience.
  • Good: ≤ 800ms
  • Needs Improvement: ≤ 1800ms
  • Poor: > 1800ms

How do Web Vitals Help Me?

With the help of web vitals, you can use the Session Search to investigate poor performing pages and implement improvements to the user experience. For example, if you filter the sessions list by a product URL and apply a poor web vital score, you can find sessions where users have visited that page and encountered poor performance.

Optimizing web vitals has a greater impact than improving the user experience. In eCommerce, every extra millisecond of loading time creates drop-off, so merchants should monitor web vitals to ensure poor performance doesn’t lead to shoppers clicking off. Additionally, good web vitals can increase traffic to an eCommerce site. Because the Google search engine prioritizes pages with fast loading times, pages with poor web vitals are less likely to be surfaced in a Google search. In other words, monitoring web vitals to optimize each page’s performance also helps with SEO.

Web Vitals in Session Search

Web vitals are available in the Session Search table as a new filter type. Open the filters menu and hover over Web Vitals. From here, select a specific web vital and status to search for. For instance, you might search for all session recordings with a Poor LCP score.

At present, you can only filter for one web vital at a time, but you can combine the Web Vital filter with other filters to highlight assess performance on specific pages.

Web Vitals in the Session Timeline

Web vitals are also visible in the Session Timeline. We’ve added a new toggle at the top of the timeline to Show Web Vital Events for each page view.

When enabled, web vital events will appear in the timeline next to its overall score: Good, Needs Improvement, or Poor. Hover over the score to see the specific value, in milliseconds.