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

Yuriko Hirota
Yuriko Hirota

Der Back-Forward-Cache (oder bfcache) ist eine Browseroptimierung, die eine sofortige und vorwärtsgerichtete Navigation ermöglicht. Dadurch wird das Surfen für Nutzer erheblich verbessert, insbesondere für Websites, auf denen viel hin- und hergeklickt wird.

web.dev-Artikel zum bfcache

Yahoo! JAPAN News, eine der beliebtesten Nachrichtenplattformen in Japan, hat gezielt Maßnahmen zur Verbesserung der bfcache-Trefferquote ergriffen. Das hat zu erheblichen Verbesserungen bei der Nutzerfreundlichkeit und den Geschäftsergebnissen geführt. 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 jedoch optimal nutzen zu können, müssen potenzielle Blockierungen auf der Website entfernt werden. Einige wichtige Probleme, die Yahoo! JAPAN News hatte folgende Probleme:

  1. Verwendung von unload-Handlern
  2. Verwendung der no-store-Anweisung in Cache-control-Headern

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:

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. Im Folgenden sind die wichtigsten Unterschiede zwischen no-store und no-cache aufgeführt.

Cache-control: no-store Cache-control: no-cache
  • Die Antwort darf nicht in Caches gespeichert werden.
  • Daher 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.
  • Es 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. Er wählte die URL-Pfade mit einem hohen Traffic-Aufkommen aus, damit der Test aussagekräftige Ergebnisse liefern konnte. Es gab keine anderen visuellen oder funktionalen Unterschiede zwischen den beiden Versionen.

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

Besonders vielversprechend ist, dass die Gruppe mit aktiviertem bfcache eine deutliche Steigerung der Seitenaufrufe und des Werbeumsatzes verzeichnete, 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:

  1. Artikelliste aufrufen
  2. Klicken Sie auf einen Artikel, um ihn zu lesen.
  3. Zurück zur Artikelliste
  4. 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. Das könnte für Nutzer ärgerlich sein, die einfach nur zur Artikelliste zurückkehren und einen anderen Artikel auswählen möchten.

Ein weiteres Problem bei der rückwärts gerichteten Navigation war die Scrollposition. In der Praxis versucht der Browser, die Scrollposition wiederherzustellen, wenn die Navigation rückwärts 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. Das ist nie ein Problem, wenn die Rückwärtsnavigation durch bfcache unterstützt wird: Die Scrollposition wird sofort und korrekt wiederhergestellt.

Zwei Filmstreifen der 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 die Rückwärtsnavigation von einem Artikel zur Artikelliste mit und ohne bfcache zeigt Mit bfcache ist die Navigation rückwärts nicht nur schneller, sondern die Scrollposition wird auch genau 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-Blockierer ansehen und diese und andere weniger gängige Muster vermeiden.