Warto zauważyć, że nie jest to zwykły HTTP cache, ale zapamiętywanie przez przeglądarkę kompletnego stanu całej strony (łącznie z JS heap'em).

Nie jest to de facto nic nowego, wszak ta funkcjonalność istnieje od bardzo dawna w wielu przeglądarkach, ale dopiero od niedawna została wprowadzona w Chrome (pod koniec 2021). Ze względu na jej niedoskonałość w tej przeglądarce, powodowało to na początku sporo problemów, lecz ostatnio udoskonalono ten mechanizm znacząco, przez co automatycznie, na wielu stronach, rezultaty Core Web Vitals w CrUX uległy poprawie. Zauważono przede wszystkim spore usprawnienia metryki CLS ze względu na serwowanie strony z jego odtworzonego pełnego stanu.

Zapewne możesz sobie zadawać pytanie, czy bfcache jest aż tak istotny. Być może Ty sam możesz odnosić wrażenie, że nie korzystasz z przycisków Back/Forward przeglądarki zbyt często. Co powiesz jednak na to, że aż ok. 20% nawigacji na urządzeniach mobilnych (Chrome) opiera się na tym mechanizmie?

Czy musisz coś robić, aby zapewnić działanie Back/Forward cache na Twojej stronie?

Najszybciej jest dokonać testu w DevToolsach, w zakładce Application -> Back/Forward cache i po prostu sprawdzić, czy bfcache działa.

Przykład, w jaki sposób można testować bfcache na stronie
Otwórz DevTools, przejdź do zakładki Application -> Back/forward cache i przetestuj, czy bfcache działa na Twojej stronie

Jeżeli strony na Twojej witrynie mogą być serwowane przez Back/Forward cache - nie musisz absolutnie nic robić.

Jeżeli widnieje komunikat o błędzie, zasadniczo przyczyn takiej sytuacji może być naprawdę sporo, ale sądzę, że do najpopularniejszych można zaliczyć:
- użycie eventu unload lub beforeunload w kodzie JS Twojej strony
- użycie nagłówka Cache-Control: no-store, który blokuje użycie jakiegokolwiek cache'a

Tutaj znajdziesz pełną listę możliwych przyczyn niedziałania bfcache.

Jako że bfache serwuje strony z zapamiętanego pełnego stanu poprzedniej wizyty, w trakcie przejścia wstecz (lub naprzód) w przeglądarce, Twoje skrypty trackujące (jak np. Google Analytics) nie zarejestrują takiej wizyty. Można temu zaradzić poprzez detekcję załadowania strony przez bfache i wysłanie eventu np. do GA o wizycie na stronie. Przykład:

Więcej o bfcache opowiadam w moim filmie, który pochodzi z kursu Zoptymalizowany Frontend:

Lekcja demo z kursu Zoptymalizowany Frontend o bfcache

Spójrz na dane w CrUX lub RUM

Zwróć uwagę, w jaki sposób użytkownicy Twojej strony z niej korzystają. Innymi słowy - jak wygląda nawigacja między podstronami. Czy korzystają z przycisków Back / Forward? Możesz to ustalić spoglądając albo na dane z CrUX przez narzędzie CruX Vis, idealnie system RUM, albo np. Treo:

Typy nawigacji - przykład danych z CrUX zaprezentowanych na stronie Treo

Powyższy przykład przedstawia sytuację, gdzie prawe 7% użytkowników danej strony na urządzeniach mobilnych korzysta z przycisków "Wstecz / naprzód". Bfcache niestety nie działa (0%). 

Co to oznacza? Wielu użytkownikom serwowany jest pogorszony UX, gdyż wraz z każdym powrotem do np. poprzednio odwiedzonej podstrony, witryna ponownie się ładuje. Użytkownik znowu po raz kolejny musi czekać, aż wszystko się załaduje. Z poprawnie działającym mechanizmem bfcache strona pojawiłaby się natychmiastowo.

Jak to wygląda na Twoich stronach? Back/Forward cache działa od razu, czy też musisz dokonać jakichś zmian?

Po więcej technicznych porad względem optymalizacji wydajności stron zapraszam do szkolenia Zoptymalizowany Frontend.

Dołącz do prawie 500 osób