> For the complete documentation index, see [llms.txt](https://docs.wem.io/platform/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wem.io/platform/wemtipsandtricks/performance/template-performance-profiler.md).
# Template Performance Profiler
## Template Performance Profiler
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.
### **Accessing the Template Performance Profiler**
To use the Template Performance Profiler, follow these steps:
1. Go to the **Widget** tab in the resource pane.
2. Add the Widget library called **Widget**
3. In the library called **Widget**, locate the **Template Performance Profiler**.
4. 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.
5. Configure the `log message` property with a expression resulting in text. This message will be displayed in the console along with a timestamp.
### **Configuring the Log Message**
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.
### **Viewing Performance Data**
Once the Template Performance Profiler is in place, you can view the performance data in the browsers console:
1. **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`
2. **Navigate to the Console:** Go to the console tab to see the log messages.
3. **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.
{% hint style="info" %}
You can filter console messages to show only logs. Profiler messages are categorized as logs for focused performance analysis.
{% endhint %}
#### **Example Usage**
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:
```
15:55:19.477 - Item 1
15:55:19.480 - Item 2
15:55:19.500 - Item 3
15:55:20.435 - Item 4
15:55:20.589 - Item 5
15:55:20.785 - Item 6
```
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.
#### **Best Practices**
* **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
## Summary
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.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.wem.io/platform/wemtipsandtricks/performance/template-performance-profiler.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.