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

Forum|Forum|4 years ago
July 2, 2021
3 replies
9305 views

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by BimmiSo

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

MarkusBullaAdobe

Adobe Employee

Hi @aem_dev2!

Have you tried the approach outlined in the following documentation?

https://experienceleague.adobe.com/docs/experience-manager-core-components/using/developing/including-clientlibs.html?lang=en#attributes

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