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!

 

[Chris D]

To Kirby

 

[Paul B]

Oh!

You've shaved your beard.
New hairdo aswell.

Nice.

 

[Hristo Avramov]

Does someone else have this accessibility checks with the default style and colors.

"Background and foreground colors do not have a sufficient contrast ratio."
"Links rely on color to be distinguishable."

 

[briansol]

yes, on a few things where i use grey'ed out text. my biggest one is the tap/touch area is too close to another one.

 

[Hristo Avramov]

yes, on a few things where i use grey'ed out text. my biggest one is the tap/touch area is too close to another one.

Did you correct it or you prefer to leave it as default?

 

[briansol]

I left it as that is the intent -- to be muted text / sort of hidden from the plain eye. E.G, my disclaimer or my 'may earn commission' verbiage.

 

[Anatoliy]

my biggest one is the tap/touch area is too close to another one

did you find any quick fix?
I'd like to remedy this one, too.

 

[briansol]

I added some line height to my similar threads area in extra less

/* improve mobile click area report */
a.p-footer-rssLink, a.node-extra-title { line-height: 1.1em; }

 

[Anatoliy]

I added some line height to my similar threads area in extra less

/* improve mobile click area report */
a.p-footer-rssLink, a.node-extra-title { line-height: 1.1em; }

Thanks!

 

[javakhir]

well. after upgrade to XF 2.3 page indexing works flawless! before upgrade indexed was 116.948
upgrade date 25th August now 1 months 154.732 indexed! 37.784 in 32 days.
Page speed mobile 99, desktop 100
defenitely makes progress!

 

[14569]

I think loading a new page does not need to reload the entire web page, but jump directly to the new page, like Discourse, Flarum and NodeBB, so that there is no need to reload all css and js.

 

[javakhir]

there is a trick to merge css in to one united, preload to preconnect, page loads even faster. not need to cut anything. only improve

 

[fionix]

there is a trick to merge css in to one united, preload to preconnect, page loads even faster. not need to cut anything. only improve

what is this magic trick ?

 

[javakhir]

I use it on my other 2 webs with different csm, one day I hope, it will be implemented on XF

 

[digitalpoint]

I know I'm late to 2.3, but I finally got around to rewriting some stuff for 2.3. No jQuery or FA font files is so good. About a quarter second full load/render time (this is even with Google Analytics running).

Okay... going back to the future.

 

[Anatoliy]

I know I'm late to 2.3, but I finally got around to rewriting some stuff for 2.3. No jQuery or FA font files is so good. About a quarter second full load/render time (this is even with Google Analytics running).

View attachment 323719

Okay... going back to the future.

Teach me, masta!
How to do that?

 

[Miri]

I know I'm late to 2.3, but I finally got around to rewriting some stuff for 2.3. No jQuery or FA font files is so good. About a quarter second full load/render time (this is even with Google Analytics running).

View attachment 323719

Okay... going back to the future.

I’d be curious to know whether the same score is also valid in the forum list view, especially because it’s an impressive result, particularly if you have Google Analytics active.

 

[digitalpoint]

I’d be curious to know whether the same score is also valid in the forum list view, especially because it’s an impressive result, particularly if you have Google Analytics active.

It does score 100 Performance on the main forum list too, but I should “asterisk” that because that’s with Guest Page Caching enabled via my Cloudflare plugin, so the entire page is built without a request even hitting my server. That’s also with Google Analytics enabled.

If I do it as a logged in user and with the artificially slow mobile connection (like you have a poor connection in a third world country) Google uses for its test, it’s 95. It scores 100 as a logged in user with the “desktop” connection.

 

[digitalpoint]

Teach me, masta!
How to do that?

You just build a time machine and click the button after you set the time you want to go to (I assume you are asking about going back to the future?).

If you are asking about the score, I did spend some time yesterday really min/maxing that page just to see what I could do. Converted the PNG and JPG images to varying sizes of AVIF images and serve those to browsers that can support them. The banner image at top used to be a CSS background, but I converted that to an <img /> (which was a lot more work than it should have been to get it to act like a background image) so it can start loading in before CSS is loaded, etc.

 

[Anatoliy]

Converted the PNG and JPG images to varying sizes of AVIF images and serve those to browsers that can support them.

did I miss that xf supports avif?
or it's a custom addon?