Measure the Page Loading Experience

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

Core Web Vitals
Speed Index
Note: Currently, Speed Index is supported only on Splunk AppDynamics On-Premises.

Enable Speed Index

Speed Index (SI) is a measure to determine the page load performance by calculating how quickly the page contents are visibly populated. Speed Index is dependent on size of the Viewport and it is expressed in milliseconds. Lower page load time improves the Speed Index score.

In Splunk AppDynamics On-Premises, you can enable Speed Index while configuring the JavaScript Agent. Analyze the Speed Index scores and improve the page performance.

To view the Speed Index metrics, enable Speed Index while configuring the JavaScript Agent and inject the adrum.js script.

<head>
    <script type='text/javascript' charset='UTF-8'>
        (function(config){
            config.enableSpeedIndex = true;
            })(config.xhr || (config.xhr = {}));
        })(window["adrum-config"] || (window["adrum-config"] = {}));
    </script>
    <script src='//cdn.appdynamics.com/adrum/adrum-latest.js' type='text/javascript' charset='UTF-8'></script>
    ...
</head>

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 On-Premises, 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.
First input Delay (FID): Reports the page 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, seeCore Web Vitals.

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

In Splunk AppDynamics On-Premises, 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.

Go to a browser application.
In the left-hand panel, go to Configuration > Configure the JavaScript Agent.

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

<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>

Click Save.

After you enable Core Web Vitals, create a custom dashboard using the metrics created by ADQL. For more information, see Custom Dashboards.