Tracking Core Web Vitals in Fullstory

What are Core Web Vitals?

Search engine optimization (SEO) is often a key process for many businesses who rely on search engine traffic generation to bring users to their website. Web pages that rank higher have more user visibility and thus more traffic which leads to more sales. With Google’s decision to update search ranking criteria to include Core Web Vitals, it is even more important to know where your page experience benchmarks against this set of metrics to ensure changes to your website are not degrading your SEO. 

Core Web Vitals are made up of three specific page speed and user interaction measurements:

• Largest Contentful Paint (LCP)
• First Input Delay (FID)
• Cumulative Layout Shift (CLS)

Each of these can be used as Event Filters when building a segment:

Three Key Factors of Core Web Vitals

Largest Contentful Paint

Largest Contentful Paint (LCP) focuses on Page Loading Time. In other words, the time it takes for the largest element to load on your page. A good largest contentful paint time is considered to be 2.5 seconds or less.

Note: LCP excludes iframed content.

Read more about this metric in the Lighthouse developer docs.

First Input Delay

First Input Delay (FID or Interactivity) looks at Time To Interact. This factor looks at the time from when a user first interacts with a page (ex. clicking a link or button) to the time when the browser can respond to the interaction. Websites should aim for a First Input Delay of 100 milliseconds or less. 

Read more about this metric in the Lighthouse developer docs.

Cumulative Layout Shift

Cumulative Layout Shift (CLS or Visual Stability) considers Page Stability. It accounts for unexpected movements on a page that occur. Another way to think of it is how much page content shifts without user interaction. For example, when a pop up moves the content that is displayed it can disrupt user behavior. Cumulative layout shift is a score that measures the amount of movement on a page, relative to the size of the page and the elements within it. Cumulative layout shift scores under 0.1 are good, and scores above 0.25 are poor. Not all browsers support the ability to measure layout shifts, so Cumulative Layout Shift events will not be available on every page.  Cumulative Layout Shift events with a score of 0 indicate that the user’s browser supported the LayoutShift API, but no layout shifts occurred on the page.

For information on ideal scores and more regarding these metrics, visit Google’s page on Core Web Vitals.

Using Core Web Vitals in Fullstory

Core Web Vitals are searchable in Segments, visible in the playback event stream, can be tracked in Metrics and added to Dashboard or Home.

Below are some examples of ways you can leverage Core Web Vitals in Fullstory:

Cumulative Layout Shift

As CLS values above 0.25 are considered poor, try searching for sessions with poor CLS scores via a segment like the one below:

Create a metric to track the percentage of Cumulative Layout Shift events that happen in the “poor” range. Note that we divide by the number of all Cumulative Layout Shift events, since not all pages will have a Cumulative Layout Shift value.

Create a metric that tracks the pages with the largest layout shifts.

First Input Delay

First Input Delay values above 300ms are considered “poor”. With that in mind, search for sessions with poor FID scores with this segment:

Track the percentage of First Input Delay events that are in the poor range.

Largest Contentful Paint

Largest Contentful Paint values over 4 seconds are considered poor. Search for sessions with poor LCP times with the following segment:

Create a metric to track the percentage of Largest Contentful Paint events which are poor:

Create a metric that lists the top pages with slow Largest Contentful Paint times:

Additional web vitals

Fullstory also supports other Web Vitals to supplement Core Web Vitals. These capture a larger part of the experience and assist in diagnosing in specific issues:

• Interaction to Next Paint (INP)
• Time to Interactive (TTI)
• Total Blocking Time (TBT)
• Time to First Byte (TTFB)

Interaction to Next Paint (INP)

Interaction to Next Paint measures the latency of every tap, click, or keyboard interaction made with the page, and—based on the number of interactions—selects the worst interaction latency of the page (or close to the highest) as a single, representative value to describe a page's overall responsiveness. 

Time to Interactive (TTI)

Time to Interactive measures the time from when the page starts loading to when it's visually rendered, its initial scripts (if any) have loaded, and it's capable of reliably responding to user input quickly.

Total Blocking Time (TBT)

Total Blocking Time measures the total amount of time between FCP and TTI where the main thread was blocked for a long enough time to prevent input responsiveness. 

Time to First Byte (TTFB)

Time to First Byte measures the time it takes for the network to respond to a user request with the first byte of a resource. This is a vital aspect of understanding the loading experience. 

FAQs

Are these events available for web and mobile?

Core Web Vital events are web-specific and not available on mobile.

Will all web sessions have Core Web Vitals?

No, Core Web Vitals rely on browser APIs that are only available on Chromium browsers (Chrome, Opera, and Edge). The following MDN pages have up-to-date browser compatibility information:

• Cumulative Layout Shift: https://developer.mozilla.org/en-US/docs/Web/API/LayoutShift#browser_compatibility
• First Input Delay: https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEventTiming#browser_compatibility
• Largest Contentful Paint: https://developer.mozilla.org/en-US/docs/Web/API/Largest_Contentful_Paint_API#browser_compatibility

Are Core Web Vitals available in Conversions?

As of December 2023, Core Web Vitals are officially available in Conversions.

What’s the difference between First Contentful Paint and Largest Contentful Paint?

First Contentful Paint refers to the first element (image, block of text, etc) loaded on your page. Largest Contentful Paint refers to the largest element loaded on your page. On certain sites, these two can be the same.

What other page performance signals are searchable in Fullstory?

In addition to the three factors of Core Web Vitals, Fullstory offers page performance metrics such as Dom Content Load, Page Load, First Contentful Paint.

How are each of the Core Web Vital metrics gathered in Fullstory?

We use an industry-standard approach relying on the browsers to compute each Core Web Vital metric via a set of APIs. 

What are the browser APIs used to compute these metrics?

• CLS: The LayoutShift API reports individual layout shift events, which are combined to generate a Cumulative Layout Shift score. There is additional logic used between what the API reports and how the metric is calculated.
• LCP: The LargestContentfulPaint API is used for LCP timings. There is additional logic used between what the API reports and how the metric is calculated.
• FID: First Input Delay timings are driven by the PerformanceEventTiming API. There is additional logic used between what the API reports and how the metric is calculated.

Are these browser APIs available on all browsers? 

At this time, they are only fully available on Chromium browsers. However, First Input Delay is supported by Firefox too.