Pamięć podręczna stanu strony internetowej (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 często wracają do poprzednich stron.
Artykuł w web.dev na temat pamięci podręcznej stanu strony internetowej
Yahoo! JAPAN News, jedna z najpopularniejszych platform informacyjnych w Japonii, podjęła skoordynowane działania w celu zwiększenia współczynnika trafień w pamięci podręcznej typu „wstecz/do przodu”. Dzięki temu udało jej się znacznie poprawić wygodę użytkowników i wyniki biznesowe. Wyniki przeprowadzonego przez nich testu A/B wykazały, że strony korzystające z pamięci podręcznej typu „wstecz/do przodu” odnotowały wzrost przychodów z reklam o 9%.
Z tego studium przypadku dowiesz się, jak Yahoo! JAPAN News usunęło blokery pamięci podręcznej typu „wstecz/do przodu” i jak ta pamięć znacznie poprawiła wrażenia użytkowników.
Usuwanie blokad pamięci podręcznej typu „wstecz/do przodu”
Pamięć podręczna bfcache jest dostępna od Chrome 86, a także we wszystkich nowoczesnych przeglądarkach. Aby jednak w pełni wykorzystać bfcache, musisz usunąć potencjalne blokery w swojej witrynie. Główne czynniki blokujące, które uniemożliwiają Yahoo! JAPAN News:
- Używanie modułów obsługi
unload. - Użycie dyrektywy
no-storew nagłówkachCache-control.
Sprawdzić główne blokery w witrynie możesz, otwierając Narzędzia deweloperskie w Chrome > Aplikacje > Pamięć podręczna wstecz/dalej.
Możesz też użyć notRestoredReasons API, aby uzyskać bardziej szczegółowy wgląd w blokery na podstawie rzeczywistego użycia w terenie.
Oto jak Yahoo! JAPAN News usunęło blokady:
- Zastąpione moduły obsługi wyładowywania: używały zdarzenia
pagehidezamiast zdarzeniaunload, ponieważ zdarzenieunloadjest bardzo zawodne.Permissions-Policy: unload=()została wprowadzona w Chrome 115, aby strony internetowe mogły niezawodnie usuwać moduły obsługiunloaddla określonych źródeł. Chrome planuje stopniowo wycofywaćunloadmoduły obsługi. - Zmiana
cache-control: zmiana nagłówkaCache-controlzno-store(CCNS) nano-cachewłącza pamięć podręczną stanu strony internetowej. Chrome planuje buforowanie na potrzeby pamięci podręcznej typu „wstecz/do przodu” nawet w przypadku nagłówkano-storew określonych okolicznościach.
CCNS jest przeznaczony dla stron, które w żadnym wypadku nie powinny być przechowywane w pamięci podręcznej. Należy jednak pamiętać, że strony z CCNS nie korzystają z żadnej technologii buforowania, w tym z serwerów brzegowych CDN i pamięci podręcznych lokalnych.
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.
Więcej informacji o opcjach cache-control znajdziesz na cache-controlschemacie.
Testy A/B do pomiaru wpływu
Aby zmierzyć wpływ bfcache, Yahoo! JAPAN News przeprowadził test A/B przez 2 tygodnie. Jednej grupie wyświetlali wersję stron z poprawkami dotyczącymi pamięci podręcznej stanu strony internetowej, a drugiej – wersję stron, które nie kwalifikują się do korzystania z tej pamięci. Testowali ścieżki URL z dużym ruchem, aby mieć pewność, że test przyniesie miarodajne wyniki. Nie było żadnych innych różnic wizualnych ani funkcjonalnych między stronami.
Obejrzyj film porównujący witrynę z pamięcią podręczną stanu strony internetowej i bez niej. Widać, że witryna z włączoną pamięcią podręczną stanu strony internetowej wczytuje się znacznie szybciej podczas nawigacji w obu kierunkach.
Obiecujące jest to, że w grupie z włączoną pamięcią podręczną typu bfcache nastąpił znaczny wzrost liczby wyświetleń stron i przychodów z reklam, zwłaszcza na urządzeniach mobilnych.
Poniżej znajdziesz szczegółowe informacje o wpływie zaobserwowanym przez Yahoo!. JAPAN News z testem A/B dotyczącym pamięci podręcznej typu „wstecz/do przodu”. Więcej informacji znajdziesz w tym studium przypadku.
Gdy dzięki pamięci podręcznej przeglądarki (bfcache) nawigacja wstecz i do przodu między stronami staje się natychmiastowa, użytkownicy spędzają więcej czasu na stronach, co zwiększa liczbę wyświetleń reklam i przychody z nich.
Bezproblemowa obsługa
Gdy strony wczytują się natychmiast, nawigacja jest płynniejsza.
W Yahoo! W przypadku JAPAN News jedną z głównych ścieżek użytkownika jest przeczytanie kilku artykułów:
- Otwórz listę artykułów.
- Kliknij jeden z artykułów, aby go przeczytać.
- Gdy skończysz, wróć do listy artykułów.
- Kliknij inny artykuł, aby go przeczytać.
Przed wprowadzeniem pamięci podręcznej przeglądarki, gdy użytkownicy skończyli czytać artykuł, musieli czekać na ponowne załadowanie strony z listą artykułów. Może to być czynnik zniechęcający użytkowników, którzy chcą szybko wrócić do listy, aby wybrać kolejny artykuł do przeczytania.
Innym źródłem problemów podczas nawigacji wstecznej była pozycja przewijania. W praktyce przeglądarka próbuje przywrócić pozycję przewijania, gdy następuje przejście wstecz. Jednak z powodu dynamicznie dodawanych reklam lub innych zmian układu pozycja przewijania może zostać przywrócona nieprawidłowo. Może to dezorientować użytkowników, a nawet powodować, że opuszczą stronę.
Ten problem jest rozwiązany, gdy nawigacja wsteczna jest obsługiwana przez pamięć podręczną stanu strony internetowej: pozycja przewijania jest natychmiast i prawidłowo przywracana.
Dzięki pamięci podręcznej bfcache znikają problemy na ścieżce użytkownika. Użytkownicy mogą natychmiast wrócić do strony z listą artykułów i wybrać inny artykuł do przeczytania bez konieczności czekania na wczytanie strony z listą artykułów.
To samo dzieje się, gdy użytkownicy przechodzą z jednego artykułu bezpośrednio do drugiego i z powrotem:
Krótko mówiąc, korzyści z pamięci podręcznej bfcache dla Yahoo! JAPAN News obejmuje:
- Większa liczba wyświetleń strony: użytkownicy częściej poruszali się po witrynie, gdy strony były przechowywane w pamięci podręcznej z użyciem funkcji bfcache.
- Większe przychody: w wyniku zwiększenia liczby wyświetleń strony na sesję wzrosła liczba wyświetleń reklam, co spowodowało wzrost przychodów na urządzeniach mobilnych o 9% w porównaniu z grupą testową bez pamięci podręcznej typu „wstecz/do przodu”.
Wdróż bfcache już teraz
Krótko mówiąc, pamięć podręczna typu „wstecz/do przodu” nie tylko sprawia, że witryna działa błyskawicznie, ale też może zmniejszyć trudności związane z ogólnymi wrażeniami użytkownika i zwiększyć zaangażowanie w witrynie.
Zespół Chrome stale analizuje blokery pamięci podręcznej typu „wstecz/do przodu”, zwłaszcza wymienione przyczyny, ponieważ są one częstymi powodami, dla których nie jest używana pamięć podręczna typu „wstecz/do przodu”. W przyszłości te interfejsy API mogą nie zapobiegać używaniu pamięci podręcznej stanu strony internetowej, ale nie musisz czekać do tego czasu. Aby skorzystać z pamięci podręcznej typu „wstecz/do przodu”, sprawdź teraz blokery pamięci podręcznej typu „wstecz/do przodu” i unikaj tych typowych (i innych mniej typowych) wzorców.