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!
 
Click to expand...
Chris D said:
On almost every page we serve currently, we include as many as five different variants of the Font Awesome 5 Pro icon library.
Click to expand...
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


xenforo.com

Implemented - Custom smilies and reactions are causing layout shift if not using sprite mode

Custom smilies and reactions do not have a width and height for the image if sprite mode is not used and thus are causing layout shift. Depending on the size of the smilies (think of large animated smilies) this can sum up quite a bit.
xenforo.com xenforo.com
 
Kirby said:
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

xenforo.com

Implemented - Custom smilies and reactions are causing layout shift if not using sprite mode

Custom smilies and reactions do not have a width and height for the image if sprite mode is not used and thus are causing layout shift. Depending on the size of the smilies (think of large animated smilies) this can sum up quite a bit.
xenforo.com xenforo.com
Click to expand...
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?
 
Cyberkef said:
FontAwesome v5.15.x and not v6.4.x?
Click to expand...
XF has no licence for FA6 so it will be a variant of the 5 series.
xenforo.com

XF 2.2 - When will we get FontAwesome 6 support?

Fontawesome 6 has some useful icons and I’d like to use one of them (slider-flip). But there are some changes. in FA5 vs in 6. Is FA6 support in the pipeline?
xenforo.com xenforo.com
Cyberkef said:
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
Click to expand...
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.
 
Cyberkef said:
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?
Click to expand...

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/
 
Chris D said:
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.
Click to expand...
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
github.com

GitHub - antennaio/jquery-bar-rating: jQuery Bar Rating Plugin - minimal, light-weight jQuery ratings.

jQuery Bar Rating Plugin - minimal, light-weight jQuery ratings. - GitHub - antennaio/jquery-bar-rating: jQuery Bar Rating Plugin - minimal, light-weight jQuery ratings.
github.com github.com
code.google.com

GitHub - timdown/rangy: A cross-browser JavaScript range and selection library.

A cross-browser JavaScript range and selection library. - GitHub - timdown/rangy: A cross-browser JavaScript range and selection library.
code.google.com code.google.com
github.com

GitHub - marioizquierdo/jquery.serializeJSON: Serialize an HTML Form to a JavaScript Object, supporting nested attributes and arrays.

Serialize an HTML Form to a JavaScript Object, supporting nested attributes and arrays. - GitHub - marioizquierdo/jquery.serializeJSON: Serialize an HTML Form to a JavaScript Object, supporting nes...
github.com github.com
github.com

GitHub - lrsjng/jquery-qrcode: jQuery plugin to dynamically generate QR codes.

jQuery plugin to dynamically generate QR codes. Contribute to lrsjng/jquery-qrcode development by creating an account on GitHub.
github.com github.com
github.com

GitHub - fancyapps/fancybox: jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable.

jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable. - GitHub - fancyapps/fancybox: jQuery lightbox script for displaying images, videos...
github.com github.com
github.com

GitHub - acornejo/jquery-cropbox: jQuery Cropbox plugin

jQuery Cropbox plugin. Contribute to acornejo/jquery-cropbox development by creating an account on GitHub.
github.com github.com

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.
 

Similar threads

digitalpoint
XF 2.2 Migrating to native JavaScript in XenForo 2.3
Replies
14
Views
1K
digitalpoint
digitalpoint
Dannymh
  • Solved
XF 2.2 Do Xenforo Crons cause any performance impact to the end user?
Replies
10
Views
544
Sim
Sim
Baby Community
  • Question Question
Will the update about google analytics be taken into account in xenforo 2.3 version?
2
Replies
20
Views
1K
ekool
ekool
tristan9
Xenforo and edge caches
Replies
5
Views
1K
motowebmaster
motowebmaster
Steffen
Fixed Big performance regression in the EmojiOne / JoyPixels PHP library in XenForo 2.2 (with partial fix)
Replies
2
Views
4K
Mike
Mike
Top Bottom