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!

 

[RobParker]

Google is notorious for not following its own directives.

It's own pages score poorly on Lighthouse.

View attachment 291696

And it does cause scores to reduce when using adsense.

There's not a lot XF can do about that.

I think my point is that XF scores in the 80s, you put in a ton of effort to get it to 99, then in the real world does Adsense drop it back down to 80 anyway?

 

[Paul B]

Possibly.

There's a thread here discussing scores in general: https://xenforo.com/community/threads/lighthouse-score.216771/

 

[benFF]

I think my point is that XF scores in the 80s, you put in a ton of effort to get it to 99, then in the real world does Adsense drop it back down to 80 anyway?

And if you use Adthrive/Raptive, it drops your score to 33

 

[⭐ Alex ⭐]

Google is notorious for not following its own directives.

It's own pages score poorly on Lighthouse.

View attachment 291696

And it does cause scores to reduce when using adsense.

There's not a lot XF can do about that.

Well you know what that means, they should drop the rank of their webpage in their search results below superior search engines like brave search.

 

[btmgreg]

Well you know what that means, they should drop the rank of their webpage in their search results below superior search engines like brave search.

Why would Google do that?

 

[MySiteGuy]

I understand that you’ve not supported older versions, but now is seems according to your statement that worrying about backwards compatibility isn’t acceptable. So it leaves us remaining third party developers to make a choice.

If you mark an update as requiring version X or greater... then those with older versions of Xenforo can still use the plugins by downloading the older version.

 

[Newsman]

So something I've wondered: what's the best way to learn about Xenforo's JS functions? Is there a documentation?

 

[James]

So something I've wondered: what's the best way to learn about Xenforo's JS functions? Is there a documentation?

There is docs but not sure if it specifically covers JS.

Overview | Developer Documentation | XenForo

Developer documentation for XenForo

xenforo.com

 

[MarenLBC]

This is huge!

 

[⭐ Alex ⭐]

So something I've wondered: what's the best way to learn about Xenforo's JS functions? Is there a documentation?

I'm looking inside the source code for the answer and all I can say is: "Ahhhh.... look at all that jQuery!".

I would say the best way to get a list of them would be to open up your browser's develop tools, open the console, type in XF and press enter. And then expand the result and go down the list of functions and properties.

 

[Paul B]

The webp posts have been split off to here: https://xenforo.com/community/threads/general-2-3-discussion.216667/

 

[Newsman]

I'm looking inside the source code for the answer and all I can say is: "Ahhhh.... look at all that jQuery!".

I would say the best way to get a list of them would be to open up your browser's develop tools, open the console, type in XF and press enter. And then expand the result and go down the list of functions and properties.

View attachment 291755

Thanks!

And yeah.. it's filled with jQuery code.. not sure how I'm supposed to replace form.submit() for example right now..

 

[Taylor J]

Thanks!

And yeah.. it's filled with jQuery code.. not sure how I'm supposed to replace form.submit() for example right now..

In your JavaScript you could just grab the form by either it's class name or id and then add an event listener to that to listen for any submit events. There are a few other ways of doing that as well.

const loginForm = document.querySelector(".myClassName");

loginForm.addEventListener("submit", (e) => {
  e.preventDefault();

  // handle submit
});

 

[Newsman]

I just found the .requestSubmit() function and it does what it should! Still, thanks for the input @Taylor J and sorry for the off-topic posts!

 

[briansol]

Improved CSS performance with HTTP/2+​

For webservers running HTTP/2 or higher, one of the key advantages is the support for multiplexing. Multiplexing allows for multiple resource requests (like JavaScript and CSS) to be handled concurrently, reducing overhead and boosting page load speeds.

In XenForo 2.3, we've optimized this functionality by refining how CSS requests are made.

• The core CSS, which is consistent across all pages, continues to be bundled into a single request.
• CSS specific to individual templates or pages will now be requested separately, rather than bundled together.

For a clearer representation of these changes, see below.

Before:​

<link rel="stylesheet" href="css.php?css=public:normalize.css,public:fa.css,public:variations.less,public:core.less,public:app.less" />
<link rel="stylesheet" href="css.php?css=public:node_list.less,public:notices.less,public:share_controls.less,public:extra.less" />

After:​

<link rel="stylesheet" href="css.php?css=public:normalize.css,public:fa.css,public:variations.less,public:core.less,public:app.less" />
<link rel="stylesheet" href="css.php?css=public:node_list.less" />
<link rel="stylesheet" href="css.php?css=public:notices.less" />
<link rel="stylesheet" href="css.php?css=public:share_controls.less" />
<link rel="stylesheet" href="css.php?css=public:extra.less" />

By making these requests individually and unbundling the CSS from others, this allows the individual templates to be cached and reused more effectively across different pages.

isn't extra.less included on all pages? shouldn't it be in the top multi-line bit?

​

But the proof, as they say, is in the pudding:

View attachment 291645
​

This high performance is consistently seen throughout the software:

View attachment 291646 View attachment 291647
​

Although we're tantalizingly close to a perfect score of 100, anticipate even more refinements with the introduction of the new style in XenForo 3.0.

I was hoping it wasn't just the homepage. threadview is the most important from a ranking perspective. it's 95% or more of SERPs.

 

[Jeremy P]

isn't extra.less included on all pages? shouldn't it be in the top multi-line bit?

For precedence reasons it must always be the last file to allow overriding rules with the same specificity.

 

[Kirby]

On question about the Icon Usage Analyzer @Chris D
How will that affect Add-ons that allow end users to display arbitrary icons, for example via a BB Code?

I am excited to see if the CSS changes actually have s positive effect on client performance

So far I've only seen lighthouse score increases but no improvement for real pageloads.

 

[Jeremy P]

There is support for rendering the icons inline rather than from the sprite, which may be useful for arbitrary icons.

 

[Suzanne O]

There is support for rendering the icons inline rather than from the sprite, which may be useful for arbitrary icons.

This sounds interesting

 

[Xon]

My worry is that some mobile devices really suck at rendering SVGs. Older Android devices with stock Android browser are head scratchingly bad.

In 2021; on Sufficient Velocity, when I swapped reaction images to using individual SVGs instead of PNG's I had a number of complaints about poor performance on low-end mobile devices. I haven't tried using SVG spites however.