XF 2.2 Reducing CSS for guests. How?

[Anatoliy]

I'm checking my forum with Google Pagespeed Insights and it says:
Eliminate render-blocking resources (/css.php?css=...)
Reduce unused CSS (/css.php?css=...)

Chrome dev tools under Coverage says that 92.7% - Unused (/css.php?css=public%3Anormalize.css%2Cpublic%3Afa.css%2Cpublic%3Acore.less%2Cpublic%3Aapp.less...)

I'm looking in and see classes(?) that are not related to guests, like .inlineModBar-..., .p-staffBar-..., etc. I understand the concept "it's for the first time loading only, then css file will be cashed and there will be no difference how big it is". However I see in G analytics that 80% of my visitors are new, who came from G search. So, it looks like reducing css file size for guests to prevent render blocking is a good idea.

I barely understand it, so I can write completely silly things, but I guess it's possible to put a conditional somewhere like
if user then original css
else reduced css for guests

Please advice.


.

XenForo architecture in ten minutes

With the publication of our Building with XenForo 2 video series, we've received various questions about a presenting broad overview of the XenForo architecture as a jumping-off point for would-be developers who want to know roughly what's going on behind the scenes. Therefore, with dubious...

xenforo.com

 

[Anatoliy]

mobile and desktop view are using the same html, so you have to use CSS.

I guess I will end up with resizing to xxs for mobiles instead of hiding.
Regarding extending a class - I like a lot that it replaces img with default avatar for guests on mobiles, but I don't like default avatars on desktops. So I probably will not use it. But thank to you I finally successfully extended a class. I tried many times before but always failed.

 

[Anatoliy]

TADA!!!
xxs xxs baby! )

 

[Anatoliy]

Another option that I'm experimenting with is just giving guests their entire own style. That way it can be heavily edited/pulled apart and it won't affect members. Ideally, it would look like a "normal" style, but it would be missing a ton of unnecessary code.

Why? It's not necessary for SEO.
Kidding. )))))))))))))))))))

What I want to ask is this. You make a default style "guest oriented" and another one - normal (for members). You removed from the default style a bunch of code that is not used by guests from html and less templates. I guess everything related to liking, voting, posting etc can be safely removed.

But here is the thing I can't understand. How to assign the second style to logged in members? As far as I know it's impossible in xF. And without it 99.9% of members will leave "because your forum is broken". No matter how loudly you will announce that members should switch the style.

Or I don't get something?

@nocte Can something be extended somewhere so it would assign a specific style to logged in users?

 

[nocte]

@nocte Can something be extended somewhere so it would assign a specific style to logged in users?

The good news: I am pretty sure, this can be done with an event listener within a few lines of code.

The bad news: I spent some time on it and tried it with dispatcher_pre_render and templater_setup, but no success

Maybe you should ask in the development forum section.

 

[Anatoliy]

Maybe you should ask in the development forum section.

done

XF 2.2 - How to assign a forum style to logged in users?

I'd like to make a default style "guest oriented" and another one - normal (for members). I'd remove from the default style code that is not used by guests from html and less templates (I guess everything related to liking, voting, posting etc can be safely removed). Can something be extended...

xenforo.com

 

[Anatoliy]

Santa gave me an addon that assigns one style to guests and another one to logged in members. So I created a new style Original (with no parent) and styles Guests and Members (with parent Original). And now from Guests style I can remove css rules that are not used by guests.

What would be "The way" to locate those rules?

 

[Anatoliy]

Names .p-staffBar-... and .inlineModBar-... suggest that those are used by staff members only, so in Guests style I removed
{{ include('app_staffbar.less') }} and {{ include('app_inlinemod.less') }} from app.less.

@Brogan could you please confirm that those are not used by guests. Also in app.less I can see {{ include('app_ignored.less') }} and {{ include('app_alerts.less') }}. Those are not used by guests also? Can they be removed also?

 

[jamalfree]

I made some template modifications to make thread pages loading faster for guests on mobiles (removed avatars, userTitles, online icon, etc). If I would not display adsense I could be happy, because without ads it looks pretty good.

View attachment 263783
However I do serve those adsense, and they drop those numbers down, so I'd like to move further, and it looks like css is my target. Pagespeedinsights says that amost 0,5sec could be saved by reducing unused rules from css.

View attachment 263784

I searched in resources for "css" but those are all about how to modify or to add rules. I didn't find anything to prevent render blocking.
No way that no one but me wants to fix render blocking. )

Please advise.

can you share it thise modification please