Published: January 28, 2025
This case study describes how Ray-Ban improved its LCP metrics by using the Speculation Rules API to speed up users' future navigations using prerendering, and how that improved Ray-Ban's ecommerce platform's business performance. The success of this, then encouraged Ray Ban to look at other options to similarly improve on performance such as making pages eligible for bfcache.
Ray-Ban is an iconic eyewear brand renowned for its timeless styles like the Aviator and Wayfarer, blending classic designs with modern trends. As one of the renowned leaders in eyewear, Ray-Ban's ecommerce channel plays a critical role in ensuring the company's competitiveness, attracting over 80 million unique visitors annually.
As its key business channel, Ray-Ban continues to improve the user experience of its ecommerce platform, and realizes the importance of Core Web Vitals and their direct impact on the user experience of the platform.
Ray-Ban's continuous approach to improve their critical user journey
Due to the nature of the MPA (Multi-Page Application) architecture used on Ray-Ban's ecommerce platform, every time a user interacts with a link or a button that requires a new page, the browser sends a navigation request to the server, which responds with a new HTML page. This poses a challenge for Ray-Ban to maintain a smooth browsing experience for users—especially on its Product Detail Page (PDP)—which has been identified as one of the most commonly used entry points and is a critical part of the conversion funnel.
Thanks to a recently completed redesign, Ray-Ban saw an improvement in their Core Web Vitals metrics. However, there's still room for improvement, especially in cases where the extensive use of external libraries are required to provide an interactive user experience, which increases the Largest Contentful Page (LCP) metric as compared to other pages.
For this reason, Ray-Ban chose to implement speculative loading to improve the critical user journey on its site. Using speculation rules can be one of the most effective solutions to reduce perceived page load speed for future navigations, as it preloads and then prerenders the content of pages the user would visit next.
Ray-Ban's device-specific prerendering strategy
Ray-Ban adopted two separate prerendering strategies to account for differences in behavior and resources between desktop and mobile devices. These strategies were designed to maximize performance without compromising the website's existing features or the user experience.
On desktop, prerendering is executed by hovering over product tiles in the Product Listing Page (PLP), using the "moderate"
eagerness setting, and passing as a selector an identifying class of the same tiles.
let scriptPrerender = document.createElement('script');
scriptPrerender.setAttribute('type', 'speculationrules');
scriptPrerender.innerHTML = `{
"prerender": [
{
"source": "document",
"where": {
"and": [
{
"selector_matches": "a.rb-plp-product-tile__container"
}
]
},
"eagerness": "moderate"
}
]
}`;
document.head.appendChild(scriptPrerender);
Since the hover
event is effectively not available on mobile devices, prerendering is executed using an immediate
eagerness setting on the first four tiles, which were found to be the most clicked.
let scriptPrerender = document.createElement('script');
scriptPrerender.setAttribute('type', 'speculationrules');
scriptPrerender.innerHTML = `{
"prerender": [
{
"source": "document",
"where": {
"and": [
{
"selector_matches": "a.rb-plp-product-tile__container:nth-child(-n+5)"
}
]
},
"eagerness": "immediate"
}
]
}`;
document.head.appendChild(scriptPrerender);
Prerendering results
The two prerendering strategies had a significant impact on Core Web Vitals metrics for Ray-Ban's PDP pages and trends for business KPIs.
Device | LCP | Conversion Rate change | Exit Rate change | Prerender rate | ||
---|---|---|---|---|---|---|
Before | After | Change | ||||
Mobile | 4.69s | 2.66s | 43.28% | +101.47% | -13.25% | 29% |
Desktop | 3.03s | 1.74s | 42.57% | +156.16% | -13.18% | 50% |
The business metrics of users browsing the PDP served from the server were compared with those browsing the prerendered PDP. After collecting data from the Adobe tracking workspace for users with browsers that support the API (like Chrome), Ray-Ban revealed significant improvements that demonstrate that users can navigate the site more smoothly. For the other browsers, where the prerender is not supported, Ray-Ban decided to prefetch the resources at the time of the hover
event on the desktop, and for the first four tiles of the PLP on mobile devices.
The implementation of the Speculation Rules API for prerendering has been a game-changer for Ray-Ban's ecommerce platform. By these innovative strategies, Ray-Ban achieved a 43% improvement in LCP on both desktop and mobile, significantly enhancing the user experience.
This optimization not only provided near-instant page loads, but it allowed many of the benefits of SPA-style architecture while maintaining the current MPA architecture, especially on critical pages like the PDP.
From a business perspective, the improvements have been transformative, as confirmed by A/B testing:
- Increased conversion rates:
- Mobile conversion rates on PDPs substantially increased by 101.47%.
- Desktop conversion rates experienced an even more impressive 156.16% boost.
- Enhanced user engagement:
- Average pages viewed per session increased by 51.95% on mobile and 65.30% on desktop, indicating smoother navigation and more sustained user interest. Note: we did not consider prerendered pages that were not activated as "viewed".
- Reduced exit rates:
- Exit rates (% of users dropping from a page over page views for that page) dropped by 13.25% on mobile and 13.18% on desktop, showcasing higher retention during critical shopping moments.
Expanding to deliver more instant user navigations
In light of the excellent results obtained from the prerendering of PDPs, Ray-Ban decided to further maximize the potential of the Speculation Rules API by prerendering PLP links in the menu as well. This approach makes it possible to significantly improve the loading speed—and thus the LCP—of both catalog and product page types.
While prerendering helps with future navigations, Ray-Ban also observes a significant portion of back and forth navigation between PLP and PDP. Since the prerendering experiment results make it evident that an optimized user navigation directly correlates with good business metrics, Ray-Ban also looked into back/forward cache (bfcache).
The bfcache is a browser optimization that provides instant back and forward navigations by keeping a snapshot of eligible pages in the browser history in memory, and restoring them without going through the network. To ensure that Ray-Ban's PDP and PLP are eligible for bfcache, several quick updates were made:
- Disable the
unload
event and restricts access to the device's Bluetooth and accelerometer APIs using aPermissions-Policy
header value ofunload=(), bluetooth=(), andaccelerometer=()
. - Close RTC and IndexedDB connections at the
pagehide
event. - Avoid unnecessary use of the
Cache-Control: no-store
response header.
Unlocking bfcache support on PLPs where back/forward navigation accounted for up to 40% of the traffic while bfcache hit rate was 0, resulted in almost 30% LCP improvement and 83% CLS improvement.
Metrics | 2024-10-13 > 2024-11-9 | 2024-11-24 > 2024-12-21 | Delta |
---|---|---|---|
LCP | 3725ms | 2674ms | -28.21% |
INP | 521ms | 395ms | -24.18% |
CLS | 0.46 | 0.08 | -82.61% |
Back/Forward Cache hit rate | 0.02% | 72.90% | +72.87pp |
Conclusion
These results illustrate the potential of prerendering to improve the performance of an ecommerce site significantly. By prerendering pages based on user behavior for future navigations, Ray-Ban not only improved Core Web Vitals, but also delivered better user engagement and increased sales. This benefit has strengthened Ray-Ban's commitment to deliver smooth navigation not only for future navigations, but for back/forward navigations provided by bfcache as well.
This case study highlights how using modern web performance techniques can bridge the gap between technical metrics and business KPIs, setting a new benchmark for user experience and ecommerce success.
Special thanks to Lorenzo Bartomioli, Gilberto Cocchi, Alejandro Baeza Redondo, Barry Pollard and Jeremy Wagner for their contribution to this work.