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!
 
On almost every page we serve currently, we include as many as five different variants of the Font Awesome 5 Pro icon library.
Is there going to be built-in support for the Duotone variants? I've had varying success getting them to work in our custom styles. (Either they don't display, or I can't control color, saturation and opacity through CSS/LESS.)
 
It is a bit disappointing that a lot of effort has been put into optimizing client performance, but some CLS issues lighthouse does complain about have not been fixed (or maybe they have been addressed but this was not included in this HYS?):

1696568459094.png


 
It is a bit disappointing that a lot of effort has been put into optimizing client performance, but some CLS issues lighthouse does complain about have not been fixed (or maybe they have been addressed but this was not included in this HYS?):

View attachment 292085

Fixed in 2.3
 
Not really. In 2.2 and below icons are just HTML elements so you just append an element like <i class=“far fa-comments”></i> to the page and it will render that icon.

There’s a few more moving parts in 2.3 to make things like the subsetting work and how the icon renders may be different in some cases - sometimes we render the SVG inline; others it renders from the sprite sheet.

Basically very easy to handle it manually in 2.2 but not so in 2.3 which necessitates that approach.

Not least the fact that we have to be able to discover icons used in JS files so they can be added to the spritesheet so we have to have them in a predictable format to do that.
 
Thank you guys for these improvements!

One thing I was wondering about after a question of one of our crew-members ("Why do we still use the old Twitter icon in our social icons") and did not find any existing question/answer for: will XF2.3 still be using FontAwesome v5.15.x and not v6.4.x?

With the optimalisations the new system will provide, the jump from 7.9k icons to 26.2k icons should not have any influence on the loadingtimes, right?
 
FontAwesome v5.15.x and not v6.4.x?
XF has no licence for FA6 so it will be a variant of the 5 series.
With the optimalisations the new system will provide, the jump from 7.9k icons to 26.2k icons should not have any influence on the loadingtimes, right
XF now builds a custom sprite sheet for FA icons so it only loads the icons you use on your site and not the whole sprite. This will improve loading times.
 
One thing I was wondering about after a question of one of our crew-members ("Why do we still use the old Twitter icon in our social icons") and did not find any existing question/answer for: will XF2.3 still be using FontAwesome v5.15.x and not v6.4.x?

The XF devs have said that, because there are no licensing options for them with FA 6, they will be staying with FA 5 for the foreseeable future.

As for changing the Twitter icon, in the share page widget, to X, you can see how to do that here: https://xenforo.com/community/resources/change-twitter-share-logo-to-x-logo.9264/
 
Which will only be required until 2.2.14 is released.

We’re including the FA6 X icon SVG in the next releases as you can see here.
I mentioned it in the FontAwesome 6 thread, but I really would love to see XenForo adopt a more generic system for icons such as Iconify (https://iconify.design) by @Arty, or even something a bit more bespoke where it is included in the style property system.

It has become more and more ubiquitous in development/design frameworks because of the flexibility it offers, and adding it with XF3 would be the perfect time due to the new style.
 
There are other 3rd party libraries bundled which seem to be jQuery only

I guess those have been replaced?
 
Select2 - replaced with Tagify
jQuery barrating - rewritten and bundled in rating.js
Rangy - i don’t think this was used any longer (or we removed the need for it during this process)
serializeJSON - rewritten and included in core.js under XF.Serializer.serializeArray
Qrcode - replaced with kjua (same author)
Fancybox - using latest Fancybox version which is native JS
Cropbox - rewritten and bundled in avatar.js
 
If avatar.js is included, yes. It’s a new object/class called XF.CropBox in that file.

It didn’t really make sense to include it anywhere else.

It could be moved to its own file if needed but there’ll be a public beta process to assess things and provide feedback.
 
Back
Top Bottom