# 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 library allows you to load JavaScript async or defer.

The output by using this library can be:

<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'}"/>