Forum Discussion

PAULEM's avatar
PAULEM
Advisor
6 years ago

Embedding styles into custom components - thoughts please

We have a bunch of custom components that we use on our site.  This is probably the case for everyone!  Some components added to almost every 'page' and some are specific to one 'page'.  For example, we have some jQuery to make user badges more accessible on the 'User Badges Page'.  It is contained in a custom component and it is only required on that one 'page'.  We also have some CSS to style the '.lia-user-badge-display-card' class (for example) but it is in the global CSS. 

Would it be better to add a <style> tag to 'custom.userBadgesPage' and embed the styles into the component so that the styles only load when the page is loaded?  In some cases, we're only talking a few lines so its no big deal, but in other cases the page-specific CSS is over 200 lines.

Since Lithium pages are made up of components, it makes sense to me to have the component carry the JavaScript AND styles so that this code is only loaded when the page is called rather than parse the styles (in the global CSS) for every page on our site.

I have nix/nil/nada skills with page load/performance or the like but my reading suggests that CSS stops anything else from loading while it is parsed.  I'm hoping a guru or two will have some insights into this question that might help me decide whether or not to undertake a 'CSS rationalisation' program (move code chunks into components) or not (leave them in the global CSS).  All thoughts/tips/warnings are welcome.

Thanks in advance

Paul (Tasmania)

  • VarunGrazitti's avatar
    VarunGrazitti
    6 years ago

    PAULEM - This is definitely an option and something that can be leveraged to minimize the additional/unwanted CSS code that gets loaded on each page. Having said that, you can measure the performance of the pages with both the options using the Lithium toolbox and analyze which of these works better and efficiently. 

    The toolbox gives the core insights and will get the job done for you.

    I hope this helps.

3 Replies

Sort By
  • VarunGrazitti's avatar
    VarunGrazitti
    Boss
    6 years ago

    PAULEM - This is definitely an option and something that can be leveraged to minimize the additional/unwanted CSS code that gets loaded on each page. Having said that, you can measure the performance of the pages with both the options using the Lithium toolbox and analyze which of these works better and efficiently. 

    The toolbox gives the core insights and will get the job done for you.

    I hope this helps.

  • him_varma's avatar
    him_varma
    Advisor
    4 years ago

    PAULEM It is NOT recommended to add the custom CSS in the custom components. Though it will load the CSS only when component is loaded but it will deny you the privileges given by Khoros of optimizing your CSS and debug the synchronization issues in your CSS code which causes performance issue. Moreover by adding CSS code in components you are only increasing the rendering time of a component which is not optimizable also.  You can find more about how the CSS is loaded in Khoros community here https://community.khoros.com/t5/Skins-and-assets/How-Khoros-handles-CSS/ta-p/109079

    Also if you are using the version 19.5 or more then Khoros provides you the CSS performance enhancements in which they optimize your CSS to decrease the page Load time. You can find more about it in https://community.khoros.com/t5/Khoros-Communities-Release-Notes/Khoros-Communities-19-7-Release-Notes/ba-p/538709#performance


  • PAULEM's avatar
    PAULEM
    Advisor
    4 years ago

    Thanks VarunGrazitti  and him_varma for your help.

    Since posting my question, I've actually done both?!?  I moved all 'page-specific' CSS into the associated custom component so clear out the SCSS and then undertook a massive SCSS rebuild to rationalise/merge what was left into SCSS modules so that all associated CSS was stored together. Then I moved the component CSS back into the SCSS.

    It seemed to work, although now I'm retired so I'm not sure how well its working! The site definitely loaded quicker once the SCSS was rebuilt.