AEM Best Practices for Client Library Configuration

[aem101]

In Adobe Experience Manager (AEM), we have several options like categories, dependencies, embed, allowProxy, cssProcessor, and jsProcessor for managing client libraries. How do you utilize these features in your AEM projects? What are your best practices for optimizing frontend asset delivery and performance using client libraries?

[sherinregi]

Hi @aem101 

You can find the details below also refer the links for additional information

• categories: Identifies the categories into which the set of JS and/or CSS files within this cq:ClientLibraryFolder fall. The categories property, being multi-valued, allows a library folder to be part of more than one category (see below for how this may be useful).
• dependencies: This is a list of other client library categories on which this library folder depends. For example, given two cq:ClientLibraryFolder nodes F and G, if a file in F requires another file in G in order to function properly, then at least one of the categories of G should be among the dependencies of F.
• embed: Used to embed code from other libraries. If node F embeds nodes G and H, the resulting HTML will be a concetration of content from nodes G and H.
• allowProxy: If a client library is located under /apps, this property allows acces to it via proxy servlet. 

• cssProcessor: To process CSS file using min:yui compiler

• jsProcessor : To process JS file using min:yui compiler

https://medium.com/@toimrank/aem-clientlibs-css-and-js-6fda52c4e26f

https://experienceleague.adobe.com/docs/experience-manager-65/developing/introduction/clientlibs.htm...

Best practices purely depends on you usecases .Couple of considerations to look from SEO perspective

1) Enable JS minification and compression

2) Defer loading of Clientlibs to improve speed and avoid blocking other resources

3) Identify big libraries used for single pages and manage them into their own client library

4) Preload Rich Fonts

https://blog.3sharecorp.com/aem-page-speed-optimization

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/best-practices-to-manage-c....

https://www.blueacornici.com/blog/best-approaches-clientlibs-aem-part-3

[Sady_Rifat · Accepted solution]

Hello @aem101 ,

The categories property allows you to group client libraries into categories. Categories can be used to include multiple client libraries at once by specifying the category name. This is useful when you want to load related libraries together. In summary, this will merge the same category in a file. Note, that the categories should have dependency on each other.

• The dependencies property will let you load the files in the correct order on the web page.
• The embed property allows you to concate the multiple clientlib in a single file. This property actually solves the previous categories' property problem. Since it adds multiple clientlib into one, by this, you can split the code into several clientlib or component specific for better management,
• The allowProxy property determines whether client library resources can be served through a reverse proxy. This should be always true and you always need to define it.
• The cssProcessor and  jsProcessor properties allow you to specify processors that modify the CSS and JavaScript files of a client library, respectively. These processors can be used to perform tasks like minification, compression, or other optimizations on the client library assets before they are served to the client.

To utilize those increase the use of cssProcessor and  jsProcessor. Embed and dependency usages are variable. You need to use it when you are going to maintain an order. Especially the dependency.

[aanchal-sikka]

Hello @aem101 

For difference between embed and dependencies, please refer to https://khakiout.wordpress.com/2016/02/23/aem-clientlibs-difference-between-dependencies-and-embed/ Author has sketched out the differences. And provided explanations with examples.

Also refer to https://experienceleague.adobe.com/docs/experience-manager-65/developing/introduction/clientlibs.htm... It explains all about processors with examples again

Then visit https://experienceleague.adobe.com/docs/experience-manager-cloud-service/content/implementing/conten.... It tells about caching of client libraries