Throughout our history of working with community platforms, our top priority has always been the user experience and what naturally comes with that is a large emphasis on performance and the measures it takes to optimize it. For a recent project, we wanted to create the best possible forum experience for XenForo. (You can read why and how here.)
To accomplish that; we built a rich, modern experience that is simple and engaging called ACE for XenForo. Simply put, it is a heavily customized theme that deviates from the standard XenForo framework to offer the best experience and includes one of our products, Feeds for better content discovery and filtering. While the process of course included enhancements that can be seen on the frontend, there are also many backend and server improvements that made this progress possible. Below we’ll share our goal for optimization and speed improvements, what we did, and the outcome.
Our goal for ACE for XenForo was to create a system that is easy for users to understand, makes content discoverability simple, and performs quickly and consistently when a user is navigating throughout the site. It’s important for a community platform to be as performant as possible because even small lag can frustrate a user and cause them to leave. In order to keep them engaged, we need to take a mobile first approach with the growing number of mobile users and have the site load fast. More importantly, Google cares heavily about the performance, usability, and quality of all sites they index high up in the list, and so no detail can go unnoticed to ensure the best results.
What we did
Within the context of server configuration, we started by creating what we believe is the optimal user experience, then worked tirelessly to troubleshoot and improve performance. Here are the improvements we made:
Evaluated every query constellation, restructured queries, and added index hints
We analyzed every single query constellation by taking a look at the query execution plan output provided by the query compiler and making sure that each one is performing as quickly as possible while also determining and correcting any weak points. As MySQL can’t always find the optimal execution plan on its own, we restructured queries and added index hints to make sure that queries take the most efficient processing path within the server and complete quickly so that there is no lag for the user. After completing these improvements, we found that many of these queries actually outperform default XenForo queries fetching similar content.
Community app performance improvements
We use ACE as the core part of our community app and although we made many performance improvements within the Feeds system on web, we made additional optimizations specific to the app, such as:
- Loading the Hot feed before the user views that feed in order to ensure the content loads quickly when the user first attempts to view it.
- We applied React.memo, the save component in memory, on frequently rendered components such as the Feeds parent component. When new data is loaded and/or the user interacts with the app, React re-renders the component tree where a given action occurs. By applying React.memo, we store some of the “branches” or components on memory so that React doesn’t need to process it again if the given changes don’t affect these particular branches, making this rendering process faster.
Implemented Ajax loading
We implemented Ajax loading where we could so that when a page is loaded the entire page doesn’t need to be re-rendered, only the pieces of the page that changed, which integrates some of the benefits of a single page application.
We also enabled guest caching to allow for a faster experience for non-logged in users.
Display embedded images only to logged in users
We made it so that embedded images only load for logged in users so that the site isn’t required to serve that data to users not logged in. Registered users are more willing to wait for a page to load than guests, so we created an environment where guests have the fastest experience and logged in users have the most content rich experience.
Made improvements to WebP image conversion
We routed WebP image conversion to a Cloudflare server that outputs images as WebP which are smaller than the original file format.
Minimized page output
To improve load times, we minimized the page output for HTML, CSS, and JS files.
Implemented the Font Awesome Manager add-on
The implementation of Font Awesome Manager by Kirby allows you to only load in the icon files being used on the platform which drastically reduces the file sizes. The idea of serving just the amount of icons and CSS needed is a huge improvement and will save hundreds of kB in bandwidth per user.
Added the s9e Media Sites add-on
Implementation of the s9e Media Sites add-on by JoshyPHP creates a curated list of the most highly requested media sites for easy user access and improves the efficiency of default media sites so that your page will load quickly regardless of whether it contains media content.
These improvements and optimizations have all led to a user experience that is performant and eases content discoverability. Even though these practices we explained above were in reference to one of our products, they are still good methods to consider and apply to your own community. Our desire to learn and challenge ourselves has led to this unique product and experience and we work to improve communities not only with this experience, but any experiences we create in the future as we learn and grow to solve more complex problems.
Creative Director & Editor-in-Chief for Audentio. Minimalist at heart and a sucker for stories—whether told, written, created in art, or played in a video game.