XF 2.2 Reducing CSS for guests. How?

Anatoliy

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.


.




xenforo.com

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 xenforo.com
 
Sort by date Sort by votes
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.
 
Upvote 0 Downvote
Anatoliy said:
I made some template modifications to make thread pages loading faster for guests on mobiles (removed avatars, userTitles, online icon, etc).
Click to expand...
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.
 
Upvote 0 Downvote
eva2000 said:
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.
Click to expand...
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?
 
Upvote 0 Downvote
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?
 
Upvote 0 Downvote
sixlxvi said:
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.
Click to expand...
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.
 
Upvote 0 Downvote
eva2000 said:
display: none will still have the browser download the images even if they aren't displayed in browser.
Click to expand...
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.
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
Anatoliy said:
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.
Click to expand...
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.
 
Upvote 0 Downvote
Anatoliy said:
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.
Click to expand...
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.
 
Upvote 0 Downvote
sixlxvi said:
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.
Click to expand...
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 )

sixlxvi said:
Also, before I get the "why?" or "not necessary for SEO" -- I personally do it for the challenge/for fun.
Click to expand...
yeah, I don't get those guys. "because I want to" - not a strong enough reason? )
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
Brogan said:
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.
Click to expand...
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? )
 
Upvote 0 Downvote
You must log in or register to reply here.

Similar threads

R
  • Solved
XF 2.3 Hide 'Post Thread' Button For Guests
Replies
3
Views
65
Paul B
P
Tamasita
  • Question Question
XF 2.2 Showing "Post Thread" Button for Guests
Replies
3
Views
446
Mr Lucky
Mr Lucky
bryanb
  • Question Question
XF 2.2 How to turn off Advanced Search for guests?
Replies
6
Views
745
Paul B
P
T
  • Question Question
XF 2.2 Enable CAPTCHA for guests on registration not working
Replies
0
Views
563
tiwale
T
Zw3tty
  • Locked
  • Question Question
Is there a way on removing every access for guests?
Replies
1
Views
625
Paul B
P
Back
Top Bottom