Der Back-Forward-Cache (bfcache) ist eine Browseroptimierung, die eine sofortige Rückwärts- und Vorwärtsnavigation ermöglicht. Dadurch wird das Surfen für Nutzer erheblich verbessert, insbesondere für Websites, die viele Vor- und Zurück-Navigationen erfordern.
web.dev-Artikel zum bfcache
Yahoo! JAPAN News, eine der beliebtesten Nachrichtenplattformen in Japan, hat sich intensiv darum bemüht, die bfcache-Trefferrate zu verbessern. Das Ergebnis waren erhebliche Verbesserungen bei der Nutzerfreundlichkeit und den Geschäftsergebnissen. Die Ergebnisse des A/B-Tests zeigten, dass Seiten, auf denen bfcache verwendet wird, einen Anzeigenumsatz von 9% erzielen.
In dieser Fallstudie wird erläutert, wie Yahoo! JAPAN News hat die Blocker für bfcache entfernt und bfcache hat die Nutzerfreundlichkeit drastisch verbessert.
Blockaden für bfcache entfernen
Der bfcache ist seit Chrome 86 verfügbar und wird auch von allen modernen Browsern unterstützt. Um den bfcache optimal nutzen zu können, müssen jedoch potenzielle Blocker auf der Website entfernt werden. Einige der größten Hindernisse, die Yahoo! JAPAN News hatte folgende Probleme:
- Verwendung von
unload-Handlern. - Verwendung der
no-store-Anweisung inCache-control-Headern.
Sie können auf Ihrer Website nach schwerwiegenden Blockierungen suchen, indem Sie zu den Chrome-Entwicklertools > Anwendungen > Cache für Zurück/Vorwärts gehen.
Alternativ können Sie die notRestoredReasons API verwenden, um eine umfassendere Übersicht über Blocker basierend auf der tatsächlichen Nutzung im Feld zu erhalten.
So gehts: JAPAN News hat die Blocker entfernt:
- Ersetzte Unload-Handler: Sie haben das
pagehide-Ereignis anstelle desunload-Ereignisses verwendet, daunloadsehr unzuverlässig ist.Permissions-Policy: unload=()wurde in Chrome 115 eingeführt, damit Websitesunload-Handler für bestimmte Ursprünge zuverlässig entfernen können. Chrome plant,unload-Handler nach und nach einzustellen. cache-controlgeändert: Wenn Sie denCache-control-Header vonno-store(CCNS) inno-cacheändern, wird bfcache aktiviert. Chrome plant, bfcache auch mit einemno-store-Header unter bestimmten Umständen zu cachen.
CCNS ist für Seiten vorgesehen, die unter keinen Umständen gecacht werden sollten. Das bedeutet jedoch, dass Seiten mit CCNS nicht von Caching-Technologien profitieren, einschließlich CDN-Edge-Servern und lokalen Caches.
Wenn Sie einen CCNS-Header haben, ist das eine gute Gelegenheit, um zu besprechen, welche Cache-control-Strategien für Ihre Website am besten geeignet sind. Hier sind die wichtigsten Unterschiede zwischen no-store und no-cache.
Weitere Informationen zu cache-control-Optionen finden Sie im cache-control-Ablaufdiagramm.
Wirkung mit A/B-Tests nachweisen
Um die Auswirkungen von bfcache zu messen, hat Yahoo! JAPAN News hat einen zweiwöchigen A/B-Test durchgeführt. Sie haben einer Gruppe eine Version ihrer Seiten mit den BF-Cache-Korrekturen und einer anderen Gruppe eine Version mit Seiten, die nicht für den BF-Cache infrage kommen, bereitgestellt. Sie testeten URL-Pfade mit erheblichem Traffic, um aussagekräftige Ergebnisse zu erzielen. Es gab keine anderen visuellen oder funktionalen Unterschiede zwischen den Seiten.
In diesem Video wird eine Website mit und ohne bfcache verglichen. Sie sehen, dass die Website mit aktiviertem bfcache bei einer Rückwärts- oder Vorwärtsnavigation deutlich schneller geladen wird.
Besonders vielversprechend ist, dass die Gruppe mit aktiviertem bfcache einen deutlichen Anstieg der Seitenaufrufe und des Anzeigenumsatzes verzeichnete, insbesondere auf Mobilgeräten.
Hier finden Sie Details zu den Auswirkungen, die Yahoo! beobachtet hat. JAPAN News mit seinem A/B-Test für den bfcache. Weitere Informationen
Wenn die Vorwärts-/Rückwärtsnavigation zwischen Seiten mit dem BF-Cache sofort erfolgt, bleiben Nutzer in der Regel länger auf den Seiten. Dadurch werden mehr Anzeigenaufrufe erzielt, was zu höheren Werbeeinnahmen führt.
Reibungslose Nutzung
Wenn Seiten sofort geladen werden, fühlt sich die Navigation nahtloser an.
In Yahoo! Bei JAPAN News ist das Lesen mehrerer Artikel einer der wichtigsten Nutzerpfade:
- Rufen Sie die Artikelliste auf.
- Klicken Sie auf einen Artikel, um ihn zu lesen.
- Kehren Sie anschließend zur Artikelliste zurück.
- Klicken Sie auf einen anderen Artikel, um ihn zu lesen.
Vor der Einführung von bfcache mussten Nutzer nach dem Lesen eines Artikels warten, bis die Artikellistenseite wieder geladen wurde. Das kann für Nutzer, die schnell zur Liste zurückkehren möchten, um einen anderen Artikel auszuwählen, ein Hindernis sein.
Eine weitere Quelle für Reibung bei der Rückwärtsnavigation war die Scrollposition. In der Praxis versucht der Browser, die Scrollposition wiederherzustellen, wenn eine Rückwärtsnavigation erfolgt. Aufgrund von dynamisch hinzugefügten Anzeigen oder anderen Layoutänderungen kann die Scrollposition jedoch falsch wiederhergestellt werden. Das kann zu Verwirrung bei den Nutzern führen oder dazu, dass sie die Seite verlassen.
Dieses Problem wird behoben, wenn die Rückwärtsnavigation durch bfcache unterstützt wird: Die Scrollposition wird sofort und korrekt wiederhergestellt.
Mit bfcache ist die Reibung in der User Journey nun verschwunden. Nutzer können sofort zur Artikellistenseite zurückkehren und einen anderen Artikel auswählen, ohne warten zu müssen, bis die Artikellistenseite geladen wird.
Dasselbe passiert, wenn Nutzer direkt von einem Artikel zu einem anderen und wieder zurück wechseln:
Kurz gesagt: Die Vorteile von bfcache für Yahoo! JAPAN News umfasst:
- Mehr Seitenaufrufe: Nutzer navigierten eher auf der Website, wenn Seiten mit dem bfcache-Mechanismus im Cache gespeichert wurden.
- Höherer Umsatz: Durch die höhere Anzahl von Seitenaufrufen pro Sitzung stieg die Anzahl der Anzeigenimpressionen, was zu einem um 9% höheren Umsatz auf Mobilgeräten im Vergleich zur Testgruppe ohne bfcache führte.
bfcache jetzt implementieren
Kurz gesagt: Der bfcache macht Ihre Website nicht nur sofort verfügbar, sondern kann auch die Nutzerfreundlichkeit verbessern und die Interaktionen auf Ihrer Website steigern.
Das Chrome-Team untersucht kontinuierlich bfcache-Blocker, insbesondere die aufgeführten Gründe, da dies häufige Gründe dafür sind, dass bfcache nicht verwendet wird. In Zukunft verhindern diese möglicherweise nicht die Verwendung von bfcache, aber Sie müssen nicht so lange warten. Sie können von bfcache profitieren, indem Sie sich jetzt Ihre bfcache-Blocker ansehen und diese gängigen (und weniger gängigen) Muster vermeiden.