Optimise AEM page with multiple custom components



So I'm currently using AEM 6.5 for a demo website I'm trying to build. The use-case is I need to pull content from a content management system(CMS) using restful API's to build this site. For this purpose, I've created a custom component that has a dropdown in its configuration for the different content categories available in the CMS. Now based on this content category and a unique id from the request parameters, I make a rest API call to my CMS to get data. 

I place this custom component at multiple places in my page for different content as needed. I use the Java backend (WCMUsePOJO) to make the API calls to my CMS. The issue I ran into is that, when I place multiple of these components on my page, the page slows down significantly. Is there any optimisation approach that you can suggest?

I'm also using the tab component on my page, so if there is any optimisation around that, it'll work too.

component optimization program

Accepted Solutions (1)

Accepted Solutions (1)





How often does the content from the third-party API content's change? How much content is involved? Are you just serving .html rendered files?

Yes, definitely there will be a performance hit when you are rendering a .html page with dependencies from an XHR request; XHR responses take time, your website will be absolutely be impacted.

An approach for increasing performance is to save and store content from the third-party content API for consuming using the WCMUsePojo API or the JCR API. The save and store mechanism could be an OSGI Scheduler within AEM or by written into AEM by the third-party application with the JCR API. 
I hope this helps,


Answers (2)

Answers (2)



@aradhyakasat what kind of content you are pulling from other CMS? Is the rest call used for end user content to be displayed on webpage or something to be in authoring side? Can the content be cached? How frequently the other side content changes? Is it secure or public content?


Based on the above responses, 

If on webpage and should not be cached, I would prefer this to happen at frontend javascript if the api is doesnt serve confidentiality content.

For other purposes if data is simple, I would prefer to write a sling model and store the data inside jcr under some data-page if that can be reused across other page, and call this model once to inject all data into the page via json or data attributes and javascript do the rest.


If the data is huge, instead of json or data attributes to you may need to put some flags to check and call rest api only once and for subsequent calls refer to jcr nodes.