Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

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

aem_dev2
Level 2
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
Bimmi_Soi
Correct answer by
Community Advisor
Community 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

View solution in original post

1 Reply
markus_bulla_adobe
Employee
Employee

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!

 

Bimmi_Soi
Correct answer by
Community Advisor
Community 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

View solution in original post

Arun_Patidar
Community Advisor
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