Clientlib.min CSS and Js are big in sizes

[ajeemaww9196509]

Google page speed is suggesting, In our site currently we are using only 3% of the css code from clientlib.min.css to home page and other 97% is unused css for home page.

So I'm planning to develop component based css and js rather using common css and js. Is this a best practice in AEM?

[Nirmal_Jose]

Homepages are always important and has to be kept unique. If you have a separate design rule where you mention only a specified set of components for homepage, then you can create a special clientlib for homepage and load it on homepage template. This can be achieved using the component categories added to the clientlib 'embed' property. 

[BrianKasingli · Accepted solution]

Hello,

How is your front-end scripts and css generated? For instance, if you have a nodeJS application that builds your css & js, then there would be more effort involved to separated pieces and parts of css and js; time, efficiency, cost. However, if you have all your components perfectly organized (Adobe core components on github as a great example), where each components have its own client library, then you can easily call client libraries to pages whenever they are required (using editable templates via template policies). All in all, if you are pushing for unique client libraries for each page template, then many different pages will have different css and js combinations. You’ll be seeing more requests made from a single reload of a page; Google page speed also doesn’t like that, however you can try to use the Apache page speed module to combine combinations of files together.

I hope this helps.

[ajeemaww9196509]

Is there any possibilities to bundle those css and js to avoid multiple requests?

[BrianKasingli]

Yes, you can create a specific client library for a specific page template to only embed component based client libraries that are allowed to be authored on the page. You can create a base client library that carries the common JS & CSS across all pages, and a home client library for the specifically for the home page, for example.