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?
Solved! Go to Solution.
Views
Replies
Total Likes
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.
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.
Hi @aem101
You can find the details below also refer the links for additional information
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
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://www.blueacornici.com/blog/best-approaches-clientlibs-aem-part-3
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.
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.
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
Views
Likes
Replies
Views
Likes
Replies
Views
Likes
Replies
Views
Likes
Replies
Views
Likes
Replies