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.
Artikel zu bfcache auf web.dev
Yahoo! JAPAN News, eine der beliebtesten Nachrichtenplattformen in Japan, hat gezielt daran gearbeitet, die bfcache-Trefferquote zu verbessern. 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 zu finden. 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:
- Verwendung von
unload-Handlern - Verwendung der
no-store-Anweisung inCache-control-Headern
Sie können nach wichtigen Blockierungen auf Ihrer Website suchen. Rufen Sie dazu die Chrome-Entwicklertools > Anwendungen > Zurück-/Vorwärts-Cache auf.
Alternativ können Sie die notRestoredReasons API verwenden, um eine umfassendere Übersicht über die Blockierungen auf Grundlage der tatsächlichen Nutzung vor Ort zu erhalten.
So funktioniert das bei Yahoo! JAPAN News hat seine Blockierungen aufgehoben:
- Entfernen-Handler ersetzt: Das
pagehide-Ereignis wurde 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. In Chrome werdenunload-Handler nach und nach eingestellt. cache-controlgeändert: Wenn Sie denCache-control-Header vonno-store(CCNS) inno-cacheändern, wird der BFCache aktiviert. In Chrome wird unter bestimmten Umständen auch mit einerno-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 profitieren Seiten mit CCNS nicht von Caching-Technologien wie 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.
Weitere Informationen zu den cache-control-Optionen finden Sie im cache-control-Flussdiagramm.
A/B-Tests zur Wirkungsnachweis
Um die Auswirkungen von bfcache zu messen, hat Yahoo! JAPAN News führte einen A/B-Test über zwei Wochen durch. Er hat in einer Gruppe eine Version seiner Seiten mit den BFCache-Fehlerkorrekturen und in einer anderen eine Version mit Seiten ausgeliefert, die nicht für den BFCache infrage kommen. Er testete URL-Pfade mit hohem Traffic, um aussagekräftige Ergebnisse zu erzielen. Es gab keine anderen visuellen oder funktionalen Unterschiede zwischen den Seiten.
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.
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.
Reibungslose Nutzung
Wenn Seiten sofort geladen werden, ist die Navigation flüssiger.
In Yahoo! JAPAN News: Einer der wichtigsten Nutzerpfade besteht darin, mehrere Artikel zu lesen:
- 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 bfcache mussten Nutzer nach dem Lesen eines Artikels warten, bis die Seite mit der Artikelliste wieder geladen wurde. Das könnte für Nutzer ärgerlich sein, die schnell zur Liste zurückkehren und einen anderen Artikel auswählen möchten.
Ein weiteres Problem bei der rückwärtigen 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 kann die Scrollposition jedoch falsch wiederhergestellt werden. Das führt zu Verwirrung bei den Nutzern oder sogar 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 im Kaufprozess nicht mehr vorhanden. Nutzer können sofort zur Artikelliste zurückkehren und einen anderen Artikel auswählen, ohne warten zu müssen, bis die Artikelliste geladen ist.
Das Gleiche gilt, wenn Nutzer direkt von einem Artikel zum nächsten und zurück wechseln:
Vorteile von 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.
- Höherer Umsatz: Aufgrund der höheren Seitenaufrufe pro Sitzung stieg die Anzeigenimpression, was zu einem Umsatzanstieg von 9% auf Mobilgeräten im Vergleich zur Testgruppe ohne bfcache führte.
bfcache jetzt implementieren
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 für bfcache, insbesondere die aufgeführten Gründe, da sie häufige Gründe dafür sind, dass 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 jetzt ansehen und diese und andere weniger gängige Muster vermeiden.