Jak pamięć podręczna stanu strony internetowej pomogła Yahoo! Japan News Wzrost przychodów z reklam mobilnych o 9%

Yuriko Hirota

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łówkach Cache-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 zdarzenia pagehide, ponieważ zdarzenie unload jest bardzo niepewne. Ponadto Permissions-Policy: unload=() zostało wprowadzone w Chrome 115, aby witryny mogły niezawodnie usuwać moduły obsługi unload dla określonych źródeł. Zespół Chrome planuje też stopniowe wycofywanie obsługi unload.
Cache-control: no-store (lub w skrócie CCNS): zmiana nagłówka Cache-control z no-store na no-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łówka no-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.

`Cache-control: no-store`	`Cache-control: no-cache`
Odpowiedzi nie można przechowywać w pamięci podręcznej. W związku z tym odpowiedź jest pobierana w całości przy każdym żądaniu. Należy go używać w przypadku odpowiedzi prywatnych.	Odpowiedź może być przechowywana w pamięci podręcznej, o ile przed każdym użyciem jest ponownie sprawdzana przez serwer. Powinny to być odpowiedzi publiczne, które chcesz weryfikować za każdym razem (np. strona główna witryny z wiadomościami – choć nawet w tym przypadku bardzo krótki czas buforowania może poprawić wydajność i odciążyć główne serwery).

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).

Wskaźniki	Wzrost % (mobilne)	Wzrost procentowy (komputery)
Współczynnik trafień w pamięci podręcznej stanu strony internetowej	+54,03 punktów (0,04% → 54,07%)	+47,28 punktów (0,02% → 47,30%)
Odsłony	+2,26%	+0,65%
Przychody z reklam	+9,0%	+0,6%

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.

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.

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.