AEM assets preload

[Mohammed-Skouti]

How to optimize clientlibs generation speed in AEM Core Components using a Sling Model for automatic asset preloading?

I'm looking for best practices to speed up clientlibs generation in AEM when using Core Components. Specifically, I want to:

1. Optimize the clientlibs load time.
2. Automatically generate preload links for critical assets (CSS, JS, fonts, etc.) using a Sling Model.

[h_kataria]

You can take a look at https://wcm.io/wcm/ui/clientlibs/usage.html which possibly allows preload for stylesheets as well as deferred or async load for js.
Hope this helps.

[Mohammed-Skouti]

@h_kataria The extension doesn't include a way to preload scripts

[h_kataria · Accepted solution]

The js include essentially generate script tag which itself doesn't support preload attribute. You can check if https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#fetchpriority is helpful otherwise you can take a look at their implementation https://github.com/wcm-io/io.wcm.wcm.ui.clientlibs/tree/develop and enhance it as per your requirements.
Hope this helps.

[arunpatidar]

Hi @Mohammed-Skouti 
Aprt from what @h_kataria mentioned.
You can rely on TTL based browser caching with clientlibs hashing. This will avoid making GET request to CDN for clientlibs