XF 2.2 Reducing CSS for guests. How?

Anatoliy

Well-known member
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.


.




 
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.

1.webp
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.

2.webp

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.
 
I made some template modifications to make thread pages loading faster for guests on mobiles (removed avatars, userTitles, online icon, etc).
I've been doing similar things because I like to see a near perfect PageSpeed score.

Did you just add CSS to say if the user is a guest and on mobile, then display: none the following items? That's how I've been doing it. But the hidden stuff is still in the HTML source. Does that matter? Maybe for DOM size?

Basically, is display: none as good as removing HTML? Not that removing HTML is rational for this - I'm just curious.
 
No it is not the same. Especially for images, display: none will still have the browser download the images even if they aren't displayed in browser.
Sometimes I display: none the entire logo header and navigation/sub navigation bars, to experiment with custom stuff.

Because the navigation scroller/sticky uses JS, I image actually removing the HTML would be a decent improvement over display: none'ing those?
 
Guests are not only the search robots... Removing elements from your site will reduce its visual attractiveness, the coherence of its structure and this could discourage some visitors from registering, right?
 
I've been doing similar things because I like to see a near perfect PageSpeed score.

Did you just add CSS to say if the user is a guest and on mobile, then display: none the following items? That's how I've been doing it. But the hidden stuff is still in the HTML source. Does that matter? Maybe for DOM size?

Basically, is display: none as good as removing HTML? Not that removing HTML is rational for this - I'm just curious.
I built an addon with template modifications. And yes, for hiding avatars for guests on mobiles I wrapped them in a custom class and added display:none rule in extra.less.
 
display: none will still have the browser download the images even if they aren't displayed in browser.
I was sure it will act this way. But it looks like a browser download attachments only, no avatars.

1.webp

But I'm for removing avatars for guests on mobiles just because they take 4 times more space (in height) than usernames.
 
So back to Reducing CSS for guests question. I found a way and it's probably the dumbest one of all possible ones, but that's the only one I can figure out at this stage.

I discovered in helper_js_global:

Code:
    <link rel="stylesheet" href="{{ css_url($cssUrls) }}" />

so I guess I could replace it with

Code:
<xf:if is="!$xf.visitor.user_id">
    <link rel="stylesheet" href="custom.css" />
<xf:else />
    $0
</xf:if>

then put all css into custom.css and then line by line removing rules that are not used by guests.

Sounds like way too much of work. And probably it will be ruined the next upgrade.
 
I built an addon with template modifications. And yes, for hiding avatars for guests on mobiles I wrapped them in a custom class and added display:none rule in extra.less.
Good to know, thanks. Might need to send you a DM to pick your brain / share some of my code to you when I get some extra time one of these days.
 
So back to Reducing CSS for guests question. I found the way and it's probably the dumbest one of all possible ones, but that's the only one I can figure out at this stage.

I discovered in helper_js_global:

Code:
    <link rel="stylesheet" href="{{ css_url($cssUrls) }}" />

so I guess I could replace it with

Code:
<xf:if is="!$xf.visitor.user_id">
    <link rel="stylesheet" href="custom.css" />
<xf:else />
    $0
</xf:if>

then put all css into custom.css and then line by line removing rules that are not used by guests.

Sounds like way too much of work. And probably it will be ruined the next upgrade.
I found myself here once. Definitely not worth the mess.

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.

Also, before I get the "why?" or "not necessary for SEO" -- I personally do it for the challenge/for fun.
 
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.
That's definitely an option. However as I understood all template modifications should be done with an addon, not directly in templates, and addon will apply modifications to all styles, so... I guess big boys will not approve your idea )

Also, before I get the "why?" or "not necessary for SEO" -- I personally do it for the challenge/for fun.
yeah, I don't get those guys. "because I want to" - not a strong enough reason? )
 
Why not set the default style as the one with all the customisations?
You can edit the templates and CSS in the normal way, without using conditional statements.

Then have another useable style which members or guests can select.
 
Why not set the default style as the one with all the customisations?
You can edit the templates and CSS in the normal way, without using conditional statements.

Then have another useable style which members or guests can select.
That's actually the idea I started with. )
Then I started reading related threads and found out that modifications should be done by addon, not directly in templates. So I watched "Building with XF2" and was able to build an addon and added desirable template modifications to it. And I have no problem with adding custom css rules, what I'm stuck with is quite opposite - I'd like to remove already existed but not used if page is served for guest.

I might be fooled by names, but I decided that rules like .inlineModBar-..., .p-staffBar-..., etc. could be safely removed for guests.
And I completely understand that "how it looks to me" and "how it is" are two different thing. )))

So by "You can edit ... CSS in the normal way" you mean to add another template modification say to app_inlinemod.less:

Search type: regular expression
Find: /^.*$/s
replace:
Code:
<xf:if is="!$xf.visitor.user_id">

          <xf:else />
           $0
        </xf:if>

And are those .inlineModBar-... are really rules for Mods bar (that is not shown to guests), or it's just a coincidence? )
 
Top Bottom