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. Pełne wykorzystanie bfcache wymaga jednak usunięcia potencjalnych blokad w witrynie. Niektóre z głównych przeszkód, które Yahoo! JAPAN News:

Używanie metod 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ędzia 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 permission-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 przeznaczone dla stron, które pod żadnym pozorem nie powinny być buforowane. Obejmuje to jednak pewne ograniczenie: żadna strona z CCNS nie będzie mogła korzystać z żadnej technologii buforowania, w tym z serwerów granicznych CDN i lokalnych pamięci podręcznych.

Jeśli masz nagłówek CCNS, jest to świetna okazja, aby porozmawiać o tym, jakie strategie Cache-control są odpowiednie 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 efekcie 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, pod warunkiem że zostanie ponownie zweryfikowana na serwerze przed każdym użyciem. 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 usługi Cache-control, bardzo przydatny będzie ten schemat blokowy.

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. Wersje te nie różnią się pod względem wizualnym ani funkcjonalności.

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 obej strony.

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 (w ujęciu procentowym) (mobilne)	Wzrost procentowy (komputery)
Współczynnik trafień w pamięci podręcznej stanu strony internetowej	+54,03 pkt (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 wstecz i do przodu między stronami staje się błyskawiczna, użytkownicy spędzają więcej czasu na stronach, co zwiększa liczbę wyświetleń reklam, co prowadzi do wzrostu przychodów z reklam.

bfcache zapewnia płynne działanie witryny

Gdy strony wczytują się natychmiast, nawigacja przebiega płynniej.

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 zakończeniem czytania artykułu (krok 2) użytkownik musiał czekać na ponowne załadowanie strony z listą artykułów przed użyciem polecenia bfcache. 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 dodanych reklam lub innych zmian układu pozycja przewijania jest często przywracana nieprawidłowo, co może spowodować, że użytkownicy stracą swoją orientację lub nawet opuszczą stronę. Ten problem nigdy nie występuje, gdy nawigacja do tyłu jest obsługiwana przez pamięć podręczną stanu strony internetowej. Pozycja przewijania jest natychmiast przywracana i poprawna.

2 filmy przewijania wstecz z artykułu na stronę z informacjami o artykule Na górze znajduje się pasek zdjęć z procesem obsługiwanym przez funkcję bfcache, który trwa 0,3 sekundy, natomiast na dole znajduje się ten sam proces wykonywany bez pamięci podręcznej, który trwa 3,3 sekundy.

Dzięki pamięci podręcznej Bfcache użytkownicy nie muszą już czekać na wczytanie strony z listą artykułów, ponieważ użytkownicy mogą natychmiast wrócić na stronę z listą artykułów i wybrać inny artykuł do przeczytania.

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. Dzięki pamięci podręcznej stanu strony internetowej nawigacja wstecz jest nie tylko szybsza, ale też pozycja przewijania jest dokładnie zachowana. Bez nich nie można zagwarantować takich gwarancji.

Podsumowując, korzyści płynące z używania pamięci podręcznej stanu strony internetowej w przypadku kampanii 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ą biblioteki bfcache.
Zwiększenie przychodów: 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 z urządzeń 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 nieustannie szuka programów blokujących pamięć podręczną stanu strony internetowej, zwłaszcza 2 powodów wymienionych w tym artykule, ponieważ są one częstymi powodami, dla których nie korzystamy z pamięci podręcznej stanu strony internetowej. W przyszłości mogą to nie uniemożliwiać użycia pamięci podręcznej stanu strony internetowej, ale nie trzeba czekać, aż to się uda. Możesz korzystać z bfcache, sprawdzając blokowanie bfcache i unikaj tych typowych i innych rzadziej występujących wzorców.