Optimise AEM page with multiple custom components

[aradhyakasat]

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.

[vanegi]

Please check this https://helpx.adobe.com/in/experience-manager/kb/optimize-aem-site-performance.html for reference. Thanks!!

[Shashi_Mulugu]

@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.

[aradhyakasat]

@Shashi_MuluguThanks for your response. Currently the way I've set it up is that it'll make the rest call for both the end user content and on the authoring side. The content gets updated once a month or quarterly. Also its public content, nothing confidential.

For the 2nd and 3rd solutions, can you point me towards an example I can refer to?

Thanks!

[BrianKasingli · Accepted solution]

@aradhyakasat, 

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,

Brian.

[aradhyakasat]

@BrianKasingli  The content from 3rd party API updates once a month or a quarter. There are about 15 content categories currently. Yes, in the response from the 3rd party API, we get an HTML for the content, which I directly render.

I did a little experiment where I incrementally placed my custom component on the page and saw the page load time increase linearly. Does that mean all these API calls are made sequentially? My understanding was that all the XHR request-responses for my component would be parallel. 

Also for the save and store mechanism you suggested, could you point me to an example or a reference project/repo. That'll be really helpful.
Thanks

[BrianKasingli]

@aradhyakasat, in this case, can you create a strategy to cache the HTML response within the JCR? maybe save the HTML response in /content/my-site/wordpress/*. all subsequent loading of other page will check if the cache exist, if it does, it will render the page using data stored from /content/my-site/wordpress/*

[aradhyakasat]

@BrianKasingli that sounds like an interesting approach. Is there a resource I can look at for reference since I'm relatively new to AEM.

[BrianKasingli]

@aradhyakasat, an example can be found here https://aemcorner.com/include-external-resource-in-aem/