How to add async/defer attribute to the clientlib js/css

[aem_dev2]

Hi AEM guru,

To improve our AEM page performance, we are trying to implement async/defer for our client lib js and css but it is not working.

This is our inclusion tag

<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html"

data-sly-call="${clientlib.all @ categories='abc.base'}"/>

i tried

<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html"

data-sly-call="${clientlib.all @ categories='abc.base' , option='async'}"/>   - this didnt worked

then tried

<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html"

data-sly-call="${clientlib.all @ categories='abc.base' async=true}"/>. - This also didnt worked.

Any help is appreciated . Thanks in advance. 

[markus_bulla_adobe]

Hi @aem_dev2!

Have you tried the approach outlined in the following documentation?

• https://experienceleague.adobe.com/docs/experience-manager-core-components/using/developing/includin...

<sly data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @
    categories='wknd.base',
    media='print',
    async=true,
    defer=true,
    onload='console.log(\'loaded: \' + this.src)',
    crossorigin='anonymous'}">
    ${clientlibs.jsAndCssIncludes @ context="unsafe"}
</sly>

Please note: Your third code snippet does seem to be missing a comma "," between the categories and the async attributes.

Hope that helps!

[Bimmi_Soi · Accepted solution]

Hi @aem_dev2 ,

This should work.

<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html"

data-sly-call="${clientlib.all @ categories='abc.base', async=true}"/>. 

Thanks

[aem_dev2]

Thanks @Bimmi_Soi - This us not working in my case

[mtremblay]

This does not work - the correct answer is https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-add-async-defer-att...

[arunpatidar]

hi,

OOTB it does not supported.

you can follow the approach suggested by @markus_bulla_adobe  or you can create your own Clientlibs model

e.g. https://github.com/arunpatidar02/aem63app-repo/blob/master/java/ClientLibsModel.java