Pamięć podręczna stanu strony internetowej (lub bfcache) to rodzaj optymalizacji przeglądarki, która umożliwia błyskawiczną nawigację w obu kierunkach. Znacznie ułatwia użytkownikom przeglądanie stron, zwłaszcza w przypadku witryn, w których użytkownicy często przewijają strony w górę i w dół.
Artykuł na stronie web.dev na temat pamięci podręcznej stanu strony internetowej
Yahoo! JAPAN News, jedna z najpopularniejszych platform informacyjnych w Japonii, podjęła zdecydowane działania, aby zwiększyć współczynnik trafień w przypadku pamięci podręcznej bfcache. W efekcie znacznie poprawiła komfort korzystania z usługi i swoje wyniki biznesowe. W szczególności wyniki przeprowadzonego testu A/B wykazały, że strony korzystające z bfcache odnotowały wzrost przychodów z reklam o 9%.
To studium przypadku wyjaśnia, jak Yahoo! JAPAN News usunął blokady dla bfcache i jak bfcache znacznie poprawił wrażenia użytkowników.
Usuwanie blokad w przypadku bfcache
bfcache jest dostępny od wersji 86 przeglądarki Chrome i w wszystkich nowoczesnych przeglądarkach. Jednak pełne korzystanie z bfcache wymaga usunięcia potencjalnych blokatorów w witrynie. Niektóre główne czynniki blokujące, które Yahoo! JAPAN News:
- Używanie obsługi
unload
- Użycie dyrektywy
no-store
w nagłówkachCache-control
Aby sprawdzić, jakie główne blokady występują w przypadku Twojej witryny, otwórz Narzędzie deweloperskie w Chrome > Aplikacje > Pamięć podręczna wstecz/wprzód (więcej informacji) lub użyj notRestoredReasons
interfejsu API, aby uzyskać bardziej kompleksowy widok blokad na podstawie rzeczywistego użycia w polu.
Oto jak Yahoo! JAPAN News usunął blokady:
- Wyładowywanie modułów obsługi: zamiast zdarzenia
unload
używaj zdarzeniapagehide
, ponieważ zdarzenieunload
jest bardzo niepewne. PonadtoPermissions-Policy: unload=()
zostało wprowadzone w Chrome 115, aby witryny mogły niezawodnie usuwać moduły obsługiunload
dla określonych źródeł. Zespół Chrome planuje też stopniowe wycofywanie obsługiunload
. Cache-control: no-store
(lub w skrócie CCNS): zmiana nagłówkaCache-control
zno-store
nano-cache
może włączyć pamięć podręczną stanu strony internetowej. W pewnych okolicznościach Chrome zamierza też zacząć przechowywać dane w pamięci podręcznej bfcache nawet w przypadku nagłówkano-store
.
CCNS jest przeznaczony do stron, które nigdy nie powinny być przechowywane w pamięci podręcznej. Należy jednak pamiętać, że strona z CNAME nie może korzystać z żadnej technologii buforowania, w tym z serwerów peryferyjnych CDN i pamięci podręcznej lokalnej.
Jeśli masz nagłówek CCNS, to świetna okazja, aby omówić odpowiednie strategie Cache-control
dla Twojej witryny. Oto główne różnice między no-store
a no-cache
.
Jeśli chcesz dowiedzieć się więcej o opcjach Cache-control
, zapoznaj się z tą schematyczną instrukcją.
Wpływ bfcache w liczbach
Aby zmierzyć wpływ pamięci podręcznej stanu strony internetowej, Yahoo! JAPAN News przeprowadził przez 2 tygodnie test A/B, w ramach którego jednej grupie wyświetlał wersję stron z poprawkami dotyczącymi pamięci podręcznej stanu strony internetowej, a innej – wersję z wersjami stron, które nie kwalifikowały się do korzystania z tej pamięci. Wybrano ścieżki adresów URL z dużą ilością ruchu, aby uzyskać miarodajne wyniki. Nie było żadnych innych wizualnych ani funkcjonalnych różnic między 2 wersjami.
Oto film, w którym porównujemy działanie witryny z pamięcią podręczną stanu strony internetowej i bez niej. Widać, że witryna z włączoną pamięcią podręczną stanu strony ładuje się znacznie szybciej podczas nawigacji w obrót wstecz lub wprzód.
Co bardzo obiecujące, grupa z włączonym bfcache miała znaczny wzrost liczby wyświetleń stron i przychodów z reklam, zwłaszcza na urządzeniach mobilnych.
Oto szczegóły dotyczące wpływu, jaki zaobserwowaliśmy w Yahoo! JAPAN News z testem A/B pamięci podręcznej stanu strony internetowej. (więcej informacji znajdziesz w tym artykule z studium przypadku).
Gdy dzięki bfcache nawigacja między stronami staje się natychmiastowa, użytkownicy dłużej pozostają na stronach, co zwiększa liczbę wyświetleń reklam, a w konsekwencji przychody z reklam.
bfcache zwiększa komfort korzystania z witryny
Gdy strony wczytują się natychmiast, nawigacja jest płynniejsza.
W Yahoo! JAPAN News, jedna z głównych ścieżek użytkownika:
- Otwórz listę artykułów
- Kliknij jeden artykuł, aby go przeczytać
- Powrót do listy artykułów
- Kliknij inny artykuł, aby go przeczytać
Przed wdrożeniem bfcache, gdy użytkownicy kończyli czytanie artykułu (krok 2), musieli czekać na ponowne załadowanie strony z listą artykułów. Może to być uciążliwe dla użytkowników, którzy chcą wrócić do listy artykułów, aby wybrać kolejny artykuł do przeczytania.
Innym źródłem problemów podczas nawigacji wstecz była pozycja przewijania. W praktyce przeglądarka próbuje przywrócić pozycję przewijania podczas przechodzenia do poprzedniej strony. Jednak z powodu dynamicznie dodawanych reklam lub innych zmian w układzie pozycja przewijania jest często nieprawidłowo przywracana, co może spowodować, że użytkownicy stracą orientację lub nawet opuszczą stronę. To nigdy nie jest problemem, gdy cofanie jest obsługiwane przez bfcache: pozycja przewijania jest natychmiast i prawidłowo przywracana.
![2 filmy przewijania wstecz z artykułu na stronę z informacjami o artykule Górna część to film przedstawiający proces obsługiwany za pomocą bfcache, który trwa 0,3 sekundy, a dolna część to ten sam proces obsługiwany bez bfcache, który trwa 3,3 sekundy.](https://web.dev/static/case-studies/yahoo-japan-news-bfcache/image/bfcache-timeline.png?authuser=3&hl=pl)
Dzięki bfcache użytkownicy nie muszą już przechodzić przez cały proces, aby przeczytać kolejny artykuł. Mogą od razu wrócić na stronę z listą artykułów i wybrać kolejny artykuł do przeczytania bez konieczności czekania na załadowanie strony.
To samo dzieje się, gdy użytkownicy przechodzą bezpośrednio z jednego artykułu do drugiego i z powrotem:
![Animowany obraz pokazujący proces przechodzenia wstecz z artykułu na stronę z listą artykułów z wykorzystaniem i bez wykorzystania pamięci podręcznej bfcache. Dzięki pamięci podręcznej stanu strony internetowej nawigacja wstecz jest nie tylko szybsza, ale też pozycja przewijania jest dokładnie zachowana. Bez bfcache nie można zagwarantować tych gwarancji.](https://web.dev/static/case-studies/yahoo-japan-news-bfcache/image/bfcache-animation.gif?authuser=3&hl=pl)
W skrócie, zalety korzystania z pamięci podręcznej stanu strony internetowej w Yahoo! JAPAN News zawiera:
- Wzrost liczby wyświetleń stron: użytkownicy chętniej poruszali się po witrynie, gdy strony były przechowywane w pamięci podręcznej za pomocą bfcache.
- Zwiększone przychody: w wyniku zwiększenia liczby wyświetleń stron na sesję wzrosła liczba wyświetleń reklam, co przełożyło się na wzrost przychodów na urządzeniach mobilnych o 9% w porównaniu z grupą testową bez bfcache.
Podsumowanie
Krótko mówiąc, bfcache nie tylko sprawia, że witryna wczytuje się natychmiast, ale też może zmniejszyć utrudnienia w ogólnym korzystaniu z niej i zwiększyć zaangażowanie użytkowników.
Zespół Chrome stale analizuje blokowanie funkcji bfcache, zwłaszcza z powodu dwóch przyczyn wymienionych w tym artykule, ponieważ są to najczęstsze powody, dla których nie jest ona używana. W przyszłości może się okazać, że nie będzie można używać pamięci podręcznej stanu strony internetowej, ale nie musisz czekać do tego czasu. Możesz korzystać z bfcache, sprawdzając blokowanie bfcache i unikaj tych typowych i innych rzadziej występujących wzorców.