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

 

[Paul B]

Then I started reading related threads and found out that modifications should be done by addon, not directly in templates

I'm not sure where you read that but editing templates is a perfectly valid approach and an add-on is not required.

 

[Anatoliy]

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.



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



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?

 

[Paul B]

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:

[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]

For example:

shoot... ( maybe I understood you wrong, but I did

find /^.*$/s
replace

[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]

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. )))

 

[Anatoliy]

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

huh! I missed the most important. )

 

[kelle67]

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]

damn it!

 

[Anatoliy]

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.

 

[Anatoliy]

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

"Would/would not apply" probably means what you said, not what I wonted to hear: "Would/would not be loaded by a browser". )

 

[nocte]

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

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]

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!

 

[Anatoliy]

(untested)

tested.
thank you one more time!

but after image avatars became default avatars for guests, I hided them anyway with display:none simply from design point of view. They create way too much of emptiness on mobiles.

 

[nocte]

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" />

 

[Alternadiv]

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]

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]

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]

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]

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.

 

[nocte]

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

@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):

                & + .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:

$0
<!-- here your additions -->