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 optimising 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 our 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 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!

How to Review Server-Side Computational Time with “Developer Mode”

“Develop Mode” lives in authoring AEM environment, inside of the editable page.

1. 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 on “Develop”.
      
   3. The page is reviewed with a side-panel which includes the component tree; the component tree is 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.