Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

AEM Best Practices for Client Library Configuration

Avatar

Level 2

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?

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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.

 

 

View solution in original post

3 Replies

Avatar

Community Advisor

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

 

 

 

Avatar

Correct answer by
Community Advisor

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.

 

 

Avatar

Community Advisor

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

 


Aanchal Sikka