Frontend Monitoring

Performance APIs help in analyzing page performance and identifying bottlenecks. The Navigation Timing API exposes time-related information during a page load, providing timestamps for individual navigation events. From when the user clicks a link to the final onload event, the Navigation Timing API and Resource Timing API record events with start and end timings. The APIs record metrics from real user interactions on the site, providing insight into the critical rendering path performance experienced by page visitors.

User Timing API can be used to create custom performance metrics by inserting API calls at different parts of the application. We can use this API to measure JavaScript performance and extract detailed timing data for specific JS tasks. While Navigation Timing API returns simple timestamps, User Timing provides data to the order of microseconds.

This records the point at which a visual element first appears on a web page. The visual may be just raw HTML without custom fonts or images. Incidentally, this could be significantly different from the final web page displayed to the user.

Pagespeed index is the time taken for a web page to look ready to the user. Though the page may seem visually complete, there may be other things still loading in the background unknown to the viewer.

This denotes the time when a page becomes fully functional allowing users to interact with the page elements. For instance, a button visible on the page becomes clickable only when the page becomes interactive.

A relatively new metric that better correlates with the user experience in comparison with some of the older metrics. LCP indicates the time in milliseconds taken for rendering the largest content (DOM) element visible within a viewport.

This approach relies on a series of automated tests run on a web page to report on the CRP performance. Tools such as Lighthouse and Webpagetest adopt this approach to provide a generic overview of page performance. The results may vary depending on assumptions made in terms of the device type, network connections, etc. However, the method allows us to rapidly test and improve page performance iteratively during the development phase.

The second approach is to measure real user metrics. Using browser APIs that provide precise timestamps, it is possible to accurately measure performance in production environments. The API data can be sent to tools like Google Analytics or other performance monitoring tools to be incorporated into reports. This approach provides an unerring picture of real-world CRP performance as experienced by visitors to your page.