Skip to main content

SPA LCP and Complete Loading Metrics Description

Background​

Most modern web development frameworks use MVVM architecture, such as Angular, Vue, React, Flutter, etc. These frameworks typically execute framework initialization and route loading after the DOM is loaded and the DomContentLoaded event is triggered, followed by API interface calls after the data is loaded.

LCP Monitoring​

The LCP PerformanceObserver is a listener for the largest element rendering, which continuously triggers when UI changes occur. Therefore, we only need to find an appropriate stopping point to determine the page completion time as perceived by the user. For example, obtaining the latest LCP value after the client's UI is loaded or sub-route navigation is displayed provides a closer approximation to the user's direct perception.

Total Time Monitoring​

  • Page total time is not measured with navigationTiming's loadEventEnd as the endpoint.
  • XHR requests triggered before the loadEventEnd event are marked and recorded. Request blacklists and whitelists can be configured for filtering.
  • DOM change events are monitored. Each time a DOM change event is triggered, the system checks whether there are any XHR requests that have been initiated but not completed or have been completed within the resource_associate_threshold configuration time (default is 100ms) before the trigger time. If so, it looks for IMG/SCRIPT/IFRAME events within the DOM changes and adds onload listeners, when the page is loaded