SPA LCP and Full Load Metric Description

Background

Most modern Web open frameworks use MVVM frameworks, such as Angular, Vue, React, Flutter, etc. This type of framework usually performs the initialization of the framework and the loading of routes after the DomContentLoaded event is triggered after the DOM is loaded, and the API interface is called after the data is loaded.

LCP monitoring

LCP PerformanceObserver renders a listener for the largest element. This listener will be triggered continuously after the UI changes, so we can find the page completion time intuitively felt by the user as long as we find a suitable stop point. For example, the last LCP time before the full load event is triggered is closer to the user's intuitive feeling.

Full load monitoring

After the loadEventEnd is completed, you will pay attention to the time of Ajax requests and static resource requests initiated within a period of time (500ms by default) until the response to these requests is completed, which can be considered as the time consuming for the page to be fully loaded.