Measure the Page Loading Experience

This page describes how to enable the following metrics that helps you measure the page loading experience:

Enable Core Web Vitals

Google Core Web Vitals is a set of metrics that measure the real-world user experience for loading performance, interactivity, and visual stability of the page. In Splunk AppDynamics SaaS , Core Web Vitals include the following metrics:
Largest Contentful Paint (LCP)
Reports the render time of the largest image or text block on the page.
Interaction to Next Paint (INP)
Reports the response time for the user interaction.
Cumulative Layout Shift (CLS)
of the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page

Google refers to Core Web Vitals as one of the signals to rank the webpages so you may require to maintain a healthy metrics for your website that improves the SEO ranking and drives user traffic. For more information, see Core Web Vitals.

Note: To enable core web vitals, ensure the ADRUM version is >= 23.10.0

In Splunk AppDynamics SaaS , enable Core Web Vitals while configuring the JavaScript Agent so that the agent collects these metrics for the browsers that are compatible with Google's Core Web Vitals library. You can analyze the scores of Core Web Vitals using Query Language. For more information, see Analytics Browser Core Web Vitals Records Data.

To view the Core Web Vitals metrics, enable Core Web Vitals while configuring the JavaScript Agent and inject the adrum.js script.

  1. Go to a browser application.

  2. In the left-hand panel, go to Configuration > Configure the JavaScript Agent.

  3. In Inject the instrumentation script, specify the script with the appropriate details.

    JSON 
    <script charset="UTF-8" type="text/javascript">
window["adrum-start-time"] = new Date().getTime();
(function(config){
config.appKey = "SM-AFF-ACX";
config.adrumExtUrlHttp = "http://cdn.appdynamics.com";
config.adrumExtUrlHttps = "https://cdn.appdynamics.com";
config.beaconUrlHttp = "http://eum-shadow-master-col.saas.appd-test.com";
config.beaconUrlHttps = "https://eum-shadow-master-col.saas.appd-test.com";
config.useHTTPSAlways = true;
config.resTiming = {"bufSize":200,"clearResTimingOnBeaconSend":true};
config.maxUrlLength = 512;
config.enableCoreWebVitals = true;
})(window["adrum-config"] || (window["adrum-config"] = {}));
</script>
<script src="//cdn.appdynamics.com/adrum/adrum-23.10.0.4353.js"></script>

  4. Click Save.

Once you enable these metrics for your browser applications, the Core Web Vitals widget appears on the Browser App Dashboard. You can then aggregate these metrics using the 50th, 75th, or 90th percentiles. For more information about dashboard, see Browser App Dashboard. Core Web Vitals Metrics Widget

Also, you can create a custom dashboard using the metrics created by ADQL. For more information, see Custom Dashboards.

Analyze Core Web Vitals Using Metric Browser and Custom Alert

Within the Metric Browser, you can analyze Core Web Vitals performance at both the application and page levels. The browser allows for granular filtering, enabling users to view specific metric data based on their chosen percentiles (e.g., 50th, 75th, or 90th). For more information about Metric Browser, see Get Started with Metric Browser.

You can also configure custom alerts tailored to their specific operational needs. This allows for proactive monitoring by setting distinct thresholds for different percentile. For example, defining a warning alert for the 50th percentile and a critical alert for the 90th percentile to ensure performance targets are met.