So hat Ray-Ban die Conversion-Rate verdoppelt und die Ausstiegsrate um 13% gesenkt, indem es mithilfe der Speculation Rules API die Seitenvorschau aktiviert hat

Daniele Merola

Giorgio Pellegrino

Hadyan Andika

Veröffentlicht: 28. Januar 2025

In dieser Fallstudie wird beschrieben, wie Ray-Ban seine LCP-Messwerte verbessert hat, indem es mithilfe der Speculation Rules API die zukünftige Navigation der Nutzer durch Prerendering beschleunigt hat. Außerdem wird erläutert, wie sich dadurch die Geschäftsleistung der E-Commerce-Plattform von Ray-Ban verbessert hat. Aufgrund des Erfolgs dieser Maßnahme entschied sich Ray-Ban, andere Optionen zur Leistungssteigerung zu prüfen, z. B. die Einstufung von Seiten für den bfcache.

Ray-Ban ist eine Kultmarke für Sonnenbrillen, die für ihre zeitlosen Stile wie Aviator und Wayfarer bekannt ist und klassische Designs mit modernen Trends verbindet. Als einer der führenden Anbieter von Brillen spielt der E-Commerce-Kanal von Ray-Ban eine wichtige Rolle für die Wettbewerbsfähigkeit des Unternehmens. Er zieht jährlich über 80 Millionen einzelne Besucher an.

Als wichtigsten Geschäftskanal verbessert Ray-Ban kontinuierlich die Nutzerfreundlichkeit seiner E-Commerce-Plattform. Das Unternehmen ist sich der Bedeutung der Core Web Vitals und ihrer direkten Auswirkungen auf die Nutzerfreundlichkeit der Plattform bewusst.

Der kontinuierliche Ansatz von Ray-Ban zur Verbesserung der kritischen User Journey

Aufgrund der MPA-Architektur (Multi-Page Application), die auf der E-Commerce-Plattform von Ray-Ban verwendet wird, sendet der Browser jedes Mal, wenn ein Nutzer mit einem Link oder einer Schaltfläche interagiert, die eine neue Seite erfordert, eine Navigationsanfrage an den Server, der mit einer neuen HTML-Seite antwortet. Das stellt Ray-Ban vor die Herausforderung, die Nutzerfreundlichkeit für Nutzer zu gewährleisten – insbesondere auf der Produktdetailseite (Product Detail Page, PDP), die als einer der am häufigsten verwendeten Einstiegspunkte identifiziert wurde und ein wichtiger Teil des Conversion-Trichters ist.

Durch ein kürzlich abgeschlossenes Redesign konnte Ray-Ban die Core Web Vitals-Messwerte verbessern. Es gibt jedoch noch Verbesserungsmöglichkeiten, insbesondere wenn für eine interaktive Nutzererfahrung umfangreiche externe Bibliotheken erforderlich sind. Dies erhöht den Messwert „Largest Contentful Page“ (LCP) im Vergleich zu anderen Seiten.

Aus diesem Grund hat Ray-Ban das spekulative Laden implementiert, um den wichtigen Kaufprozess auf seiner Website zu verbessern. Die Verwendung von Spekulationsregeln ist eine der effektivsten Lösungen, um die wahrgenommene Seitenladegeschwindigkeit bei zukünftigen Navigationen zu verringern, da die Inhalte der Seiten, die der Nutzer als Nächstes aufrufen würde, vorab geladen und dann gerendert werden.

Gerätespezifische Pre-Rendering-Strategie von Ray-Ban

Ray-Ban hat zwei separate Pre-Rendering-Strategien eingeführt, um Unterschiede im Verhalten und in den Ressourcen zwischen Computern und Mobilgeräten zu berücksichtigen. Diese Strategien wurden entwickelt, um die Leistung zu maximieren, ohne die vorhandenen Funktionen der Website oder die Nutzerfreundlichkeit zu beeinträchtigen.

Auf dem Computer wird das Vorab-Rendering ausgeführt, indem Sie den Mauszeiger auf Produktkacheln auf der Produktseite bewegen, die Einstellung "moderate" für die Vorab-Rendering-Eagerness verwenden und als Auswahl eine identifizierende Klasse derselben Kacheln übergeben.

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);

Da das Ereignis hover auf Mobilgeräten nicht verfügbar ist, wird das Vorab-Rendering mit einer immediate-Eagerness-Einstellung für die ersten vier Kacheln ausgeführt, auf die am häufigsten geklickt wurde.

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);

Ergebnisse vorab rendern

Die beiden Pre-Rendering-Strategien hatten erhebliche Auswirkungen auf die Core Web Vitals-Messwerte für die Produktdetailseiten von Ray-Ban und auf die Trends für Geschäfts-KPIs.

Die Geschäftsmesswerte der Nutzer, die die vom Server bereitgestellte Produktdetailseite aufgerufen haben, wurden mit denen verglichen, die die vorab gerenderte Produktdetailseite aufgerufen haben. Nachdem Ray-Ban Daten aus dem Adobe-Tracking-Arbeitsbereich für Nutzer mit Browsern erfasst hatte, die die API unterstützen (z. B. Chrome), konnte das Unternehmen erhebliche Verbesserungen feststellen, die zeigen, dass Nutzer die Website jetzt flüssiger bedienen können. Für die anderen Browser, in denen das Vorab-Rendering nicht unterstützt wird, entschied sich Ray-Ban, die Ressourcen zum Zeitpunkt des hover-Ereignisses auf dem Computer und für die ersten vier Kacheln des PLP auf Mobilgeräten vorab zu laden.

Die Implementierung der Speculation Rules API für das Pre-Rendering war ein Wendepunkt für die E-Commerce-Plattform von Ray-Ban. Mit diesen innovativen Strategien konnte Ray-Ban die LCP sowohl auf dem Computer als auch auf Mobilgeräten um 43% verbessern und so die Nutzerfreundlichkeit deutlich erhöhen.

Diese Optimierung ermöglichte nicht nur ein nahezu sofortiges Laden der Seiten, sondern auch viele der Vorteile einer SPA-Architektur, während die aktuelle MPA-Architektur beibehalten wurde, insbesondere auf wichtigen Seiten wie der Produktdetailseite.

Aus geschäftlicher Sicht waren die Verbesserungen bahnbrechend, wie A/B-Tests bestätigten:

• Höhere Conversion-Raten:
  • Die mobilen Conversion-Raten auf Produktdetailseiten stiegen deutlich um 101,47%.
  • Die Conversion-Raten auf Computern stiegen sogar um 156,16%.
• Erhöhte Nutzerinteraktionen:
  • Die durchschnittliche Anzahl der Seitenaufrufe pro Sitzung stieg auf Mobilgeräten um 51,95% und auf Computern um 65,30%. Das deutet auf eine flüssigere Navigation und ein länger anhaltendes Nutzerinteresse hin. Hinweis: Vorab gerenderte Seiten, die nicht aktiviert wurden, wurden nicht als „angesehen“ gezählt.
• Reduzierte Ausstiegsraten:
  • Die Absprungraten (Anteil der Nutzer, die eine Seite verlassen, bezogen auf die Seitenaufrufe für diese Seite) sanken auf Mobilgeräten um 13,25 % und auf Computern um 13,18 %. Dies zeigt eine höhere Verweildauer in wichtigen Kaufmomenten.

Erweiterung für eine schnellere Nutzernavigation

Angesichts der hervorragenden Ergebnisse, die mit dem Pre-Rendering von Produktdetailseiten erzielt wurden, entschied sich Ray-Ban, das Potenzial der Speculation Rules API weiter zu maximieren, indem auch PLP-Links im Menü vorab gerendert wurden. So lässt sich die Ladegeschwindigkeit und damit der LCP sowohl von Katalog- als auch von Produktseiten erheblich verbessern.

Das Vorab-Rendering hilft zwar bei zukünftigen Navigationen, aber Ray-Ban beobachtet auch einen erheblichen Anteil an Hin- und Rückwechseln zwischen PLP und PDP. Da die Ergebnisse des Prerendering-Tests zeigen, dass eine optimierte Nutzernavigation direkt mit guten Geschäftsmesswerten korreliert, hat Ray-Ban auch den Back-Forward-Cache (bfcache) untersucht.

Der bfcache ist eine Browseroptimierung, die eine sofortige und vorwärtsgerichtete Navigation ermöglicht. Dazu wird ein Snapshot der infrage kommenden Seiten im Browserverlauf im Arbeitsspeicher gespeichert und ohne Netzwerkzugriff wiederhergestellt. Damit die PDP und PLP von Ray-Ban für den bfcache infrage kommen, wurden einige schnelle Änderungen vorgenommen:

• Deaktiviert das Ereignis unload und schränkt den Zugriff auf die Bluetooth- und Beschleunigungsmesser-APIs des Geräts mit einem Permissions-Policy-Headerwert von unload=(), bluetooth=(), andaccelerometer=() ein.
• Schließe RTC- und IndexedDB-Verbindungen beim Ereignis pagehide.
• Vermeiden Sie die unnötige Verwendung des Antwortheaders Cache-Control: no-store.

Durch die Aktivierung der Unterstützung für den Back-Forward-Cache auf PLPs, bei denen die Back-/Forward-Navigation bis zu 40 % des Traffics ausmachte, während die Trefferrate des Back-Forward-Caches 0 % betrug, konnte die LCP um fast 30 % und die CLS um 83 % verbessert werden.

Fazit

Diese Ergebnisse verdeutlichen das Potenzial des Pre-Renderings, die Leistung einer E-Commerce-Website erheblich zu verbessern. Durch das Vorab-Rendering von Seiten basierend auf dem Nutzerverhalten für zukünftige Navigationen konnte Ray-Ban nicht nur die Core Web Vitals verbessern, sondern auch das Nutzer-Engagement und den Umsatz steigern. Dieser Vorteil hat das Engagement von Ray-Ban gestärkt, nicht nur für zukünftige Navigationen, sondern auch für die Navigation per Back-Forward-Cache (bfcache) eine reibungslose Navigation zu ermöglichen.

In dieser Fallstudie wird gezeigt, wie mit modernen Web-Leistungstechniken die Lücke zwischen technischen Messwerten und geschäftlichen KPIs geschlossen werden kann, um einen neuen Maßstab für die Nutzererfahrung und den E-Commerce-Erfolg zu setzen.

Ein besonderer Dank geht an Lorenzo Bartomioli, Gilberto Cocchi, Alejandro Baeza Redondo, Barry Pollard und Jeremy Wagner für ihren Beitrag zu dieser Arbeit.