Advanced Clientlibs

Clientlibs are the way in AEM to serve CSS and/or JavaScript. The JavaScript can only be printed as a regular <script->tag.

This Jetpack tool allows you to load JavaScript async or defer.




<script type="text/javascript" src="/etc.clientlibs/brand/clientlibs/test.min.js" defer></script>
<script type="text/javascript" src="/etc.clientlibs/brand/clientlibs/test.min.js" async></script>

Biggest advantages

  • Load JavaScript async
  • Load JavaScript defer

Ready to try this out?

Want to learn more on how this works?

Don't load the regular clientlib.html, but load this custom one. An option can be provided when calling the template. The value of this option can be 'defer' or 'async'.




<sly data-sly-use.clientLib="/apps/granite/sightly/templates/clientlib.html"
     data-sly-call="${clientlib.js @ categories='brand.test', option='defer'}"/>

or




<sly data-sly-use.clientLib="/apps/granite/sightly/templates/clientlib.html"
     data-sly-call="${clientlib.js @ categories='brand.test', option='async'}"/>