Capture page experience signals

Acoustic Tealeaf Web SDK now supports capturing Page experience signals. The web SDK has implemented and configured Google's Web Vitals library to capture the core web vital metrics to Tealeaf.

Before you begin:

• To start capturing and logging the Page experience signals to Tealeaf, you must install and load the Web-Vitals  JavaScript in your application. For more information on adding the JavaScript library to your application, see Install and load the Web Vitals library.
• Install the Tealeaf Web SDK.

📘

Tip:

To verify if the web vitals JavaScript is successfully integrated with your application, check the developer console in your browser for the application page.
window.webVitals should be defined.

Configuration

Logging is automatically performed when the Tealeaf Web SDK is integrated with an application with Web-Vitals JS. Page Experience signals are logged after each screenview load.

The page experience signals measure the user experience when interacting with your webpage. Tealeaf captures and logs the following Core Web Vital metrics:

• First Input Delay (FID): This metric measures your page's interactivity and responsiveness. It is the time taken from when the user interacts with the page to the time the page processes that interaction. To provide a good user experience, the FID score for a page should be less than 100 milliseconds.
• Largest Contentful Paint (LCP): This metric measures your page's load time. It is the time the page takes to render the largest image or text block relative to when it first started loading. To provide a good user experience, the LCP score for a page should be 2.5 seconds or less. 
• Cumulative Layout Shift (CLS): This metric measures your page's visual stability. It shows if the page is stable or if its layout shifts when it loads. To provide a good user experience, the CLS score for a page should be 0.1 or less.

Logged JSON message type

The captured page experience signal metrics are logged as a Type 20 JSON message in Tealeaf. For more information on the message type and example, see Type 20 Page experience message.

Disable logging of page experience signals

If you do not want to capture and log the page experience signals for your application, you can disable the logging in the performance module configuration as follows:

performance: {
	pageExperience: {
		enabled: false
	},
	calculateRenderTime: true,
	renderTimeThreshold: 600000
}