Forum Discussion

Kev_B's avatar
Kev_B
Advisor
5 years ago

CSS optimisation / best-practice

Hi everyone,

I've been acquainting myself with the Google Search Console more recently, and I'm getting reports about pages being slow to load.

A big drain seems to be our CSS resource. We did some redesign work on the community in 2015, and we have a single large file of CSS being served where we've overridden some of the default behaviours and added customisations as time has gone on. This file is now >13k lines long and is the majority of community pages probably use less than 10-15% of the file in one go.

I'm just wondering if anybody else has had to deal with bloated CSS contributing to poor performance? I'm considering using smaller CSS files and calling them from specific components, that should allow me to maintain any overrides present and only call the CSS when it's needed. Is that something worthwhile? It's worth noting that a lot of the performance-related bits are JS specific, and that's not directly in my control so I'm trying to fix what I can first.

TL;DR - I need to optimise my 13k-line CSS file and I'm contemplating splitting into smaller 'per component' files

  • peterlu's avatar
    peterlu
    Champion
    5 years ago

    Kev_B There is a new feature Khoros released recently to optimise the CSS. You can check the release logs.

    Khoros by default will gzip your css via the network, about 10% zip rate eg. 3MB zipped to 300KB. The out of box Khoros CSS is already big/huge. So splitting css into components is not gonna help. Coz the splitted css is not gziped 🙂

    You can lodge a support ticket to Khoros to turn on the CSS enhancement feature and see if it improves it.

    • Claudius's avatar
      Claudius
      Boss
      5 years ago

      The CSS performance enhancements are still in beta and were first mentioned in https://community.khoros.com/t5/Khoros-Community-Release-Notes/Khoros-Communities-19-7-Release-Notes/ba-p/538709#performance

      If they are working - and you have optimized your skin styling to work with it - they have the potential to reduce the CSS size quite a bit. You will still get the duplication of style assignments from the Khoros base skin and then the overriding statement from your skin.
      Unfortunately, the documentation on how to how to structure the CSS to work well with this feature is still lacking. Would be great if Khoros could supply some concrete best practices. See the discussion Best approach to benefit from CSS performance enhancements 

      I am currently trying to optimize the page performance for our community as well and at times reach the insane point of thinking about getting rid of the base skin and "just" creating our own skin. So far I managed to drag myself back to sanity, but I'm running out of alternatives to further reduce skin file size any other way.

      • Kev_B's avatar
        Kev_B
        Advisor
        5 years ago

        Claudius thanks for sharing that post, I'm glad I'm not alone in this venture!

        I completely understand that compulsion to create your own skin, I feel it too! ðŸ¤£

        It sounds like I may still need to optimise my SCSS file into page-specific segments, like you talk about doing, but it will be interesting to experiment with it once enabled and see where the savings can be made. I'll be following your post with interest.