Back/Forward Cache (bfcache): Der Instant Performance Booster, den Ihr Magento-2-Shop braucht

“bfcache powers the rapid flow,
JaJuMa sparks the blazing glow.
Magento thrives, Hyvä flies,
Performance soaring, reaching the skies.
Pages stored, restored with grace,
No lag, no wait—a seamless pace.”

Selbst bei Verwendung eines modernen, performanceorientierten Magento-Frontend wie Hyvä Theme und bereits vorhandenen Top Core Web Vitals beim ersten Laden / Labordaten gibt es immer noch Verbesserungspotenzial für echte Benutzer auf der Website und für Core Web Vitals Felddaten.

Stellen Sie sich vor, Sie springen sofort und ohne Ladeverzögerung zu einer zuvor angesehenen Seite zurück.
Das ist die Kraft des bfcache (Back/Forward Cache), einer Browserfunktion, die die Leistung und Benutzererfahrung Ihres Magento 2 Shops dramatisch verbessern kann. Aber warum ist diese leistungsstarke Funktion in Magento nicht standardmäßig aktiviert und wie können Sie ihre Vorteile nutzen?
Als Experten für Magento-Performance-Optimierung erklärt JaJuMa.

Bfcache steht für "Back-Forward Cache" und ist eine Optimierungsfunktion des Browsers, die einen vollständigen Schnappschuss einer Webseite, einschließlich ihres Speicherzustands und des gesamten JavaScript-Heaps, speichert, wenn ein Benutzer davon wegnavigiert. Wenn der Benutzer über die Zurück- oder Vorwärts-Schaltfläche zur Seite zurückkehrt, kann der Browser die Seite sofort aus diesem In-Memory-Schnappschuss wiederherstellen, anstatt sie erneut vom Server anzufordern.

Stellen Sie es sich wie das Anhalten und Fortsetzen eines Videos vor – der Inhalt ist sofort genau dort verfügbar, wo Sie aufgehört haben. Wiederhergestellt aus dem bfcache ohne Netzwerkanfrage und sogar ohne Lesen von der Festplatte! Dies führt zu nahezu sofortigen Seitenladezeiten bei Zurück-/Vorwärts-Navigationen und einem deutlich reibungsloseren Browse-Erlebnis für Benutzer. Dies unterscheidet sich grundlegend vom standardmäßigen Browser-HTTP-Cache, der nur einzelne Datei-Antworten (wie Bilder oder CSS) speichert und vom Browser immer noch die Rekonstruktion der Seite verlangt, und ist schneller als dieser.

Für einen tieferen Einblick in die technische Funktionsweise von bfcache ist der web.dev Artikel über bfcache eine ausgezeichnete Ressource.

Warum ist der bfcache angesichts seiner Vorteile nicht automatisch in Magento 2-Shops aktiviert?
Der Hauptgrund liegt in der dynamischen Natur von E-Commerce-Plattformen und potenziellen technischen Blockern, die verhindern, dass Browser Seiten sicher zwischenspeichern. Bestimmte Magento-Funktionalitäten wie dynamische Blöcke (z. B. Mini-Warenkorb-Updates), Sitzungsmanagement oder spezifische JavaScript-Interaktionen, die in Themes und Extensions üblich sind, können unbeabsichtigt verhindern, dass Seiten für den bfcache in Frage kommen. Browser sind vorsichtig und speichern Seiten nicht zwischen, wenn das Risiko besteht, veraltete oder falsche Informationen anzuzeigen, insbesondere in sensiblen Bereichen wie dem Checkout oder Kundenkonten. Die unsachgemäße Aktivierung des bfcache ohne Berücksichtigung dieser dynamischen Elemente kann zu erheblichen Problemen führen, z. B. zur Anzeige veralteter Warenkorbinhalte oder sogar zur Anzeige privater Informationen eines Benutzers für einen anderen.

Darüber hinaus können einige gängige Webentwicklungspraktiken, wenn sie nicht sorgfältig verwaltet werden, die Bfcache-Berechtigung blockieren:

• unload-Ereignis-Listener:

  
  Das Vorhandensein von JavaScript-unload-Ereignis-Listenern ist in den meisten Browsern ein Hauptblocker für den bfcache. Dieses Ereignis ist unzuverlässig und von seiner Verwendung wird dringend abgeraten; stattdessen sollte das pagehide-Ereignis verwendet werden. Leider könnten veralteter Code oder Drittanbieter-Module in Magento immer noch unload verwenden.

• Cache-Control: no-store-Header:

  
  Dieser HTTP-Header weist den Browser ausdrücklich an, die Seite in keinem Cache zu speichern, einschließlich des bfcache. Magento sendet diesen Header oft auf Seiten mit potenziell sensiblen oder dynamischen Inhalten (wie Checkout- oder Kontoseiten), um Probleme zu vermeiden, wendet ihn aber manchmal zu weitläufig an.
  Obwohl Chrome damit experimentiert, no-store-Seiten unter bestimmten Bedingungen im bfcache zuzulassen, führt die häufige Verwendung von Set-Cookie-Headern in HTML-Antworten durch Magento oft dazu, dass Shops für diese Lockerung nicht in Frage kommen, was bedeutet, dass no-store im Magento-Kontext ein signifikanter Blocker bleibt.

• Offene Verbindungen:

  
  Aktive WebSocket- oder WebRTC-Verbindungen können den bfcache verhindern, ebenso wie bestimmte laufende fetch()- oder XMLHttpRequest-Anfragen oder offene IndexedDB-Verbindungen. Diese könnten von Echtzeitfunktionen oder bestimmten Extensions verwendet werden.

• window.opener-Referenzen:

  
  Seiten, die mit target="_blank" ohne rel="noopener" geöffnet werden, können eine Referenz erstellen, die den bfcache blockiert. Moderne Browser fügen noopener oft standardmäßig hinzu, aber älterer Code oder spezifische Implementierungen können immer noch Probleme verursachen.

Das Navigieren durch diese Komplexitäten erfordert spezifische Anpassungen, um Magento-Seiten sicher und effektiv bfcache-kompatibel zu machen.

Die erfolgreiche Implementierung von bfcache in einem Magento-Shop (typischerweise über eine spezialisierte Extension) kann mehrere signifikante Vorteile bieten, darunter:

1. Drastisch verbesserte Seitenladezeiten:
   Sofortige Zurück-/Vorwärts-Navigation! Zurück- und Vorwärts-Navigationen werden praktisch augenblicklich. Seiten werden aus dem Speicher des Browsers wiederhergestellt, wodurch Netzwerkanfragen und Serververarbeitungszeit für diese Aktionen entfallen. Wenn man bedenkt, dass 1 von 10 Navigationen auf dem Desktop und 1 von 5 auf dem Handy Zurück-/Vorwärts-Aktionen sind, ist die kumulative Zeitersparnis für Benutzer erheblich.
2. Reibungsloseres, flüssigeres Browse-Erlebnis:
   Die Beseitigung der störenden vollständigen Seitenneuladungen während der Zurück-/Vorwärts-Navigation schafft ein wesentlich nahtloseres und reaktionsschnelleres Gefühl für Ihren Shop.
   Dies reduziert die Frustration der Benutzer, fördert das Erkunden und kann sich positiv auf die Konversionsraten auswirken.
   Dies ist besonders bei der Produktfindung und beim Vergleich spürbar.
3. Verbesserte Core Web Vitals (CWV)-Werte:
   Bfcache verbessert direkt wichtige CWV-Metriken, die Google zur Messung der Benutzererfahrung verwendet und die Suchrankings beeinflussen. Wir werden dies weiter unten genauer untersuchen, aber Studien und reale Daten deuten darauf hin, dass die Aktivierung von bfcache die CWV-Felddaten um bis zu 8-10% oder sogar mehr verbessern kann.
4. Reduzierte Serverlast:
   Da aus dem bfcache wiederhergestellte Seiten Ihren Server nicht belasten, kann die Aktivierung den Serverressourcenverbrauch spürbar senken, potenziell die Hostingkosten senken und die Stabilität der Website während Spitzenlastzeiten verbessern.
   

Core Web Vitals (LCP, INP, CLS) sind entscheidend für SEO und die Benutzererfahrung.
Bfcache bietet einen signifikanten Schub, insbesondere für Largest Contentful Paint (LCP) und Cumulative Layout Shift (CLS):

• Largest Contentful Paint (LCP):
  LCP misst, wie schnell der Hauptinhalt einer Seite sichtbar wird. Bei Seiten, die aus dem bfcache wiederhergestellt werden, ist der LCP nahe Null, da die Seite bereits im Speicher gerendert ist. Dies verbessert den LCP-Wert für einen erheblichen Teil der Seitennavigationen drastisch.
• Cumulative Layout Shift (CLS):
  CLS misst die visuelle Stabilität während des Seitenladens. Da der bfcache einen vollständig gerenderten Schnappschuss wiederherstellt, eliminiert er Layoutverschiebungen während des Wiederherstellungsprozesses vollständig. Dies bedeutet, dass aus dem bfcache geladene Seiten für diese Navigation einen CLS-Wert von 0 haben, was die gesamten CLS-Felddaten Ihrer Website erheblich verbessert. Wie das Chrome Developer Relations Team hervorhob, führte die Einführung von bfcache zur größten einzelnen Verbesserung des CLS im gesamten Web im Jahr 2022.
• Schneller als der HTTP-Cache: Es ist wichtig zu wiederholen, dass Wiederherstellungen aus dem bfcache schneller sind als das Laden aus dem standardmäßigen Browser-HTTP-Cache, da der bfcache Netzwerkanfragen sowie die Notwendigkeit des erneuten Parsens und Renderns von Ressourcen vermeidet.

Durch die Verbesserung von LCP und CLS für ein gängiges Navigationsmuster hilft bfcache Magento-Shops, bessere CWV-Werte zu erzielen, was zu verbesserten Suchrankings und einer besseren Benutzererfahrung führt.

Die Überwindung der inhärenten Komplexität von Magento zur sicheren Aktivierung von bfcache erfordert eine dedizierte Lösung. Die JaJuMa Back/Forward Cache (Bfcache) für Magento 2 wurde fachmännisch entwickelt, um das volle Potenzial von bfcache für Ihren Shop freizuschalten.

Unsere Extension bewältigt die Herausforderungen intelligent und stellt sicher:

• Zuverlässige Bfcache-Aktivierung:
  Macht Ihre Magento 2-Seiten für bfcache geeignet.
• Sicherheit zuerst:
  Schließt automatisch Seiten aus, die nicht zwischengespeichert werden sollten (wie Warenkorb-, Checkout-, Kundenkontobereiche), um Probleme mit veralteten Daten zu vermeiden.
  Sie enthält auch Logik zur Aktualisierung dynamischer Elemente wie des Miniwarenkorbs bei Benutzerinteraktion nach einer Wiederherstellung, um Leistung und Datengenauigkeit in Einklang zu bringen.
• Breite Kompatibilität:
  Funktioniert nahtlos mit Standard-Magento 2, ist vollständig kompatibel mit Hyvä Themes und unterstützt Mage-OS. Sie bietet auch verbesserte Varnish-Kompatibilität.
• Umgang mit veralteten Inhalten:
  Enthält spezifische Verbesserungen, um potenziell veraltete Inhalte bei der Wiederherstellung aus dem bfcache besser zu verwalten.
• Entwicklerfreundlich:
  Verfügt über ein einzigartiges Debug-Tool, das den bfcache-Status und Leistungs-KPIs direkt im Frontend für eingeloggte Admins anzeigt, was das Testen und die Fehlerbehebung vereinfacht – eine Funktion, die bei Konkurrenzlösungen nicht üblich ist.

Lassen Sie nicht zu, dass die Einschränkungen von Magento die Leistung Ihres Shops beeinträchtigen. Implementieren Sie bfcache auf die richtige Weise mit JaJuMa.

Es ist wichtig zu verstehen, dass der bfcache andere Caching-Mechanismen, die üblicherweise in Magento verwendet werden, ergänzt und nicht ersetzt:

Im Wesentlichen bietet bfcache das schnellstmögliche Erlebnis für die Zurück-/Vorwärts-Navigation, indem eine vollständige Seite direkt aus dem Speicher bereitgestellt wird, während andere Caches das anfängliche Laden oder die Backend-Verarbeitung optimieren.
Sie arbeiten zusammen, um ein schnelles Gesamterlebnis zu schaffen.

Sehen Sie sich unsere Fallstudien/Showcases unten an, um unsere Back/Forward Cache Extension für Top-LCP-Werte in Aktion zu sehen.
Ein Largest Contentful Paint von 0,8 Sekunden sowohl für einen neu gestarteten Shop als auch für eine Migration von Luma zu Hyvä ist beeindruckend, oder?

Möchten Sie sehen, ob Ihre Seiten aktuell aus dem bfcache bereitgestellt werden?
Sie können dies einfach mit den Entwicklertools Ihres Browsers testen:

• Verwendung der Chrome DevTools:

  1. Öffnen Sie die Chrome DevTools auf der Seite, die Sie testen möchten (Rechtsklick -> Untersuchen).
  2. Navigieren Sie zum Tab Application (Anwendung).
  3. Scrollen Sie im linken Bereich nach unten zum Abschnitt Cache und klicken Sie auf Back/forward cache (Zurück/Vorwärts-Cache).
  4. Klicken Sie auf die Schaltfläche Test back/forward cache (Zurück/Vorwärts-Cache testen).
  5. Chrome versucht, wegzunavigieren und zurückzukehren. Das Ergebnisfeld zeigt an, ob die Seite erfolgreich aus dem bfcache wiederhergestellt wurde oder listet die Gründe auf, warum dies nicht der Fall war.

• Verwendung von Google Lighthouse:

  • Neuere Versionen von Google Lighthouse enthalten auch eine Prüfung, die die bfcache-Berechtigung überprüft und Blocker identifiziert. Das Ausführen eines Lighthouse-Berichts für Ihre Seiten kann wertvolle Einblicke liefern.

• Erweitertes Debugging:

  • Für eine tiefere Analyse können Entwickler die Back/forward cache notRestoredReasons API verwenden, um programmgesteuert zu ermitteln, warum der bfcache möglicherweise blockiert ist.

Wenn Ihre Tests zeigen, dass Seiten "Not Actionable" (Nicht umsetzbar) sind oder bestimmte Blocker auflisten, deutet dies auf eine Optimierungsmöglichkeit hin, potenziell unter Verwendung der JaJuMa Bfcache Extension.

Die Implementierung von bfcache in einem Magento-Shop bietet mehrere signifikante & messbare Vorteile, einschließlich verbesserter Seitenladezeiten für die Zurück-/Vorwärts-Navigation, ein reibungsloseres Browse-Erlebnis und verbesserte Core Web Vitals-Werte. Während die genaue Verbesserung der Leistung und der Core Web Vitals-Werte je nach spezifischem Design und Inhalt der Website variiert, haben Studien und reale Daten gezeigt, dass die Verwendung von bfcache die Leistungs-KPIs und die Benutzererfahrung dramatisch verbessern kann.
Die Vorteile der Nutzung von bfcache wurden nicht nur von Google bestätigt, sondern andere bezeichnen es sogar als "Performance Game Changer".

Die sofortige Zurück-/Vorwärts-Navigation ist nicht länger nur ein „Nice-to-have“ – sie ist eine Schlüsselkomponente einer modernen, leistungsstarken E-Commerce-Website.

Während die dynamische Natur von Magento Herausforderungen für die native bfcache-Unterstützung darstellt, können diese Hürden sicher und effektiv überwunden werden.
Das Ignorieren von bfcache bedeutet, erhebliche Leistungsgewinne ungenutzt zu lassen.

Es ist wichtig zu beachten, dass bfcache zwar ein leistungsstarkes Optimierungstool sein kann, aber ohne sorgfältige Implementierung keine Einheitslösung ist. Abhängig vom Design und der Funktionalität der Website verhindern native Magento-Setups oft die bfcache-Berechtigung.
Darüber hinaus birgt eine falsche Implementierung Risiken, wie z. B. die Anzeige veralteter oder privater Benutzerdaten.

Die JaJuMa Back/Forward Cache (Bfcache) für Magento 2 bietet eine robuste, zuverlässige und fachmännisch entwickelte Lösung speziell für Magento 2.
Sie adressiert die üblichen Blocker, gewährleistet Kompatibilität mit modernen Setups wie Hyvä und Mage-OS und enthält sogar ein einzigartiges Debug-Tool zur Unterstützung von Entwicklern.

Sind Sie bereit, Ihren Kunden eine blitzschnelle Navigation zu bieten und die Leistungsmetriken Ihres Shops zu verbessern?