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
