Overview

The Optimization page helps to identify the root cause of browser performance issues using real user traffic data. Troubleshoot the causes of slow pages using browser metrics such as Core Web Vitals (CWV) and Datadog’s custom Loading Time metric, which evaluates full-page load time from the user’s perspective.

For deeper analysis, the Optimization page provides granular breakdowns of Core Web Vitals by user demographics such as browser, region, and app version. You can use this information to track performance trends over time, understand which user groups are most affected, and prioritize optimizations with precision.

Prerequisites

To optimize your application, ensure you are using:

• RUM Browser SDK version 5.4.0 or newer
• Session Replay for at least some sessions

Selecting a vital

Navigate to the Optimization page, found under the Digital Experience > Performance Monitoring tab.

From this view, there are two ways to select a page or vital:

• Choose from a treemap of the most visited pages
• Enter a view name in the input box and select the page

Available vitals include:

• Loading Time (LT): Datadog’s custom metric that measures the time for a page to load from a user’s perspective.
• Largest Contentful Paint (LCP): Measures how quickly the largest visual element on your page loads, which is a critical factor in both user experience and SEO rankings. A slow LCP can frustrate users, increase bounce rates, and hurt search visibility.
• First Contentful Paint (FCP): Measures the time from when the user first navigated to the page to when any part of the page’s content is rendered on the screen. A fast FCP helps reassure the user that something is happening.
• Cumulative Layout Shift (CLS): Measures the largest burst of unexpected layout shifts that occur during a page’s life cycle. A layout shift happens when a visible element moves from one rendered frame to the next without any user interaction, disrupting the visual stability of the page. An important metric for measuring visual stability because it helps quantify how often users experience unexpected layout shifts. A low CLS helps ensure that the page is delightful.
• Interaction to Next Paint (INP): Measures how long it takes for a page to visually respond after a user interacts with the page.

Filter and evaluate

After selecting a page and vital, analyze performance insights:

• Adjust the time frame in the top-right corner
• Use dropdowns to filter by attributes
• Select a group in “Show Filter Breakdown”
• Evaluate vitals at different percentiles

For instance, a pc75 evaluation represents the 75th percentile value, commonly used for CWV.

Visualize the user’s experience

The next part of the page helps you visualize exactly what your users are experiencing.

Based on the selected time period and traffic, the Optimization page highlights the most typical example of what users see on the page when the selected vital is captured. If you use Session Replay, this is where you see a visual of the page.

For some vitals, you can also select other versions of the page to investigate by clicking “See a different element”.

Troubleshoot resources and errors

In the troubleshooting section, you can see resources and errors that users encountered on the page that may have affected the vital performance. For example, for Largest Contentful Paint (LCP), you can see resources that were loaded before the LCP was triggered. Since LCP is an indicator of how long the largest element takes to load on the page, you could investigate the following:

• Anything that happens before then could be causing slowness or rendering issues
• Resources that are particularly slow or large could be contributing to performance issues
• Recurring errors that could be causing problems

View event samples

To see everything in context with the rest of the page activity, scroll down to the waterfall and timeline of events. The waterfall shows the event timeline up until the moment the vital was captured.

You can select another sample event using the dropdown in the top left, and expand any event in the waterfall by clicking it to see the side panel, as shown below.

Further Reading

추가 유용한 문서, 링크 및 기사:

Interactive Lab: Core Web VitalsLEARNING CENTER Real User MonitoringBLOG Monitor Core Web Vitals with Datadog RUM and Synthetic MonitoringBLOG