Forum Discussion

Claudius's avatar
Claudius
Boss
5 years ago

Best approach to benefit from CSS performance enhancements

(Renamed this thread. It used to be "SASS file name for group hubs")

I want to make use of the CSS performance enhancements mentioned in the 19.7 release notes. To determine whether CSS styles get included for a given page does this feature look at

  1. the location of the SASS file within my "page" category in my skin
  2. whether the style starts with a matching body Page type class, e.g. #lia-body.BlogArticlePage

So when adding group hubs styling to my skin would I create a new file in the "page" section of my skin and what name would it be. Or do I just pile those stylings into a random xyz.SCSS and wrap the styles in a #lia-body.GroupHubPage ?

  • Kev_B's avatar
    Kev_B
    Advisor
    5 years ago

    I just wanted to share my experience after we had this feature enabled on our production instance overnight, I just wanted to share some initial results. With no other changes the optimisation alone seems to have cut >2 seconds from FCP on PageSpeed Insights - which is a great starting point

    Note - we're just beginning our optimisation journey, so the scores are horrendous anyway!

    Report from Wednesday:

    Today:

    I'll be following this thread with interest to see what more can be done with this optimisation, but it's an appreciated improvement already. 

  • MattV's avatar
    MattV
    Khoros Staff
    5 years ago

    Great question, and something I think I'd like further clarification from our engineers on.

    But, what I takeaway from that documentation, is that it is the CSS selectors that matter; not the file names. The page folder itself inside of the skin is technically not part of the core framework, so I don't think any special consideration is given to those files, it's just for your convenience.

    Every page has the page name as a class applied to the body tag, which you can use in your CSS/SASS to target just that page.

  • Claudius's avatar
    Claudius
    Boss
    5 years ago

    So file structure is just for organizing and not taken into account to determine which content gets fetched for a certain page type. That's already helpful.

    I am currently using two types of bracket classes around page specific statements and I was wondering if both work well together with the CSS performance enhancements. So is there a difference between

    .ForumPage {}

    and

    #lia-body.ForumPage {}


    ?

    I often have to use the latter to reliably overrride Khoros base skin statements.

  • mdfw's avatar
    mdfw
    Genius
    3 years ago

    Hi Claudius 

    I wonder if you have any further insights into this feature. We're trying to give our CSS file a diet. We have this feature turned on, but I still see .BlogArticlePage bits being loaded on our Category page

    class="lia-user-status-registered CategoryPage lia-body using-mouse"

    Any suggestions on how to go about this? I still don't see much in the way of docs.