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.


.




 

Anatoliy

Well-known member
I'm not sure where you read that but editing templates is a perfectly valid approach and an add-on is not required.
hah... it's a complete mess in my had from biting too big pieces of information, that I'm not able to digest, so it's quite possible that I understood something wrong.

anyway, while waiting for your reply I tried on a local server a template modification for app_staffbar.less using the code from my post above. And it works! Here is normal (modification is disabled). I'm not logged in and p-staffBar- marked as unused.

1.jpg

And when I turn the modification on, those p-staffBar- are gone.

2.jpg

However I was happy only for a minute until I logged in as an admin and realized that they are gone not for guests only.
So what's the scoop? I can't use xF template style conditionals for css template modifications? Or I made a mistake in my code?
Or something else?
 

Brogan

XenForo moderator
Staff member
Regular conditional statements don't work in less/css templates.

You can though use this, which would only apply to guests: [data-logged-in="false"] .

For example:
Less:
[data-logged-in="false"]
{
    .block
    {
        color: orange;
    }
}

If you wanted to block code for guests and only allow it for logged in members, use the inverse.
 

Anatoliy

Well-known member
For example:
shoot... ( maybe I understood you wrong, but I did

find /^.*$/s
replace
Code:
[data-logged-in="false"]
{

}
[data-logged-in="true"]
{
   $0
}

Now I got those p-staffBar back when I logged in, but also I got them as [data-logged-in="true"] .p-staffBar when I'm not logged in. Unused.
 

Anatoliy

Well-known member
You can though use this, which would only apply to guests: [data-logged-in="false"] .
but my goal is not to add extra for guests but to remove already existing, but not used by guests. removing for guests only. )

I guess if xF team didn't make it in a core, it means there is a reason. )))
 

kelle67

Well-known member
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.
This is the way we use to tackle the problem.
 

Anatoliy

Well-known member
If you wanted to block code for guests and only allow it for logged in members, use the inverse.
I turned off the addon, and directly modified app_staffbar.less by wrapping everything with
[data-logged-in="true"]
{
}

Still can see those [data-logged-in="true"] .p-staffBar as unused while I'm not logged in.
 

nocte

Well-known member
Back to avatars: instead of using CSS or template modifications, you can use a simple class extension to show the default avatars (which are basically just text and no images) to all guests - I think that's the best solution if you want to get rid of the avatar images.

Just extend the class XF\Entity\User with:

PHP:
<?php

namespace Your\Addon\XF\Entity;

class User extends XFCP_User
{
    public function getAvatarType()
    {
        $visitor = \XF::visitor();

        if (!$visitor->user_id || $visitor->user_id == (\pow(2, 32) - 1)) {
            return 'default';
        }

        return parent::getAvatarType();
    }
}
(untested)

note: the part $visitor->user_id == (\pow(2, 32) - 1) might be necessary when you have "posting before registering" on.
 

Anatoliy

Well-known member
Back to avatars: instead of using CSS or template modifications, you can use a simple class extension to show the default avatars (which are basically just text and no images) to all guests - I think that's the best solution if you want to get rid of the avatar images.
Nice! Thank you!
 

nocte

Well-known member
I hided them anyway with display:none simply from design point of view. They create way too much of emptiness on mobiles.

Yeah, you can do this, if you want to be extra-minimalistic. But I would show a smaller avatar-placeholder with a template modification:

template:
message_macros

find:
<xf:avatar user="$user" size="s" defaultname="{$fallbackName}" itemprop="image" />

replace:
<xf:avatar user="$user" size="xxs" defaultname="{$fallbackName}" itemprop="image" />
 

sixlxvi

Well-known member
Instead of removing lines of code from templates and risking having problems on each XF upgrade, couldn't you just add conditionals throughout the templates? Put if is= user around that avatar block's HTML. Then add a else to call the stripped down CSS from extra.less. That way, all you ever did was "add" code to the templates, which is easier to find and debug during upgrades than if you remove and/or move code around.
 

nocte

Well-known member
couldn't you just add conditionals throughout the templates?
for css/less templates: no (see postings above; they don't support conditionals).

Regarding avatars (my code): a class extension normally does not make problems with upgrades, as long as there are no changes in that particular class or method.

Similar with template modifications: They usually affect just a small part of a template and are applied automatically. Normally, worst thing, that can happen, is that they don't work anymore after an upgrade.
 

Anatoliy

Well-known member
I would show a smaller avatar-placeholder with a template modification
And thank you the third time! )
That's probably the best solution. I was actually hiding not img avatars but those empty spaces they create on mobiles. If xxs will fit nicely, I don't see reasons to hide them They are lazyloadin anyway.
I'll try tomorrow. And thank you one more time.
 

Anatoliy

Well-known member
That way, all you ever did was "add" code to the templates, which is easier to find and debug during upgrades than if you remove and/or move code around.
making template modifications with an addon doesn't change the original code. you put the code that should be modified in one textfield, you put what it should be replaced with in the other. the worst scenario - after upgrade modification doesn't work anymore (means shows the original way).

but it took me 2 years to figure out how to create an addon ))))
thanks to xF for videos. it took me couple days with video tutorial.
 

Anatoliy

Well-known member
Yeah, you can do this, if you want to be extra-minimalistic. But I would show a smaller avatar-placeholder with a template modification:

template:
message_macros

find:
<xf:avatar user="$user" size="s" defaultname="{$fallbackName}" itemprop="image" />

replace:
<xf:avatar user="$user" size="xxs" defaultname="{$fallbackName}" itemprop="image" />
I'm stuck with this one. The code doesn't change avatars size. However when I do the same for size="m" it makes avatars tiny on desktop view.
I turned off all other modifications to eliminate conflicts, didn't help.

1.jpg
 
Last edited:

nocte

Well-known member
I'm stuck with this one.

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

try adding this to extra.less

CSS:
@media (max-width: @xf-messageSingleColumnWidth)
{
    .message:not(.message--forceColumns)
    {
        .message-avatar
        {
            .avatar
            {
                .m-avatarSize(@avatar-xxs);
               
                & + .message-avatar-online
                {
                    display:none;
                }
            }
        }
    }
}

this part is optional (it hides the online indictor):
CSS:
                & + .message-avatar-online
                {
                    display:none;
                }

If you want to reduce bandwidth, you should consider the class extension above tough, because we are showing avatars very small, but the images are still quite big (192x192 pixels, I think).

btw: you can add this via template modification as well, which makes export/sharing easier:

Template: extra.less
Find: #$#
Search type: Regular expression
Replace:
Code:
$0
<!-- here your additions -->
 
Last edited:
Top