XF 2.3 Boosting performance in XenForo 2.3

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:

​

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

​

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.

• Font Awesome improvements
• JavaScript performance
• Bye bye jQuery
• Improved CSS performance with HTTP/2+
• Conclusion

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.

Accept third party cookies

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!

 

[Kirby]

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.

 

[Jeremy P]

CSS masks don’t currently support SVG sprites, unfortunately. In XF 3 I believe the vast majority of icons will not be CSS-based.

 

[Kirby]

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

What am I missing here?

 

[Xon]

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.

 

[Kirby]

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.

 

[Xon]

It was many individual SVGs, hopefully SVG sprites workout better.

 

[lutish]

Is it still worth static CSS file now? I have completed it in version 2.2. x

 

[Jeremy P]

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

 

[Kirby]

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

How SVG Fragment Identifiers Work | CSS-Tricks

I've talked a good bit about SVG's around here and using it to build an icon system. The beauty of is that you can reference just a part of some SVG defined

css-tricks.com

 

[Jeremy P]

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.

 

[willl]

but it looks like Safari might still not support it

I am absolutely shocked. Shocked, I say.

 

[Kirby]

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

 

[Chris D]

Depends what it is... only one way to find out!