Expand my Community achievements bar.

SOLVED

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

Avatar

Level 2

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. 
 
 
 
 
 
1 Accepted Solution

Avatar

Correct answer by
Employee Advisor

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
0 Replies

Avatar

Employee Advisor

Hi @aem_dev2!

Have you tried the approach outlined in the following documentation?

 

 

 

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

 

Avatar

Correct answer by
Employee Advisor

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

Avatar

Community Advisor

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

page footer