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:
- Verwendung von
unload
-Handlern - Verwendung der
no-store
-Anweisung inCache-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:
- Event-Handler entfernen:Verwenden Sie das Ereignis
pagehide
anstelle des Ereignissesunload
, da das Ereignisunload
sehr unzuverlässig ist. Außerdem wurdePermissions-Policy: unload=()
in Chrome 115 eingeführt, damit Websitesunload
-Handler für bestimmte Ursprünge zuverlässig entfernen können. Außerdem werdenunload
-Handler nach und nach eingestellt. Cache-control: no-store
(kurz CCNS): Wenn Sie denCache-control
-Header vonno-store
inno-cache
ändern, kann der bfcache aktiviert werden. Außerdem wird in Chrome 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 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.
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.
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. 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.
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:
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.