Flashduty RUM Performance Metrics Collection and Reporting

Overview

Flashduty RUM supports collecting and reporting Web Vitals-related performance metrics to help you comprehensively monitor and optimize website performance. Through these metrics, you can understand the actual experience of users when visiting your website and make targeted optimizations.

Web Vitals Metrics Overview

Flashduty RUM supports the following Core Web Vitals metrics:

Largest Contentful Paint (LCP): Measures the loading performance of the main content

Interaction to Next Paint (INP): Measures overall interaction responsiveness

Cumulative Layout Shift (CLS): Measures visual stability

First Contentful Paint (FCP): Measures the time of first content rendering

In addition to core metrics, it also supports other auxiliary metrics:

First Input Delay (FID): Measures page interactivity

Time to First Byte (TTFB): Measures server response speed

These metrics are automatically collected when users visit pages and reported to the Flashduty platform through the SDK. You can view detailed performance data in the analysis dashboard.

Metric Calculation Methods

1. Largest Contentful Paint (LCP)

Calculation: The time from page load start (navigationStart) to the rendering completion of the largest visible content element (such as images, text blocks).

Use case: Monitor loading speed of homepages or key pages, identify resource loading bottlenecks.

2. First Contentful Paint (FCP)

Calculation: Measures the time from when a user first navigates to a page until any part of the page's content is rendered on the screen.

Use case: Used to measure perceived loading speed, helps reassure users that something is happening.

3. Interaction to Next Paint (INP)

Calculation: Measures the delay time from all user interactions (clicks, taps, keyboard inputs) to the next frame rendering.

Use case: Evaluate overall interaction responsiveness of the page, optimize high-latency interaction scenarios.

4. Cumulative Layout Shift (CLS)

Calculation: Calculates the score of all unexpected layout shifts (shift distance × impact area).

Use case: Identify page jumps caused by dynamic content or advertisements.

5. First Input Delay (FID)

Calculation: The time difference from the user's first interaction to when the browser processes the event.

Use case: Optimize response speed for interaction-intensive pages (such as forms, navigation menus).

Custom Performance Monitoring

1. Component-level Performance Measurement

Use the customVital API to monitor the performance of specific components or interactions, suitable for:

Critical component rendering time.

User interaction response time.

Business process duration.

Example: Measuring Component Rendering

Example: Directly Report Duration

2. Performance Timestamp Recording

Use the addTiming API to record key timestamps, suitable for:

Loading of critical elements (such as first-screen images).

User's first interaction (such as first scroll).

Business node timestamps.

Example: Recording First Scroll

Example: Asynchronous Scenario

Considerations

1. Naming Conventions

Avoid spaces and special characters in metric names.

Use descriptive naming (such as login_form_render).

Maintain naming consistency.

2. SPA Scenario Handling

When route changes, timing is based on the start time of the current RUM view.

Some timers need to be reset.

Pay attention to metric continuity during page transitions.

3. Performance Impact Control

Control the number of custom metrics.

Avoid frequent timing.

Set sampling rates reasonably.

Common Issues

1. Abnormal Page Loading Time

Check slowly loading resources (images, scripts).

Investigate third-party script blocking.

Analyze long-running JavaScript.

2. Inaccurate Activity Status Determination

Confirm whether there are frequent background requests.

Check the handling of long connections or streaming requests.

Use excludedActivityUrls to exclude interference.

3. Custom Metrics Issues

Verify that metric names comply with conventions.

Ensure timers are started and stopped correctly.

Check timestamp accuracy in asynchronous scenarios.

Next Steps

Performance Analysis

Diagnosis and Optimization

Metrics

Overview#

Web Vitals Metrics Overview#

Metric Calculation Methods#

1. Largest Contentful Paint (LCP)#

2. First Contentful Paint (FCP)#

3. Interaction to Next Paint (INP)#

4. Cumulative Layout Shift (CLS)#

5. First Input Delay (FID)#

Custom Performance Monitoring#

1. Component-level Performance Measurement#

Example: Measuring Component Rendering#

Example: Directly Report Duration#

2. Performance Timestamp Recording#

Example: Recording First Scroll#

Example: Asynchronous Scenario#

Considerations#

1. Naming Conventions#

2. SPA Scenario Handling#

3. Performance Impact Control#

Common Issues#

1. Abnormal Page Loading Time#

2. Inaccurate Activity Status Determination#

3. Custom Metrics Issues#

Next Steps#