Improve Performance of AEM Components During Development Phase

Web performance is how quick web pages are successfully downloaded and viewable on the visitor’s browser. When we say “Web Performance Optimization”, this means that we are optimizing or increasing web performance. Quicker download speeds of websites, in general, have shown in user contentment, retention, and loyalty.

Especially with AEM enterprise websites, our motive is to deliver high-performance websites. Us as developers, we try our best to keep the code clean and optimum. When it comes to creating new AEM components, instead of waiting for the batch of approved non-released code to be deployed into a performance testing environment, you can monitor the performance of your AEM components beforehand in a local author.

Quickly view and monitor the performance of your component’s Sightly front-end logic and Sling Models back-end logic has never been so easy!
During the development of AEM page/content components, since AEM 6.2, the platform has provided a tool for us, developers, to conveniently monitor the server-side computational time. This tool is called the Developer Mode. This allows you to find slow loading page/content components, so you can take action and optimize it to the optimal! In this article, you will learn how to understand, and then improve, the page loading speed by identifying slow components by monitoring the component’s server-side computational time.

How to Review Server-Side Computational Time with “Developer Mode”
“Develop Mode” lives in the authoring AEM environment, inside of the editable page.

1. Visit any page that you would like to measure. Ensure the targeted component sits on the page, and if not, add the component to the editable page. http://localhost:4502/editor.html/content/we-retail/language-masters/en.html
2. Click on the tool-bar drop-down selector, and select “Develop”.

3. The page is reviewed with a side-panel which includes the component tree; the component tree is the populated structure of all the components that live within the targeted page. Immediately you can see the server-side computational time. This information is extremely useful when you are trying to optimize your AEM website. The metric used here is ms for milliseconds and s for seconds. As you can see in the image provided below, Page .033s indicates that the entire page takes 1/3 of a second to load all the components.

4. Along with a grouped server-side computational time, Individual components computational time will also be displayed. In the screenshot below, we are taking a look at the performance of the header component.

5. Hooray! You Have Completed this Tutorial. As an extension to this tutorial, we will learn about the “view details”, “edit script”, and also the “errors” option.

Buttons Legend:

• View Details: a link to a list that shows all the component scripts used to render the component, and also the repository content path for this specific component.
• Edit Script: a link that opens the component’s script in CRXDE Lite.
• Component Details: a link that takes you to the component details page.

NOTES:
This tool is definitely useful for when you are trying to optimize your AEM website, looking at the underlying cause of your slow rendered AEM page. Now go and optimize your logic to reduce page loading time!