BFcache: Beschleunigen Sie die Navigation in der Browserhistorie für Benutzer

Der Back/Forward-Cache (oder BFcache) ist eine Browseroptimierung, die eine sofortige Vor- und Zurück-Navigation ermöglicht. Sie verbessert das Surferlebnis erheblich, insbesondere für Benutzer mit langsameren Netzwerken oder Geräten.

Was ist BFcache#

BFcache ist ein Browser-Cache, der einen vollständigen Schnappschuss der Seite zum Zeitpunkt des Verlassens speichert. Da die gesamte Seite im Speicher gespeichert ist, kann der Browser sie schnell wiederherstellen, wenn der Benutzer sich entscheidet zurückzukehren, ohne alle Netzwerkabfragen zum Laden der Seite erneut ausführen zu müssen.

Das folgende Video zeigt, wie sehr BFcache die Navigation beschleunigen kann:

Addy Osmani: BFcache auf Chrome für Android

Wie BFcache funktioniert#

Der von BFcache verwendete Cache unterscheidet sich vom HTTP-Cache, der seine eigene Rolle bei der Beschleunigung wiederholter Navigationen spielt. BFcache ist ein Schnappschuss der gesamten Seite im Speicher, einschließlich JavaScript, während der HTTP-Cache nur Antworten auf zuvor gestellte Anfragen enthält.

Wiederholte Besuche durch Wiederherstellung aus dem BFcache sind immer schneller als die bestoptimierten Navigationen ohne BFcache. Mit BFcache erfolgt die Anzeige des vorherigen Seitenzustands im Wesentlichen sofort.

Bei einem unserer Kunden, Key4you.de, haben wir BFcache aktiviert, wodurch nun 16,5 % der mobilen Nutzer davon profitieren. Nach Abzug des Einflusses der TTFB (Serverantwortzeit) sank der Wert der LCP-Metrik für die gesamte Domain um 60 ms.

Kompatibilität in Browsern#

BFcache wird seit vielen Jahren sowohl in Firefox als auch in Safari unterstützt, sowohl auf Desktop- als auch auf Mobilgeräten.

Ab Version 86 ermöglichte der Chrome-Browser einem kleinen Prozentsatz von Nutzern die Nutzung von BFcache für die Navigation zwischen Seiten auf Android. Seit Version 96 ist BFcache für alle Chrome-Nutzer auf Desktop und Mobilgeräten aktiviert.

Die Entwicklergruppe von Google Chrome sagte dazu: „Die Einführung des BFcache führte zur größten Verbesserung der CLS, die wir im Jahr 2022 verzeichneten“.

Optimierung für BFcache#

Nicht alle Seiten werden automatisch im BFcache gespeichert, und selbst wenn eine Seite dort gespeichert wird, bleibt sie nicht unbegrenzt. Hier beschreiben wir, auf welcher Grundlage Seiten für die Speicherung im BFcache infrage kommen. Der Entwickler sollte selbst bewerten, welche Seiten im BFcache gespeichert werden sollten und welche nicht. Gleichzeitig muss die Anzahl der Seiten maximiert werden, die von BFcache profitieren.

Event unload#

Verwenden Sie das Event pagehide anstelle von unload. Der wichtigste Weg zur Optimierung für BFcache in allen Browsern besteht darin, niemals die Ereignislistener für unload zu verwenden. Stattdessen sollten Sie pagehide nutzen.

Das Event unload darf auch in Drittanbieter-Javascripts nicht verwendet werden. Um herauszufinden, ob irgendein JavaScript auf Ihren Seiten unload verwendet, empfehlen wir den Audit no-unload-listeners in der Lighthouse Anwendung.

Audit zum Event Unload von Lighthouse Test

Cache-Control: no-store#

Minimieren Sie die Verwendung von Cache-Control: no-store und verwenden Sie stattdessen Cache-Control: no-cache oder Cache-Control: max-age=0.

Cache-Control: no-store ist eine HTTP-Header, die von Webservern auf Antworten gesetzt werden kann und dem Browser anweist, die Antwort in keinem HTTP-Cache zu speichern. Sie wird für Ressourcen verwendet, die sensible Benutzerinformationen enthalten, wie z. B. Seiten hinter einem Login.

Um für BFcache zu optimieren, verwenden Sie Cache-Control: no-store nur auf Seiten, die sensible Informationen enthalten, die nicht im Cache gespeichert werden dürfen.

Für Seiten, die immer den aktuellen Inhalt anzeigen möchten, aber keine sensiblen Informationen enthalten, verwenden Sie Cache-Control: no-cache oder Cache-Control: max-age=0. Diese weisen den Browser an, den Inhalt vor der Anzeige erneut zu validieren, und haben keinen Einfluss auf die Eignung der Seite für BFcache.

Die Verwendung von Cache-Control: no-cache sorgt für eine Speicherung im BFcache.

Window.opener#

Vermeiden Sie Links zu window.opener.

Wenn in älteren Browsern eine Seite mit window.open() von einem Link mit target=_blank ohne Angabe von rel="noopener" geöffnet wurde, enthielt die geöffnete Seite einen Verweis auf das Fensterobjekt der geöffneten Seite.

Abgesehen davon, dass dies ein Sicherheitsrisiko darstellt, kann die Seite nicht sicher im BFcache gespeichert werden, da nicht eindeutig bestimmt werden kann, von wo aus Sie auf diese Seite gekommen sind.

Um diese Risiken zu vermeiden, verwenden Sie rel="noopener", um die Erstellung von window.opener Verweisen zu verhindern. Dies ist das Standardverhalten in allen modernen Browsern.

Offene Verbindungen#

Beenden Sie immer offene Verbindungen, bevor der Benutzer die Seite verlässt.

Dies betrifft Fälle von:

• Seiten mit offener IndexedDB-Verbindung
• Seiten mit laufendem fetch() oder XMLHttpRequest
• Seiten mit offener WebSocket- oder WebRTC-Verbindung

Tipp: Wenn Ihnen diese Ratschläge nicht ausreichen, können Sie sich das Video wie man eine Website für BFcache debuggt und optimiert von Chrome for Developers ansehen.

Testen der BFcache-Funktionalität#

Wie können Sie Ihre Webseiten testen, ob sie aus dem BFcache geladen werden?

DevTools#

• Navigieren Sie zu einer bestimmten Seite in Chrome.
• Gehen Sie dann in den DevTools zum Menüpunkt Application > Back-Forward cache.
• Klicken Sie dann auf die Schaltfläche Run Test und die DevTools zeigen Ihnen den Status für die spezifische Seite an.

Seite, die im BFcache gespeichert wird.

Seite, die die Voraussetzungen für die Speicherung im BFcache nicht erfüllt.

Lighthouse 10#

In der Lighthouse-Anwendung prüft einer der Tests im Audit die Eignung der Seite für den BFcache.

Lighthouse 10

Nachteile#

Obwohl BFcache eine Reihe von Vorteilen für die Geschwindigkeit und die reibungslose Navigation im Web bietet, gibt es auch einige Nachteile, die mit dieser Technologie verbunden sind:

Speicherverbrauch#

BFcache erfordert eine bestimmte Menge an Speicher, um den Zustand von Webseiten zu speichern, was den Gesamtspeicherverbrauch des Browsers erhöhen kann, insbesondere auf Geräten mit begrenzten Ressourcen, wie Mobiltelefonen oder älteren Computern.

Mögliche Dateninkonsistenzen#

Es besteht das Risiko, dass ein aktivierter BFcache zu Dateninkonsistenzen führen kann, insbesondere wenn auf den Webseiten interaktive Elemente wie Formulare, Warenkörbe oder Chatfenster vorhanden sind. Benutzer könnten veraltete oder ungültige Informationen sehen, wenn der BFcache nicht ordnungsgemäß aktualisiert wird.

Sicherheitsrisiken#

Das Speichern sensibler Daten im Cache kann ein Sicherheitsrisiko darstellen, insbesondere wenn das Gerät geteilt wird oder nicht ordnungsgemäß gesichert ist. Es besteht die Möglichkeit, dass sensible Informationen missbraucht werden können, wenn sie im BFcache gespeichert und dann unbefugten Personen zugänglich gemacht werden.

Trotz dieser Nachteile ist BFcache für die meisten Benutzer und Entwickler eine wertvolle Technologie, die die Benutzererfahrung und die Effizienz beim Surfen im Web verbessert.

Einfluss auf die Core Web Vitals#

BFcache kann erheblichen Einfluss auf die Core Web Vitals haben, die für die Bewertung der Benutzererfahrung von Webseiten durch Google entscheidend sind.

Largest Contentful Paint (LCP)
BFcache kann LCP positiv beeinflussen, indem es eine schnelle Anzeige des Hauptinhalts der Webseite beim Vor- oder Zurücknavigieren ermöglicht. Dies kann zu einer besseren LCP-Bewertung und einem verbesserten Gesamteindruck des Nutzers führen.

Cumulative Layout Shift (CLS)
BFcache kann CLS positiv beeinflussen, wenn die Wiederherstellung der Seite ohne BFcache zu unerwarteten Inhaltsverschiebungen führt.

Interaction to Next Paint (INP) und First Input Delay (FID)
BFcache kann sich auf INP und FID auswirken, wenn ein Benutzer nach dem Vor- oder Zurücknavigieren mit der Webseite interagiert. Wenn der Seitenzustand aus dem BFcache wiederhergestellt wird, kann dies zu einem niedrigeren FID und einer besseren INP-Metrik führen, da der Browser den Inhalt nicht erneut laden und rendern muss.

Wir haben BFcache im Rahmen unseres jüngsten Webinars vorgestellt:

Aktivieren Sie BFcache#

Durch das Entfernen von Hindernissen für die Speicherung von Seiten im BFcache erhalten Sie:

1. Schnellere Navigation:
   BFcache ermöglicht eine sofortige Wiederherstellung des Seitenzustands bei Verwendung der Vor- oder Zurück-Tasten, was die Navigation zwischen Seiten erheblich beschleunigt und das allgemeine Erlebnis für den Benutzer verbessert.

2. Einsparung des Datenverkehrs:
   Durch das Speichern des Seitenzustands im Speicher kann BFcache den Bedarf an wiederholtem Laden und Rendern von Inhalten minimieren, was zu einer Verringerung des Datenverkehrs und schnellerem Laden der Seiten führt.

3. Verbesserung der Benutzererfahrung und der Core Web Vitals:
   Durch schnelleres Laden und reibungslose Navigation trägt BFcache zur allgemeinen Verbesserung der Benutzererfahrung beim Surfen im Web bei, was zu einer höheren Benutzerzufriedenheit führt.