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

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

View solution in original post

4 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