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

Configure your JavaScript Agent in Cisco AppDynamics SaaS to send the the following metrics to Cisco Cloud Observability:

  • 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) -  Reports the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page.

After you enable Core Web Vitals, the Controller UI of Cisco AppDynamics SaaS displays the Core Web Vitals metrics. See View Core Web Vitals in the Browser App Dashboard.

Prerequisites

Ensure that you have:

  • Cisco Cloud Observability license and  Cisco Observability Platform tenants.
  • specified the eum.coexistence.enabled : true setting in the Administration Console.
    Cisco AppDynamics Customer Support enables this setting.

Enable Core Web Vitals

Configure the JavaScript Agent for the browser application for which you want to enable Core Web Vitals:

  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.

    <script charset="UTF-8" type="text/javascript">
    window["adrum-start-time"] = new Date().getTime();
    (function (config) {
        //...other configs
        config.enableCoreWebVitals = true;
    })(window["adrum-config"] || (window["adrum-config"] = {}));
</script>
    XML
  4. Click Save.

After you enable Core Web Vitals, the JavaScript Agent starts to collect the Core Web Vitals metrics for your browser application.

View Core Web Vitals in Browser App Dashboard

In the Controller UI, you can view the Core Web Vitals metrics in Browser App Dashboard.

Add the Core Web Vitals Widget

Complete the following steps to add the widget in the Browser App Dashboard:

  1. In User Experience, select the browser application.
  2. Click
  3. Select Core Web Vitals.
    This widget displays Largest Contentful Paint, First input Delay, and Cumulative Layout Shift.

For more information, see Browser App Dashboard.

Update Columns in Pages & Ajax Requests

In Pages & Ajax Requests, you can update View Options to add the following Core Web Vitals metrics for each record:

  • Largest Contentful Paint
  • Cumulative Layout Shift
  • First Input Display

When you select a page in Pages & Ajax Requests, it displays the Core Web Vitals metrics for the page. It also displays duration of Large Contentful Paint in the Timing Breakdown chart.

For more information, see Pages & Requests.

View Session Summary

In Real Users > Sessions, select a browser session. Session Summary displays the Core Web Vitals metrics for each page. For more information, see Sessions UI.