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!

 

[Valhalla]

Gosh, writing the HYS posts and making/editing the video is a task in itself!

Lots of changes that will help to improve metrics and user experience - very nicely done.

 

[Suzanne O]

Awesome update guys!

 

[Paul B]

Gosh, writing the HYS posts and making/editing the video is a task in itself!

You have no idea ...

 

[Xon]

jQuery going away isn't unsurprising.

Definitely on the painful side, especially on trying to have add-ons support XF2.3 and XF2.2 at the same time.

 

[tajhay]

Nice work team!

 

[thedude]

Nice lighthouse score. 40k lines of js to rewrite...sounds exhausting

 

[Chris D]

Nice lighthouse score. 40k lines of js to rewrite...sounds exhausting

Me: I never want to see JavaScript ever again
Also me: * starts a new JS centric project for 3,0 *

 

[digitalpoint]

Can we get a JavaScript method to check the version of XenForo (like XF.ver or something)? I can foresee addons trying to support multiple versions of XenForo and it getting ugly by doing random checks like if XF.on() exists or not.

Starting to code for a jQuery-less world, and can already see where a version check mechanism would allow something to support 2.2 and 2.3 (at least for a little bit).

updateHeatMap(data)
{
    // XF 2.2
    $('.timeBlock').css('opacity', 0);
    $.each(data.points, function(index, value) {
        $.each(value, function(i, v) {
            $('#h' + index + 'D' + i).css("opacity",v / data.max);
        });
    });

    // XF 2.3?
    /*
    document.querySelectorAll('.timeBlock').forEach(el => {
        el.style.opacity = 0;
    });
    data.points.forEach((value, index) => {
        value.forEach((v, i) => {
            document.getElementById('h' + index + 'D' + i).style.opacity = (v / data.max).toString();
        });
    });
    */
}

I already miss $.css().

 

[AndrewSimm]

I feel like the big hint is that 2.3 is the last version of XF 2.X.

 

[Paul B]

That has already been stated.

After 2.3 is 3.0, which is all about the completely new style.

 

[TimeWizardCosmo]

Wow, as someone who isn't impressed very often, this looks outstanding. I'm sure my seal of approval will finally allow you to rest easy in the night times, but for real, this looks amazing.

 

[Jeremy P]

Can we get a JavaScript method to check the version of XenForo (like XF.ver or something)?

It is worth consideration, particularly for cases where different handling is strictly necessary, but in the example provided the 2.3 code should work just fine on 2.2 as well so I'm not sure there's a compelling reason to ship both.

 

[AndrewSimm]

That has already been stated.

After 2.3 is 3.0, which is all about the completely new style.

Any indication if 3.0 will require complete mod rewrites or changes to make work with 3.0?

 

[btmgreg]

@Chris D Heads up. DeemIT is a nice shade of blue/dark purple + pink. Now time for a McFlurry..


Also. Great job

 

[cyberstalker292]

I'm hoping for Zapier..... will it be 2.3 or 3.0?

Need webhooks to tie registration (and group memberships) to shopping carts and other systems.

 

[Paul B]

Any indication if 3.0 will require complete mod rewrites or changes to make work with 3.0?

It's mentioned here and in several other threads: https://xenforo.com/community/threads/a-first-look-at-xenforo-2-3.216641/

When it became clear that the new design would introduce unresolvable backward-compatibility issues, the decision was made to back out the new design and reserve it for a version of XenForo we will call 3.0. Instead, we decided to ship the new functionality that we have built for 2.3 without the new design, so that existing users can gain access to all the new features without worrying about a major maintenance job to get it integrated.

XF 2 styles will not work in XF 3.

 

[digitalpoint]

It is worth consideration, particularly for cases where different handling is strictly necessary, but in the example provided the 2.3 code should work just fine on 2.2 as well so I'm not sure there's a compelling reason to ship both.

Ya, I was more talking about other code I’ve been refactoring for 2.3. Things like AJAX and event listeners.

That wasn’t meant as an example, rather that I just miss $.css()

 

[Chris D]

Can we get a JavaScript method to check the version of XenForo (like XF.ver or something)? I can foresee addons trying to support multiple versions of XenForo and it getting ugly by doing random checks like if XF.on() exists or not.

Starting to code for a jQuery-less world, and can already see where a version check mechanism would allow something to support 2.2 and 2.3 (at least for a little bit).

updateHeatMap(data)
{
    // XF 2.2
    $('.timeBlock').css('opacity', 0);
    $.each(data.points, function(index, value) {
        $.each(value, function(i, v) {
            $('#h' + index + 'D' + i).css("opacity",v / data.max);
        });
    });

    // XF 2.3?
    /*
    document.querySelectorAll('.timeBlock').forEach(el => {
        el.style.opacity = 0;
    });
    data.points.forEach((value, index) => {
        value.forEach((v, i) => {
            document.getElementById('h' + index + 'D' + i).style.opacity = (v / data.max).toString();
        });
    });
    */
}

I already miss $.css().

Honestly? Just don’t try to write the same code for two different versions. We stop supporting 2.2 when 2.3 is released. We expect add-on developers to do the same.

We’re extremely unlikely to do anything that helps developers support unsupported software.

 

[TickTackk]

{{ link ('direct-messages', $conversation) }}

Are conversations being rebranded?

 

[digitalpoint]

Honestly? Just don’t try to write the same code for two different versions. We stop supporting 2.2 when 2.3 is released. We expect add-on developers to do the same.

We’re extremely unlikely to do anything that helps developers support unsupported software.

Not always quite that simple. In fact, I have JavaScript “classes” that do AJAX one way we are in XenForo and another way if we are in WordPress (the underlying code is shared on different platforms even, so supporting different versions of XF will be a thing for a bit anyway).

I’m too lazy to have code for different versions of even platforms. Lol. WordPress and XenForo code in one.

https://iolabs.io/js/dp/cf/chart.js