AEM 6.4 - Clientlib javascript with async and defer, css with preload

[KhanIshaq]

Hi,

I needs to write the async or defer attributes to the JS import and preload in css.

Basically, the resulting HTML should be something like this:

<link rel="preload" href=".....all.css">

Notice the "async" word/attribute in the end of link tag above. It should be possible to use "defer" too.

On https://helpx.adobe.com/experience-manager/kb/optimize-aem-site-performance.html, I have found a library that can do this at Github https://github.com/nateyolles/aem-clientlib-async

But unfortunately this code is not compatible with the latest AEM 6.4.

Anyone has any idea, how to solve this issue??

Thanks

[Peter_Puzanovs · Accepted solution]

Hey Khan,

These features are not provided by OOTB AEM.

You need to extend libs.granite.sightly.templates.ClientLibUseObject and add your methods to the Object you will create.

Example by Nate Yolles, is actually pretty good(as always his examples are), it needs to be adapted to 6.4 as you said,

htmlLibraryManager in 6.4 knows how to write js include and css include, you can use that, the only difference would be that before the out.write you would need to replace the output with your additional attributes.

Regards,

Peter

[arunpatidar]

Please check below if helps

aem63app-repo/JSModel.java at master · arunpatidar02/aem63app-repo · GitHub