Skip to main content

SPA LCP and Full Load Metric Description

Background​

Modern Web open frameworks mostly use MVVM frameworks, such as Angular, Vue, React, Flutter, etc. This type of framework usually executes the initialization of the framework and the loading of the route after the DOM loading is completed and the DomContentLoaded event is triggered . The API interface is called after the data is loaded.

Monitoring of LCP​

LCP PerformanceObserver is the largest element rendering listener, which will be triggered continuously after UI changes, so we can find the page completion time that users intuitively feel as long as we find a suitable stopping point. For example, the latest LCP value is obtained after the page is loaded and the customer's UI or sub-route jump is displayed, which is closer to the user's intuitive experience.

Total time consumption monitoring​

  • The total elapsed time of the page does not end at the loadEventEnd of navigationTiming.
  • Mark and record the XHR request before the loadEventEnd event is triggered, and configure the request blacklist and request whitelist for filtering.
  • Monitor the DOM change event, and each time the DOM change event is triggered, judge whether there is an uncompleted or completed XHR request within the resource _ associate _ threshold configuration time (100ms by default) before the trigger time. If so, IMG /SCRIPT/IFRAME events in the DOM change are searched and onload monitoring is added, and the page performance data is sent when the page is loaded.