Clientlib.min CSS and Js are big in sizes

ajeemaww9196509

18-12-2019

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?

Clientlib.min.css

Accepted Solutions (1)

Accepted Solutions (1)

BrianKasingli

MVP

18-12-2019

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.

Answers (1)

Answers (1)

Nirmal_Jose

MVP

18-12-2019

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.