Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

Clientlibs

Avatar

Level 7

Hi Team,

Should we add the js and css related to components in the ui.frontend folder which is rendered in clientlibs-site on build or should we create the component specific clientlibs for each component?

 

What is the preferred approach and why wrt the number of js calls, speed and performance?

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

In both cases there are some pros and cons:

Integrate into the same clientlib:

Pros:

  • Single network call

Cons:

  • In various site performance sites (Google Pagespeed) you will get a warning for a bigger file. It will become render-blocking
  • Unused CSS and JS will load every time

Single Clientlib load with component:

Pros:

  • Only load those clientlibs that are used on the page
  • No render-blocking loading

Cons:

  • Many network call

In terms of performance, Cache can help both cases. 

 

My opinion: If your site is small then you can go for the same clientlib option. Other than use component-wise clientlib to get rid of load unnecessary JS and CSS.

View solution in original post

2 Replies

Avatar

Community Advisor

Hi @Madhur-Madan It is always preferred to have one for the entire template. Otherwise the no of calls will get increased and that will also impact your performance.

 

It is totally dependent on the architecture design you choose.

 

Hope this helps!

Thanks

Avatar

Correct answer by
Community Advisor

In both cases there are some pros and cons:

Integrate into the same clientlib:

Pros:

  • Single network call

Cons:

  • In various site performance sites (Google Pagespeed) you will get a warning for a bigger file. It will become render-blocking
  • Unused CSS and JS will load every time

Single Clientlib load with component:

Pros:

  • Only load those clientlibs that are used on the page
  • No render-blocking loading

Cons:

  • Many network call

In terms of performance, Cache can help both cases. 

 

My opinion: If your site is small then you can go for the same clientlib option. Other than use component-wise clientlib to get rid of load unnecessary JS and CSS.