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 eine sofortige Zurück- und Vorwärtsnavigation ermöglicht. Dadurch wird das Surfen für Nutzer erheblich verbessert, insbesondere bei Websites, auf denen viel hin- und hernavigiert wird.
web.dev-Artikel zu bfcache

Yahoo! JAPAN News, eine der beliebtesten Nachrichtenplattformen in Japan, hat gezielt Maßnahmen zur Verbesserung der bfcache-Trefferquote ergriffen. Das führte zu erheblichen Verbesserungen bei der Nutzerfreundlichkeit und den Geschäftsergebnissen. Die Ergebnisse des durchgeführten A/B-Tests zeigten, dass auf Seiten mit bfcache der Werbeeinnahmen um 9 % gestiegen sind.

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

Blockierungen für bfcache entfernen

bfcache ist seit Chrome 86 verfügbar und auch in allen modernen Browsern verfügbar. Um bfcache optimal zu nutzen, müssen jedoch potenzielle Blockaden auf Ihrer Website beseitigt werden. Einige wichtige Probleme, die Yahoo! JAPAN News hatte folgende Probleme:

Verwendung von unload-Handlern
Verwendung der no-store-Anweisung für Cache-control-Header

Welche Hauptblocker für Ihre Website vorhanden sind, können Sie unter Chrome-Entwicklertools > Anwendungen > Rück-/Vorwärts-Cache (weitere Informationen) oder mit der notRestoredReasons API prüfen. Letztere bietet eine umfassendere Übersicht über Blockierungen basierend auf der tatsächlichen Nutzung vor Ort.

So funktioniert es bei Yahoo! JAPAN News hat seine Blockierungen aufgehoben:

Unload-Handler:Verwenden Sie das pagehide-Ereignis anstelle des unload-Ereignisses, da das unload-Ereignis sehr unzuverlässig ist. Außerdem wurde permission-policy: unload in Chrome 115 eingeführt, damit Websites unload-Handler für bestimmte Ursprünge zuverlässig entfernen können. Außerdem werden unload-Handler nach und nach eingestellt.
Cache-control: no-store (kurz CCNS): Wenn Sie den Cache-control-Header von no-store in no-cache ändern, kann der bfcache aktiviert werden. Außerdem wird in Chrome unter bestimmten Umständen auch mit einer no-store-Header-Zeile für bfcache-Caching gesorgt.

CCNS ist für Seiten gedacht, die unter keinen Umständen im Cache gespeichert werden sollten. Allerdings können Seiten mit CCNS nicht von Caching-Technologien profitieren, einschließlich CDN-Edge-Servern und lokalen Caches.

Wenn Sie einen CCNS-Header haben, ist dies eine gute Gelegenheit, um zu besprechen, welche Cache-control-Strategien für Ihre Website am besten geeignet sind. Hier sind die Hauptunterschiede zwischen no-store und no-cache:

`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. Diese sollte für private Antworten verwendet werden.	Die Antwort darf in Caches gespeichert werden, solange sie vor jeder Verwendung noch einmal mit dem Server validiert wird. Das sollten öffentliche Antworten sein, die Sie jedes Mal neu validieren möchten, z. B. die Startseite einer Nachrichtenwebsite. Auch dann kann eine sehr kurze Caching-Zeit die Leistung verbessern und die Hauptserver entlasten.

Weitere Informationen zu den Optionen für Cache-control findest du in diesem Flussdiagramm.

Auswirkungen von bfcache in Zahlen

Um die Auswirkungen von bfcache zu messen, hat Yahoo! JAPAN News führte einen zweiwöchigen A/B-Test durch, bei dem einer Gruppe eine Version der Seiten mit den BFCache-Fehlerkorrekturen und einer anderen Gruppe eine Version mit Seiten ausgeliefert wurde, die nicht für den BFCache infrage kamen. Das Team wählte die URL-Pfade mit einer großen Anzahl an Zugriffen aus, damit der Test aussagekräftige Ergebnisse erzielen konnte. Es gab keine anderen visuellen oder funktionalen Unterschiede zwischen den beiden Versionen.

Hier ist ein Video, in dem die Website mit und ohne bfcache verglichen wird. Sie sehen, dass die Website mit aktiviertem bfcache beim Zurück- oder Vorwärtsnavigieren deutlich schneller geladen wird.

Vielversprechend ist, dass die Gruppe mit aktiviertem bfcache einen erheblichen Anstieg der Seitenaufrufe und Werbeeinnahmen verzeichnen konnte, insbesondere auf Mobilgeräten.

Hier finden Sie Details zu den von Yahoo! beobachteten Auswirkungen. JAPAN News mit dem A/B-Test für bfcache Weitere Informationen finden Sie in der Fallstudie.

Messwerte	Steigerung % (Mobilgeräte)	Steigerung % (Desktop)
bfcache-Trefferquote	+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 die Navigation zwischen Seiten mit bfcache sofort erfolgt, bleiben Nutzer tendenziell länger auf den Seiten, was zu mehr Anzeigenaufrufen und damit zu höheren Werbeeinnahmen führt.

bfcache verbessert die Nutzerfreundlichkeit auf der Website

Wenn Seiten sofort geladen werden, ist die Navigation flüssiger.

In Yahoo! JAPAN News: Eine der wichtigsten User Journeys sieht so aus:

Artikelliste aufrufen
Klicken Sie auf einen Artikel, um ihn zu lesen.
Zurück zur Artikelliste
Auf einen anderen Artikel klicken, um ihn zu lesen

Vor bfcache mussten Nutzer, die einen Artikel fertig gelesen hatten (Schritt 2), warten, bis die Seite mit der Artikelliste wieder geladen wurde. Dies könnte ein Reibungsfaktor für Nutzer sein, die einfach zur Artikelliste zurückkehren möchten, um einen anderen Artikel zum Lesen auszuwählen.

Ein weiteres Problem bei der rückwärtigen Navigation war die Scrollposition. In der Praxis versucht der Browser, die Scrollposition wiederherzustellen, wenn eine Rückwärtsnavigation erfolgt. Aufgrund dynamisch hinzugefügter Anzeigen oder anderer Layoutänderungen wird die Scrollposition jedoch häufig falsch wiederhergestellt, was dazu führen kann, dass Nutzer den Überblick verlieren oder die Seite sogar verlassen. Dies stellt nie ein Problem dar, wenn eine Rückwärtsnavigation durch bfcache unterstützt wird: Die Scrollposition wird sofort und korrekt wiederhergestellt.

Zwei Filmstreifen einer Rückwärtsnavigation von einem Artikel zur Artikelliste. Oben sehen Sie einen Filmstreifen des Prozesses, der mit bfcache verarbeitet wird (0,3 Sekunden), unten denselben Prozess ohne bfcache (3,3 Sekunden).

Mit bfcache ist die Reibung im User Journey nicht mehr vorhanden: Nutzer können sofort zur Artikellistenseite zurückkehren und einen anderen Artikel auswählen, ohne warten zu müssen, bis die Artikellistenseite geladen ist.

Das Gleiche gilt, wenn Nutzer direkt von einem Artikel zum nächsten und zurück wechseln:

Ein animiertes Bild, das den Rückwärtsfluss von einem Artikel zur Artikeleintragsseite mit und ohne bfcache zeigt. Mit bfcache erfolgt die Rückwärtsnavigation nicht nur schneller, sondern die Scrollposition wird korrekt beibehalten. Ohne bfcache können diese Zusicherungen nicht gegeben werden.

Vorteile der Verwendung des bfcache für Yahoo! JAPAN News umfasst:

Mehr Seitenaufrufe: Nutzer waren eher bereit, sich auf der Website umzusehen, wenn Seiten mit bfcache im Cache gespeichert wurden.
Mehr Umsatz: Aufgrund der höheren Seitenaufrufe pro Sitzung stiegen die Anzeigenimpressionen. Das führte zu einem Umsatzanstieg von 9 % auf Mobilgeräten im Vergleich zur Testgruppe ohne bfcache.

Fazit

Kurz gesagt: Mit bfcache wird Ihre Website nicht nur sofort angezeigt, sondern Sie können auch die Nutzerfreundlichkeit insgesamt verbessern und die Interaktionen auf Ihrer Website steigern.

Das Chrome-Team prüft kontinuierlich Blockierungen des bfcache, insbesondere die beiden in diesem Artikel aufgeführten Gründe, da sie häufige Gründe dafür sind, dass der bfcache nicht verwendet wird. In Zukunft kann die Verwendung des bfcaches dadurch möglicherweise nicht verhindert werden, aber es ist nicht nötig, bis dahin zu warten. Sie können von bfcache profitieren, indem Sie sich Ihre bfcache-Blocker ansehen und diese allgemeinen und andere weniger verbreitete Muster vermeiden.