Adding “defer” attribute to clientLib script tags

Question

How would I add the defer attribute to our script tags? We get them via the clientLib tag call in our head.html but there's not much out there for AEM and how to easily add the defer tag to our scripts.

<clientlib data-sly-call="${clientLib.all @ categories=['company-libraries']}" data-sly-unwrap/>

Any help is appreciated! Thanks

Answer 1

As far as I know this does not work out-of-the-box. But there is a project on GitHub exactly for this purpose (async and defer loading).

See: https://github.com/nateyolles/aem-clientlib-async

With that package you then can do:

<meta data-sly-call="${clientLib.js @ categories='your.clientlib', loading='defer'}" data-sly-unwrap></meta>

Answer 2

You could use Jens answer: https://github.com/nateyolles/aem-clientlib-async but that one does not play nice with ACS commons versioned clientlib.which is why I made this: https://github.com/ahmed-musallam/aem-clientlib-async