Skip to main content
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:
MetricFull NameDescription
LCPLargest Contentful PaintMeasures loading performance of main page content
INPInteraction to Next PaintMeasures overall interaction responsiveness
CLSCumulative Layout ShiftMeasures visual stability
FCPFirst Contentful PaintMeasures first content rendering time
FIDFirst Input DelayMeasures page interaction performance (auxiliary metric)
TTFBTime to First ByteMeasures server response speed (auxiliary metric)
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 analytics dashboard.
For pages opened in the background (e.g., in a new tab or unfocused window), INP and LCP data will not be collected.

​
Metric Calculation Methods

Calculation Method: Time from page load start (navigationStart) to when the largest visible content element (such as images, text blocks) finishes rendering.Use Case: Monitor main page or critical page content loading speed, identify resource loading bottlenecks.
Calculation Method: Measures the time from when the user first navigates to the page to when any part of the page content is rendered on the screen.Use Case: Used to measure perceived loading speed, helps assure users that something is happening.
Calculation Method: Measures the delay from all user interactions (clicks, taps, keyboard input) to the next frame rendering.Use Case: Evaluate overall page interaction responsiveness, optimize high-latency interaction scenarios.
Calculation Method: Calculates the score of all unexpected layout shifts (shift distance × impact area).Use Case: Identify page jumping issues caused by dynamic content or ads.
Calculation Method: Time difference from when the user first interacts to when the browser processes the event.Use Case: Optimize response speed of interaction-intensive pages (such as forms, navigation menus).

​
Monitoring Single Page Applications (SPA)

For single page applications, the RUM Browser SDK distinguishes between initial_load and route_change navigation types through the loading_type attribute.
If an interaction on the page causes the URL to change without a full page refresh, the RUM SDK starts a new view with loading_type:route_change.RUM uses the History API to track URL changes.
For SPA applications, if you need to monitor performance after route changes, it’s recommended to use custom performance monitoring features to measure performance metrics of specific components or interactions.

​
Custom Performance Monitoring

​
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
// Start timing
const ref = window.FC_RUM.startDurationVital("componentRendering", {
  description: "login-form",
  context: { clientId: "xxx", componentVersion: "1.0.0" },
});

// Stop timing
window.FC_RUM.stopDurationVital(ref);

​
Performance Timing Records

Use the addTiming API to record key time points, suitable for:
  • Critical element loading (such as first screen images)
  • First user interaction (such as first scroll)
  • Business milestone timestamps
document.addEventListener("scroll", function handler() {
  document.removeEventListener("scroll", handler);
  window.FC_RUM.addTiming("first_scroll");
});

​
Important Notes

Naming Conventions

  • Avoid spaces and special characters in metric names
  • Use descriptive naming (e.g., login_form_render)
  • Maintain naming consistency

Performance Impact Control

  • Control the number of custom metrics
  • Avoid frequent timing
  • Set reasonable sampling rates

​
Frequently Asked Questions

  • Check slow-loading resources (images, scripts)
  • Investigate third-party script blocking
  • Analyze long-running JavaScript
  • Confirm if there are frequent background requests
  • Check handling of long connections or streaming requests
  • Use excludedActivityUrls to exclude interference
  • Verify metric names comply with conventions
  • Ensure timers start and stop correctly
  • Check timestamp accuracy in async scenarios
ReasonDescription
Background PagePage opened in new tab or unfocused window, causing INP and LCP to not be collected
SPA Route ChangeCore Web Vitals metrics are not re-collected during loading_type:route_change
Integration MethodPage finished loading before SDK was fully initialized
Page LifecyclePage was closed or navigated away before metric collection completed
Browser CompatibilityOlder browser versions don’t support certain Web Vitals APIs
No Page ContentPage has no measurable content elements (such as blank pages)

​
Next Steps

Performance Analysis

Deep dive into performance data analysis

Diagnosis and Optimization

Learn problem diagnosis and optimization methods