Wie der Back-Forward-Cache Yahoo! JAPAN News steigert den Umsatz auf Mobilgeräten um 9 %

Yuriko Hirota

Der Back-Forward-Cache (oder bfcache) ist eine Browseroptimierung, die ein sofortiges Vor- und Zurückspringen ermöglicht. Die Funktion erleichtert Nutzern das Surfen im Web erheblich, insbesondere bei Websites, die häufig hin- und hernavigiert sind.
web.dev-Artikel im bfcache

Yahoo! JAPAN News, eine der beliebtesten Nachrichtenplattformen in Japan, hat gemeinsam die BFCache-Trefferrate verbessert und die Nutzerfreundlichkeit sowie das Unternehmen deutlich verbessert. Die Ergebnisse des A/B-Tests ergaben insbesondere, dass auf Seiten, auf denen bfcache verwendet wird, der Werbeumsatz um 9% gestiegen ist.

In dieser Fallstudie wird erläutert, wie Yahoo! JAPAN News hat die Blockierungen für den bfcache beseitigt und die Nutzung von bfcache drastisch verbessert.

Blockierungen für bfcache entfernen

bfcache ist seit Chrome 86 verfügbar und auch in allen modernen Browsern verfügbar. Um jedoch den bfcache optimal zu nutzen, müssen potenzielle Blocker auf der eigenen Website entfernt werden. Einige wichtige Hindernisse, die Yahoo! Nachrichten, mit denen JAPAN konfrontiert wurde:

unload-Handler verwenden
Verwendung der Anweisung no-store in Cache-control-Headern

Welche Hauptblocker Ihre Website möglicherweise hat, sehen Sie unter Chrome-Entwicklertools > Anwendungen > Back-Forward-Cache (weitere Informationen) oder indem Sie die notRestoredReasons API verwenden, um basierend auf der tatsächlichen Nutzung einen umfassenderen Überblick über die Blockierungen zu erhalten.

So funktioniert Yahoo! JAPAN News hat seine Blockierungen aufgehoben:

Unload-Handler:Verwenden Sie das Ereignis pagehide anstelle des Ereignisses unload, da das Ereignis unload sehr unzuverlässig ist. Außerdem wurde permission-policy: unload in Chrome 115 eingeführt, damit die Websites unload-Handler für bestimmte Ursprünge zuverlässig entfernen können. Außerdem ist geplant, unload-Handler schrittweise einzustellen.
Cache-control: no-store (oder kurz CCNS): Wenn Sie den Cache-control-Header von no-store in no-cache ändern, kann der bfcache aktiviert werden. Chrome plant außerdem, unter bestimmten Umständen mit dem Caching für bfcache zu beginnen, selbst wenn ein no-store-Header vorhanden ist.

CCNS ist für Seiten vorgesehen, die unter keinen Umständen im Cache gespeichert werden sollten. Allerdings kann jede Seite mit CCNS nicht von einer Caching-Technologie profitieren. Dies gilt auch für CDN-Edge-Server und lokale Caches.

Wenn Sie einen CCNS-Header haben, ist dies eine gute Gelegenheit, um die richtigen Cache-control-Strategien für Ihre Website zu besprechen. Im Folgenden sind die Hauptunterschiede zwischen no-store und no-cache aufgeführt.

`Cache-control: no-store`	`Cache-control: no-cache`
Die Antwort darf nicht in Caches gespeichert werden. Folglich wird die Antwort bei jeder Anfrage vollständig abgerufen. Sollte für private Antworten verwendet werden.	Die Antwort kann in Caches gespeichert werden, sofern sie vor jeder Verwendung neu mit dem Server validiert wird. Dies sollten öffentliche Antworten sein, die jedes Mal neu validiert werden sollen (z. B. die Startseite einer Nachrichtenwebsite – auch wenn ein sehr kurzer Caching-Zeitraum die Leistung verbessern und die Hauptserver entlasten kann).

Wenn Sie mehr über die Optionen für Cache-control erfahren möchten, hilft Ihnen dieses Flussdiagramm.

Auswirkungen von bfcache in Zahlen

Um den Einfluss von bfcache zu messen, verwendet Yahoo! JAPAN News führte einen zweiwöchigen A/B-Test durch, bei dem eine Version der Seiten mit den bfcache-Fehlern für eine Gruppe bereitgestellt wurde und einer anderen eine Version mit Seiten, die nicht für den bfcache infrage kommen. Dabei wurden URL-Pfade mit einer großen Anzahl von Zugriffen ausgewählt, damit beim Test aussagekräftige Ergebnisse erzielt werden können. Es gab keine anderen visuellen oder funktionellen Unterschiede zwischen den beiden Versionen.

In diesem Video wird die Website mit bfcache und ohne bfcache verglichen. Wie Sie sehen, wird die Website mit aktiviertem bfcache beim Zurück- oder Vorwärtsnavigation wesentlich schneller geladen.

Was vielversprechend ist, ist, dass die Gruppe mit aktiviertem bfcache erhebliche Steigerung der Seitenaufrufe und Werbeeinnahmen verzeichnete, insbesondere auf Mobilgeräten.

Im Folgenden finden Sie Details zu den von Yahoo! JAPAN News mit dem bfcache-A/B-Test. Weitere Informationen finden Sie im Artikel zu Fallstudien.

Messwerte	Steigerung in % (Mobilgeräte)	Steigerung in % (Computer)
bfcache-Trefferrate	+54,03 Punkte (0,04% → 54,07%)	+47,28 Punkte (0,02% → 47,30%)
Seitenaufrufe	+2,26%	+0,65%
Umsatz aus Anzeigen	+9,0%	+0,6%

Wenn Nutzer mit dem Back-Forward-Cache sofort zwischen Seiten wechseln, bleiben sie in der Regel länger auf der Seite. Das wiederum führt zu mehr Anzeigenaufrufen und damit auch zu höheren Werbeeinnahmen.

bfcache verbessert die nahtlose User Experience auf der Website

Wenn Seiten sofort geladen werden, fühlt sich die Navigation nahtloser an.

In Yahoo! Für JAPAN News sieht eine der wichtigsten User Journeys so aus:

Zur Artikelliste
Klicken Sie auf einen Artikel, um ihn zu lesen.
Zurück zur Artikelliste
Klicken Sie zum Lesen auf einen anderen Artikel.

Vor dem bfcache mussten Nutzer warten, bis die Seite mit der Artikelliste wieder geladen wurde, nachdem sie einen Artikel gelesen hatten (Schritt 2). Dies kann ein Problem für Nutzer sein, die einfach zur Artikelliste zurückkehren möchten, um einen anderen Artikel zu lesen.

Eine weitere Ursache für Probleme bei der Rückwärtsnavigation war die Scrollposition. In der Praxis versucht der Browser, die Scrollposition wiederherzustellen, wenn eine Rückwärtsnavigation stattfindet. Durch dynamisch hinzugefügte Anzeigen oder andere Layoutänderungen wird die Scrollposition häufig fälschlicherweise wiederhergestellt. Das kann dazu führen, dass Nutzer die Orientierung verlieren oder sogar die Seite verlassen. Dies stellt kein Problem dar, wenn eine Rückwärtsnavigation vom bfcache unterstützt wird: Die Scrollposition wird sofort und korrekt wiederhergestellt.

Zwei Filmstreifen mit einer Rückwärtsnavigation von einem Artikel zur Seite mit der Artikelliste. Oben sehen Sie einen Filmstreifen des Prozesses, der mit bfcache verarbeitet wird, der 0,3 Sekunden dauert, während der untere Abschnitt denselben Prozess darstellt, der ohne bfcache verarbeitet wird, was 3,3 Sekunden dauert.

Mit bfcache ist die User Journey jetzt völlig reibungslos verlaufen. Nutzer können sofort zur Seite mit der Artikelliste zurückkehren und einen anderen Artikel zum Lesen auswählen, ohne warten zu müssen, bis die Seite mit der Artikelliste geladen ist.

Das Gleiche passiert, wenn Nutzende von einem Artikel direkt zum nächsten und zurück blättern:

Ein animiertes Bild, das den Rückwärtsnavigationsfluss von einem Artikel zur Seite mit der Artikelliste mit und ohne bfcache zeigt. Mit bfcache wird nicht nur die Rückwärtsnavigation schneller, sondern auch die Scrollposition bleibt erhalten. Ohne bfcache können diese Garantien nicht gegeben werden.

Kurz gesagt: Die Vorteile der Verwendung von bfcache für Yahoo! JAPAN News umfasst:

Mehr Seitenaufrufe: Nutzer verwendeten eine Website mit höherer Wahrscheinlichkeit, wenn Seiten mit dem bfcache-Cache gespeichert wurden.
Mehr Umsatz: Infolge der erhöhten Seitenaufrufe pro Sitzung stieg die Anzahl der Anzeigenimpressionen an, was im Vergleich zur Testgruppe ohne bfcache zu einem Umsatzanstieg von 9% auf Mobilgeräten führte.

Fazit

Kurz gesagt, sorgt bfcache nicht nur dafür, dass Ihre Website sofort ist, sondern kann auch die Nutzererfahrung insgesamt verringern und die Interaktion mit Ihrer Website erhöhen.

Das Chrome-Team prüft ständig bfcache-Blocker, insbesondere die zwei in diesem Artikel aufgeführten Gründe, da sie häufige Gründe sind, warum bfcache nicht verwendet wird. In Zukunft wird dadurch die bfcache-Nutzung möglicherweise nicht verhindert, aber Sie müssen bis dahin nicht warten. Sie können vom bfcache profitieren, indem Sie sich Ihre bfcache-Blocker ansehen und diese oder andere weniger gängige Muster vermeiden.