Template Performance Profiler
Last updated
Was this helpful?
Last updated
Was this helpful?
The Template Performance Profiler is a widget designed to help developers analyze the rendering performance of interaction nodes. By placing this widget on specific positions in your template, you can track the time it takes to output those specific parts to the response, providing insights into potential performance bottlenecks within the page. The results can then be tracked in the console view of your preferred browser.
To use the Template Performance Profiler, follow these steps:
Go to the Widget tab in the resource pane.
Add the Widget library called Widget
In the library called Widget, locate the Template Performance Profiler.
Place the Template Performance Profiler widget at the desired locations within your template. Optimally this should be directly before and after each element or part you want to analyze or at the start and end of the template to see how long it takes to generate the total page.
Configure the log message property with a expression resulting in text. This message will be displayed in the console along with a timestamp.
The log message property is a text field where you can specify the message you want to appear in the console. This message will be logged and showed in the developer console when the widget is reached during the rendering of the HTML page. For example, you can set the log message to "Item 1", "Item 2", etc., to track the rendering sequence.
Once the Template Performance Profiler is in place, you can view the performance data in the browsers console:
Open Developer Tools:
Windows: Press F12 to open the developer tools.
Apple Safari: Go to Safari > Settings, click Advanced, then select “Show features for web developers.
Apple Firefox: Fn+F12
Navigate to the Console: Go to the console tab to see the log messages.
Analyze Timestamps: Each log message will include a timestamp and the LogMessage, allowing you to see the time difference between each widget as the page renders.
In the following example, the widget is added 6 different times in the template, with each widget having a higher number in its log message property. The console output might look like this:
In the example above, the time difference between "Item 3" and "Item 4" is notably longer, with a gap of 935 milliseconds compared to the smaller intervals between other items. This delay suggests that the section of the page between these two points may be causing a slower load time. Investigating this part of the template could help identify performance bottlenecks and causes of slowdown in the rendering process.
Strategic Placement: Place the widget at critical points in your template to monitor rendering times effectively.
Consistent Logging: Use a consistent naming convention for log messages to easily identify and compare performance data.
Iterative Testing: Test and adjust your template based on the performance insights gained from the profiler.
Document Findings: Keep records of your performance testing and the changes made to optimize
The Template Performance Profiler widget is a valuable tool for developers seeking to understand and optimize the rendering performance of their templates. By strategically placing the widget within your templates and analyzing the timestamps in the console, you can identify potential bottlenecks and areas for improvement.
