Introduction
At SundaySocial.tv, users were experiencing long page load times, with each new page taking several seconds. This sluggish performance made it difficult for members to access products and resources quickly, hindering their overall experience. To tackle this challenge, we set out on a mission to enhance the site’s speed without compromising functionality and developed a creative static cache solution that radically improved load times.
Identifying the Bottlenecks
Performance Issues
The main performance issue users faced was long page loads, averaging between 1.5 to 3 seconds. This affected every interaction on the site, from viewing archive pages to accessing single product pages. The cumbersome navigation experience not only frustrated users but also created friction for those looking to upgrade their accounts or purchase additional items.
Assessment Process
To identify the root cause of these delays, we conducted a thorough assessment. We began by utilizing Chrome DevTools, specifically the Network tab, to monitor load times and pinpoint the slow-loading elements. Additionally, we employed New Relic to gain deeper insights into the server-side performance and identify components that contributed most to the load delays.
Our analysis highlighted several optimization opportunities, but one clear bottleneck emerged: WPML, the multilingual plugin. While WPML is an excellent tool for handling multiple languages, it significantly increases resource usage and added approximately a second to each page load. Replacing WPML with a custom solution was an option, but it would require extensive rewriting of the multilingual functionality. Instead, we opted to enhance performance through an effective member facing caching strategy.
Choosing the Right Caching Solution
Considering Alternatives
When considering caching options for a logged-in users, the first place to look should be an Object Cache. While many caching solutions focus on creating static HTML pages to improve performance, there are a lot of hoops you need to jump through to support the dynamic content required for a logged-in user experience. Instead of caching the HTML output for a page, Object Cache stores database requests in the server memory, making it much faster and efficient to access at a later point.
A few years back, we moved SundaySocial to Nexcess. We’ve performed a load tests on a number of different WordPress managed hosting platforms, and Nexcess consistently outperforms the others due to the number of PHP workers employed and the support it has for Object Cache out of the box. If you’d like to learn more about these features, drop a comment below and I can do a separate article on that.
Since SundaySocial was already leveraging a good host and Object Caching, we needed to investigate static cache options that would work well with a membership site.
Selecting WP Rocket
We evaluated several different static cache solutions and ultimately chose WP Rocket for several reasons:
- User-Friendly Interface: WP Rocket is renowned for its simple and intuitive interface, making it easy for the client to manage.
- Comprehensive Features: It provides robust out-of-the-box caching for both logged-in and logged-out users, crucial for our membership site needs.
- Ease of Integration: WP Rocket’s logical and straightforward integration process allowed us to customize its functionality without delving into overly complex code.
Overcoming Integration Challenges
Logged-In User Cache
WP Rocket’s default logged-in user cache created individual caches for each user, which was not suitable for our needs. We required a global cache that could serve all logged-in users uniformly. To achieve this, we leveraged a WP Rocket add-on that allowed for a single cache instance for all logged-in users. This setup ensured that cached content was served efficiently without the overhead of generating unique caches for each user.
Using Capability Cookies for UI Elements
While some content blocks required an asynchronous / AJAX request to build the user specific UI, a number of simpler elements were handled with capability cookies to speed up the load process. For this site, one example is that the menu items change depending on the level of access that the user has. Instead of making an AJAX request to get the correct menu every time the page loads, we are storing the member’s access level in a cookie. Elements that need a capability check (like menu items) are given a special CSS class that hides them when the page loads. We then use Javascript to check the capability cookies and remove any elements that the user does not have access to. Once done, the remaining elements are shown.
Handling User-Specific Content with HTMX
To manage user-specific content dynamically, we utilized HTMX, a powerful library that simplifies converting existing templates into asynchronous requests. This approach enabled us to section off user-specific components and handle them separately from the main cached content.
For Sunday Social, this meant that we could:
- Target Individual Product Pages: Determine if a user had access to specific products through memberships or purchases.
- Load Relevant Content Asynchronously: Based on the user’s access level, we loaded the appropriate download buttons, media assets, or upgrade options after the initial page load.
By offloading user-specific functionality to asynchronous AJAX requests, we maintained a streamlined global cache while ensuring personalized content was delivered seamlessly.
Implementing HTMX for Asynchronous Requests
HTMX Implementation
HTMX allowed us to efficiently manage the asynchronous loading of user-specific content. Here’s how we implemented it:
- Identifying Components: We identified key components that required user-specific data, such as download buttons and product access indicators.
- Converting to Asynchronous Requests: Using HTMX, we converted these components into asynchronous requests. This meant that after the main page load, additional requests fetched and displayed the necessary user-specific information.
- Optimizing Delivery: By asynchronously loading these elements, we reduced the initial page load time significantly, as the bulk of the content could be cached globally and served via the static cache.
Benefits of HTMX
The use of HTMX brought several benefits:
- Reduced Load Times: With the main content cached, the initial load time was drastically reduced, improving the overall user experience.
- Dynamic Personalization: Users still received personalized content without the need for complex, resource-intensive processes.
- Scalability: The solution was scalable, allowing us to easily manage content delivery for a growing user base without compromising performance.
Measuring the Impact
Performance Metrics
To gauge the effectiveness of our caching solution, we employed several tools and metrics:
- PageSpeed Insights: Provided detailed reports on page load times and highlighted areas of improvement.
- Google Chrome Console: Used for real-time monitoring and analysis of network requests and load times.
Results
The impact of our caching solution was immediately noticeable. Page load speeds were halved or better, with times dropping from an average of 2.5-3 seconds to as low as 0.7-0.8 seconds. This substantial improvement not only enhanced the user experience but also contributed to smoother navigation and quicker access to resources.
Client Feedback and Additional Benefits
The new member facing cache has provided huge improvements to the platform including:
- Enhanced User Experience: Customers could navigate the site and access assets much faster, reducing frustration and improving satisfaction.
- Uninterrupted Functionality: Despite the extensive changes, there was no negative impact on revenue or site functionality. Users could still upgrade accounts and purchase items seamlessly.
- Positive User Feedback: Customers reported a much smoother experience, which likely contributed to increased engagement and higher conversion rates.
“Speed has always been an issue on our site, because we have a ton of active users downloading hi-res graphics from our site every day. Caching for that scenario has been difficult, because we also have multiple access tiers and tons of custom, dynamically generated content. I assumed the solution was to move to more expensive hosting, but Tanner came up with a brilliant solution. Customers immediately noticed the change in our site speed. And I no longer have to worry about breaking the site when I do a big marketing push.”
Jonathan Malm, SundaySocial.tv
Conclusion
By implementing a robust caching solution with WP Rocket and optimizing user-specific content delivery using HTMX, we significantly enhanced the performance of SundaySocial.tv. The project not only improved load times but also maintained the critical multilingual functionality provided by WPML. This case study demonstrates how thoughtful optimization and strategic use of tools can deliver exceptional results, providing a smoother, faster, and more enjoyable user experience.
Could your site benefit from improved speed?
