Benchmark and Telemetry for Runtime Performance
By enabling extra instrumentation in your front-end application, you can gather more comprehensive performance metrics to aid in optimizing performance. It's important to note that the instrumentation feature is initially turned off and needs to be enabled manually.
To enable it, you can choose one of the following two ways:
- Apply a configuration to enable it for all users
- Enable it only for yourself
Enable instrumentation for all users
If you want to enable the instrumentation for all users who access the application, run the following command from the application static console:
UiSdlConfig.setConfigValue('performanceMeasurement.enabled', true);To verify the instrumentation is enabled, run the following command from the application static console and check if the return value is true:
UiSdlConfig.inst().performanceMeasurement.enabledEnable instrumentation only for yourself
Create a cookie with name measure_perf and set value to true. This will only enable the instrumentation for the browser session where that cookie is set.
Available benchmark and telemetry
When trying to optimize or find the bottleneck of a feature, benchmark and telemetry measurements are crucial. The benchmark measurements focus on the start and end times of different processes while telemetry measurements focus on the duration of those processes. The following processes are measured in UI Framework:
- Loading UI Framework
- Importing the page
- Loading data through XHR request for that page
- Rendering the page
Benchmark
- Framework initiation start - beginning of loading index.html
- Start and end of each XHR request
- Page import start
- Data loaded - there are no more AJAX requests
- Page loaded - there are no more re-renders of the page
Telemetry
- UI Framework boot time - from framework initiation start to page import start
- UI Framework data load time*
- Page data load time*
- Page load time*
- Each XHR request duration
- Slowest XHR request information
- Number of dynamic component mounted
- Number of dynamic imports
- Web vitals
- Largest Contentful Paint (LCP)
- First Input Delay (FID)
- Cumulative Layout Shift (CLS)
- Interaction to Next Paint (INP)
- First Contentful Paint (FCP)
To access all the benchmark and telemetry, you can open Chrome DevTools Console from your webpage and run the following command. A table of report should be generated for you.
window.__C3_PERFORMANCE__.printReport()Note: Telemetries marked with (*) are not available in production mode currently.