How Ray-Ban doubled conversion rate and reduced exit rate by 13% through prerendering using the Speculation Rules API

Daniele Merola
Daniele Merola
Giorgio Pellegrino
Giorgio Pellegrino
Hadyan Andika
Hadyan Andika

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%
Source: CrUX URL-level data for Aviator PDP pages.

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 a Permissions-Policy header value of unload=(), 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
Source: CrUX URL-level data for Women Sunglasses page.

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.