bfcache (Back/Forward cache) jako optymalizacja wydajności
Back/forward cache (bfcache) to temat, który chciałbym Ci nieco przybliżyć. To przeglądarkowa optymalizacja nawigacji na stronie, dzięki której, gdy użytkownik wchodzi na stronę, następnie przechodzi na jakąś podstronę, a później korzysta z opcji "Idź wstecz" na pasku przeglądarki, poprzednia odwiedzona strona ładuje się natychmiast, bez żadnego przeładowania.
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 udoskonalili 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.
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:
Jak to wygląda na Twoich stronach? Back/Forward cache działa od razu, czy też musisz dokonać jakichś zmian?
Już 20-23. lutego 2023 odbędzie się nabór do kursu Zoptymalizowany Frontend 2023.