XF 2.3 Boosting performance in XenForo 2.3

googlechrome.github.io_lighthouse_viewer_ (4).png
In today's 'Have you seen...?' entry for XenForo 2.3 we're going to look at how we've zeroed in on enhancing performance, ensuring your community has a swift and seamless experience. We're going to take a deep dive into the advancements we've made and how they stack up against various performance metrics.

But, before we get into the individual changes, let's take a quick look at the baseline - this is our current Performance score as calculated by Lighthouse for the XenForo Community forum list:

googlechrome.github.io_lighthouse_viewer_.png

Here's the performance scores for some other forum software:

1.png
2.png
3.png

It's crucial to note that while this score provides a performance benchmark, it isn't the only indicator of success. Indeed, results can fluctuate slightly with multiple test runs. A site can still enjoy popularity with a lower score, but a higher rating undeniably enhances both search engine rankings and overall user experience.

Stay tuned! We'll reveal XenForo 2.3's updated score shortly. But before that, let's dive into the changes that have brought us here, shall we?

If you would like to jump to a particular section, use the links below.
Alternatively, if you want to skip a whole lot of reading, check out the TL;DR below:

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Oh and if you're concerned that all we've got to show you in XenForo 2.3 is performance improvements - fear not.

We will be showcasing a brand new feature next week!
 

Icon usage analyzer​

XF 2.3 now includes an icon usage analyzer which can analyze precisely which icons are being used across various content types, including within Less templates, and HTML templates, template modifications, phrases and even within JavaScript.

[...]

We are aiming to go into a little more detail surrounding the icon usage analyzer in an upcoming developer-focused 'Have you seen...?' but for now it is important to note that the usage analyzer can of course be extended in order to support analyzing in custom content types and other scenarios, including special casing specific icons.
Has this developer-HYS regarding icon usage been posted already?

As far as I can see all icons recorded from LESS templates are marked as standalome.
Is this intentional? This causes many requests for FA SVGs, both on my test installation and xenforo.com.
 
CSS masks don’t currently support SVG sprites, unfortunately. In XF 3 I believe the vast majority of icons will not be CSS-based.
 
Hmm, so this basically means all icons that are used via CSS will load their individual SVGs?
I am not sure if I like that ...

Depending on the styles there may be many icons that are used via CSS as it is quite easy to add them this way, doing it in HTML could mean having to modify (many) more templates.

What exactly are the issues with masks and SVG sprites?
This seems to work for me (after making a slight adjustment to the sprite generator):

1711110697189.webp


What am I missing here? :)
 
Hmm, so this basically means all icons that are used via CSS will load their individual SVGs?
I am not sure if I like that ...
This can crush low-end android devices if you have lots svg icons on a page.

When I converted from PNG to SVGs for reactions in 2021, and with 6-7 SVG reactions per post (so about 120 per page) this caused an unusable amount of scrolling lag on low-end mobile devices. I developed a quick solution to transcode these SVGs to PNGs on the fly, and the complaints entirely stopped.
 
When I converted from PNG to SVGs for reactions in 2021, and with 6-7 SVG reactions per post (so about 120 per page) this caused an unusable amount of scrolling lag on low-end mobile devices. I developed a quick solution to transcode these SVGs to PNGs on the fly, and the complaints entirely stopped.
Did this happen with SVG sprites or with (many) individual SVGs?

As far as I can see XF 2.3 does use sprites (for example for Froala) and individual SVGs.
 
What exactly are the issues with masks and SVG sprites?
This seems to work for me (after making a slight adjustment to the sprite generator):
What adjustment was made to the sprite generator (or was it just to push standalone icons into the sprite)? I'll take a second look. We anticipated it would be supported eventually, but the icon stuff was written quite a while ago now, and browser support was spotty: https://lab.iamvdo.me/css-svg-masks/#testM9
 
The sprite XenForo generates is a "symbol" mode sprite - this doesn't seem to work with mask-image.
I've changed this so the sprite is generated in "stack" mode which seems to work (at least for the few tests I made):
 
Chrome support for this appears to have landed very recently (v121 a few months ago), but it looks like Safari might still not support it.
 
For example, if you're familiar with using, e.g. <xf:fa icon="fa-comments" /> in templates [...] then you're all set.
Does this imply that a <xf:fa> call that did work in 2.2 should also work in 2.3 without changes?
If so I might have to report a bug ...
 
That functionality is still there, but the icon analyzer doesn't pick it up. Would be worth posting it as a bug, though the syntax we've expected there has always been:

HTML:
<xf:button href="https://..." class="button--link" icon="hide">Test</xf:button>

The icon attribute automatically sets the button--icon class and adds the button--icon--hide class.

Of course the fa attribute is even more flexible as it can use any icon (and any style):

HTML:
<xf:button href="https://..." class="button--link" fa="fad fa-eye-slash">Test</xf:button>
Sorry to bubble up old ask, but not 100% clear on what the recommended approach is.

Should it be:

HTML:
<xf:button href="https://..." class="button--link" icon="hide">Test</xf:button>

or

<xf:button href="https://..." class="button--link" fa="fad fa-eye-slash">Test</xf:button>

or even

<xf:button href="https://..." class="button--link"><xf:fa icon="fad fa-eye-slash"/> Test</xf:button>
 
If the aim is to use a duotone icon (as denoted by the fad class) then this one is the most appropriate:

HTML:
<xf:button href="https://..." class="button--link" fa="fad fa-eye-slash">Test</xf:button>

The third one is basically the same as the second but still valid.

The first one is valid too but it wouldn't be duotone.
 
If the aim is to use a duotone icon (as denoted by the fad class) then this one is the most appropriate:

HTML:
<xf:button href="https://..." class="button--link" fa="fad fa-eye-slash">Test</xf:button>

The third one is basically the same as the second but still valid.

The first one is valid too but it wouldn't be duotone.
Can you provide insight into what recommended approach would be to try and future proof for XF 3.0? Will both options #2 and #3 be supported, or should I go for #3 so I can do a quick find and replace?
 
https://jscroll.com/#/ if can implement this, would be massive improvements for page speed

This is a jQuery plugin. jQuery has been removed from XenForo 2.3+, so this will not be included with XenForo. Some of this plugin's functioning like lazy loading and AJAX is already built in XenForo already.

As far as infinite scrolling goes, it's been a suggestion for over 10 years and hasn't been very popular. https://xenforo.com/community/threads/infinite-scrolling.64441/
 
Back
Top Bottom