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 to optymalizacja przeglądarki, która umożliwia błyskawiczną nawigację wstecz i do przodu. Znacznie poprawia komfort przeglądania stron, zwłaszcza w przypadku witryn wymagających wielu nawigacji do przodu i do tyłu.
Artykuł na stronie web.dev o pamięci podręcznej stanu strony internetowej

Przenoszenie linków do podstron Yahoo! JAPAN News, jednej z najpopularniejszych platform z wiadomościami w Japonii, podjął skoordynowane wysiłki na rzecz zwiększenia współczynnika trafień w pamięci podręcznej stanu strony internetowej, co w rezultacie spowodowało znaczny wzrost wygody użytkowników oraz wzrost wyników biznesowych. W szczególności wyniki przeprowadzonego przez firmę testu A/B wykazały, że strony korzystające z pamięci podręcznej stanu strony internetowej odnotowały 9% wzrost przychodów z reklam.

To studium przypadku wyjaśnia, jak usługi Yahoo! JAPAN News usunął blokady dotyczące buforowania bfcache i znacząco wpłynął na wygodę użytkowników.

Usuwanie blokad pamięci podręcznej (bfcache)

Pamięć podręczna bfcache jest dostępna od Chrome 86 i można z niej też korzystać we wszystkich nowoczesnych przeglądarkach. Pełne wykorzystanie pamięci podręcznej stanu strony internetowej wymaga jednak usunięcia potencjalnych blokad w witrynie. Niektóre główne blokady, które Yahoo! Japan:

Użycie modułów obsługi unload
Używanie dyrektywy no-store w nagłówkach Cache-control

Aby sprawdzić, jakie główne blokady są używane w Twojej witrynie, kliknij Narzędzia deweloperskie w Chrome > Aplikacje > Pamięć podręczna stanu strony internetowej (więcej informacji). Możesz też skorzystać z interfejsu API notRestoredReasons, aby uzyskać pełniejszy obraz blokad na podstawie rzeczywistego użycia w danym polu.

Oto, jak Yahoo! JAPAN News usunął blokady:

Wyładuj moduły obsługi: użyj zdarzenia pagehide zamiast zdarzenia unload, ponieważ zdarzenie unload jest bardzo zawodne. Ponadto permission-policy: unloadzostała wprowadzona w Chrome w wersji 115, dzięki czemu witryny mogą niezawodnie usuwać unload moduły obsługi z określonych źródeł. Chrome zamierza też stopniowo wycofywać moduły obsługi unload.
Cache-control: no-store (lub CCNS w skrócie): zmiana nagłówka Cache-control z no-store na no-cache może włączyć funkcję bfcache. Chrome planuje też w pewnych okolicznościach zapisywać w pamięci podręcznej dane bfcache nawet z nagłówkiem no-store.

CCNS jest przeznaczone dla stron, które nigdy nie powinny być przechowywane w pamięci podręcznej. Wiąże się to z zastrzeżeniem, że żadna strona z CCNS nie będzie mogła korzystać z technologii buforowania, w tym serwerów brzegowych CDN i lokalnych pamięci podręcznych.

Jeśli masz nagłówek CCNS, to doskonała 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. Dzięki temu po każdym żądaniu ta odpowiedź jest w pełni pobierana. Powinno być używane w przypadku odpowiedzi prywatnych.	Odpowiedź może być przechowywana w pamięci podręcznej, pod warunkiem że przed każdym użyciem zostanie ponownie sprawdzona na serwerze. Powinny to być odpowiedzi publiczne, które chcesz za każdym razem potwierdzać (np. strona główna witryny z wiadomościami – choć wtedy bardzo krótki czas buforowania może poprawić wydajność i zmniejszyć obciążenie serwerów głównych).

Jeśli chcesz dowiedzieć się więcej o opcjach usługi Cache-control, skorzystaj z tego schematu blokowego.

Wpływ pamięci podręcznej stanu strony internetowej na dane liczbowe

Aby zmierzyć wpływ pamięci podręcznej, Yahoo! JAPAN News przez 2 tygodnie prowadził test A/B, w ramach którego udostępniał wersję swoich stron z poprawkami do buforowania treści w jednej grupie, a w drugiej – wersję ze stronami, które nie kwalifikują się do korzystania z pamięci podręcznej stanu strony internetowej. Wybraliśmy ścieżki adresów URL o dużej ilości ruchu, aby test mógł uzyskać miarodajne wyniki. Obie wersje nie zmieniły się pod względem wizualnym ani funkcjonalnym.

Oto film porównujący stronę z pamięci podręcznej stanu strony internetowej i bez niej. Jak widać, strona z włączoną pamięcią podręczną strony wczytuje się znacznie szybciej podczas nawigacji w przód lub w przód.

Najbardziej obiecujące jest to, że w grupie z włączoną pamięcią podręczną strony (bfcache) nastąpił znaczny wzrost przychodów z reklam i wyświetleń stron, zwłaszcza na urządzeniach mobilnych.

Oto szczegółowe informacje o wpływie zaobserwowanym przez Yahoo! JAPAN News. Więcej informacji znajdziesz w artykule ze studium przypadku.

Wskaźniki	% wzrostu (urządzenia mobilne)	% wzrostu (na komputerach)
współczynnik trafień pamięci podręcznej (bfcache)	+54,03 punktu (0,04% → 54,07%)	+47,28 punktu (0,02% → 47,30%)
Odsłony	+2,26%	+0,65%
Przychody z reklam	+9,0%	+0,6%

Gdy przejście do przodu i do tyłu między stronami odbywa się błyskawicznie w pamięci podręcznej stanu strony internetowej, użytkownicy spędzają zwykle więcej czasu na stronach, co przekłada się na wzrost liczby wyświetleń reklam i wzrost przychodów z reklam.

bfcache zwiększa wygodę użytkowników witryny

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

W Yahoo! JAPAN News:

Przejdź do listy artykułów
Kliknij artykuł, aby go przeczytać
Wróć do listy artykułów
Kliknij inny artykuł, aby go przeczytać

Przed skorzystaniem z pamięci podręcznej stanu strony internetowej, gdy użytkownicy skończyli czytać artykuł (krok 2), musieli poczekać 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ć inny artykuł do przeczytania.

Innym źródłem kłopotów podczas nawigacji do tyłu była pozycja przewijania. W praktyce przeglądarka próbuje przywrócić pozycję przewijania, gdy następuje nawigacja wsteczna. Jednak z powodu dynamicznie dodawanych reklam lub innych zmian układu, pozycja przewijania często jest niewłaściwie przywracana, co może prowadzić do utraty orientacji lub nawet opuszczenia strony. Nie stanowi to problemu, gdy nawigacja wsteczna jest oparta na pamięci podręcznej stanu strony internetowej: pozycja przewijania jest natychmiast i prawidłowo przywracana.

2 pasy zdjęć przedstawiające nawigację wsteczną od artykułu do strony z listą artykułów. Górna część to pasek z procesu obsługiwanego z pamięci podręcznej stanu strony internetowej, który zajmuje 0,3 sekundy, natomiast w dolnej przedstawia ten sam proces obsługiwany bez pamięci podręcznej, który zajmuje 3,3 sekundy.

Teraz dzięki pamięci podręcznej bfcache użytkownicy mogą bez przeszkód przechodzić dalej – użytkownicy mogą od razu wrócić na stronę z listą artykułów i wybrać kolejny artykuł do przeczytania bez konieczności czekania na wczytanie strony z listą.

To samo dzieje się, gdy użytkownicy przeglądają jeden artykuł bezpośrednio do drugiego i z powrotem:

Animowany obraz przedstawiający wsteczną nawigację od artykułu do strony z listą artykułów z pamięci podręcznej stanu strony internetowej i bez niego. Dzięki buforowi bfcache nawigacja wsteczna jest nie tylko szybsza, ale także dokładnie zachowuje pozycję przewijania. Bez niego nie można zagwarantować tych gwarancji.

Krótko mówiąc, zalety korzystania z pamięci podręcznej stanu strony internetowej w Yahoo! JAPAN.

Większa liczba odsłon: użytkownicy byli bardziej skłonni do korzystania z witryny, gdy strony były zapisywane w pamięci podręcznej stanu strony internetowej.
Większe przychody: w wyniku zwiększenia liczby odsłon na sesję, zaowocował wzrostem liczby wyświetleń reklam, co przełożyło się na 9-procentowy wzrost przychodów na urządzeniach mobilnych w porównaniu z grupą testową bez pamięci podręcznej.

Podsumowanie

Krótko mówiąc, bfcache nie tylko sprawia, że witryna jest błyskawiczna, ale także może zmniejszyć problemy z ogólnymi wrażeniami użytkowników i zwiększyć ich zaangażowanie.

Zespół Chrome nieustannie analizuje rozwiązania blokujące pamięć podręczną (bfcache) – szczególnie te dwa powody wymienione w tym artykule są najczęstszą przyczyną nieużywania tej pamięci. W przyszłości może to nie zablokować korzystania z pamięci podręcznej, ale nie trzeba na to czekać. Możesz skorzystać z pamięci podręcznej stanu strony internetowej, sprawdzając blokady tej funkcji i unikając tych popularnych i mniej powszechnych wzorców.