LogRocket provides many options for you to monitor the performance of your application, both on an individual session level as well as more holistically with proactive monitoring.
In the Developer view within the playback of a specific session, you will see a 'Performance' tab at the top above the session replay.
This is where you'll find data related to Page Load metrics, CPU Usage, Long Tasks, Memory Usage, Browser Crashes, and Network Speed that is specific to the user's session. Some of this data may only be available for specific browsers or operating systems, depending on what they have made available to us.
Page Load timeline
Displays metrics regarding page load times for each new page loaded within a session. You can mouse over the different colored bars to get the exact number for each metric.
The metrics displayed include
- Time to First Byte - duration from the user or client making an HTTP request to the first byte of the page being received by the client's browser
- DOM Complete - measures when all processing on the page is complete and resources have finished downloading
- Largest Contentful Paint (LCP) - render time of the largest image or text block within the viewport, providing a user-focused method for measuring actual time of page load. For more information, see here.
- First Input Delay (FID) - measures the time from when a user first interacts with a page to the time when the browser is actually able to begin processing event handlers in response to that interaction. For more information, see here.
Please note that you may not see all metrics represented for each page -- this is due to nuances in how we collect each metric type. For example, LCP, FID, and CLS (described below) are not registered if a user opens a page in a new hidden tab.
Additionally, some of these metrics are only supported on modern browsers. LCP, FID, and CLS are supported only for Chrome, Edge, and Opera.
Cumulative Layout Shift
CLS is a measurement of visual stability. For more details, see here. The display here shows a measurement of individual layout shifts per page, summing to the total CLS towards the end of each page lifecycle.
Displays the average CPU usage of the application within the user's browser throughout the session. This is only displayed for sessions recorded on Chrome and Firefox browsers.
CPU load metrics may skew high
We only record CPU load when it's above ~10% so aggregations and charts created with this data may skew higher than expected.
Surfaces any long tasks that run for more than 250ms. Only supported for sessions on Chrome.
Displays the amount of memory that is being utilized throughout a session. Only supported for Chrome.
Shows instances of a browser crash throughout the session playback. You must configure this in advance by following the instructions here. This is only supported for Chrome.
Average Network Speed
Shows the average speed of the user's connection throughout the session as well as the estimated connection type and any losses of connectivity. This is an average value calculated based on the speed of assets downloaded on page load. This is supported for Chrome, Firefox, and Opera in some instances.
May be inaccurate for SPAs
Given the algorithm we're using to calculate the speed, the Average Network Speed we display may be inaccurate particularly for single-page applications. You may see a flat line because our measurements are based on page load, and for SPAs there may only be a single page load to base measurements off of.
Updated about a month ago