Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

design for Including only selective clientLib on page

Avatar

Level 4

Hi all,

We are trying to improve the performance of page by just including the required CSS /JS instead of including all CSS / JS of project. I think this is a common use-case where we have lots of CSS / JS but we use only few on each page depending upon the number & types of component used on that page. 

What is the best solution for this which will be good balance of authoring experience as well as improving page performance at the same time.

Below are the goals which i am trying to solve:

1) Make single CSS / JS call if possible 
          - Multiple CSS / JS call will increase the network traffic and will decrease performance of page

2) Inlucde only selective CSS / JS (club them all into one) which are required for that page 
       - This will make sure that size of final CSS / JS is optimum instead of including everything. because of the CSS / JS might even not been used on page

3) Keep Authoring simple if possible 
        - Trying to see if we do not add extra work on Authoring side to attain this 


Below is the approach which i can think so

Approach # 1 (Authoring Approach)
In component code add extra code which will also display name of clientLib to be included. When authoring team drag and drop a component he/she will see the clientLib required for that component. We will have a separate component on top of page for capturing all the clientLibs required for this page. Authoring will add those clientLib categories to the page. Organize your clientlib in such a way that we group the CSS / JS used across multiple components into one

Advantage
No extra code is required to find out clientLib for that component. 

Disadvantage
1) Authoring team has to add the clientLib to page for all the components which we are adding to page
2) Extra work on site dev UI team while writing CSS / JS to make sure club the CSS / JS for multiple similar components into one


Approach # 1 (Authoring Approach)
In component code add extra code which will also display name of clientLib to be included. When authoring team drag and drop a component he/she will see the clientLib required for that component. We will have a separate component on top of page for capturing all the clientLibs required for this page. Authoring will add those clientLib categories to the page. Organize your clientlib in such a way that we group the CSS / JS used across multiple components into one

Advantage
1) No extra code is required to find out clientLib for that component. 
2) Simple approach

Disadvantage
1) Authoring team has to add the clientLib to page for all the components which we are adding to page
2) Extra work on site dev UI team while writing CSS / JS to make sure club the CSS / JS for multiple similar components into one

 


Approach # 2 (AEM Dev approach)
In this approach we will store the clientLib to be included for a component in component properties itself. We will have extra code in page template (or somewhere) to read all the clientLibs category name  for all components included on page and try clubbing them into one and include on page

Advantage
1) No extra work for Authoring Team

Disadvantage
1) This might complicate the solution on AEM Developer end

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Approach should be close to #2.

You need to have the template level or site level clientlibs at /etc/designs and include that in your template.

For components, create clientlibs under that component folder itself which get included only when the component is used in the page while authoring. 

This is the normal approach to be followed in AEM.

 

Regards,

Lokesh

View solution in original post

0 Replies

Avatar

Correct answer by
Community Advisor

Approach should be close to #2.

You need to have the template level or site level clientlibs at /etc/designs and include that in your template.

For components, create clientlibs under that component folder itself which get included only when the component is used in the page while authoring. 

This is the normal approach to be followed in AEM.

 

Regards,

Lokesh