Pamięć podręczna stanu strony internetowej pomogła Yahoo! JAPAN News zwiększa przychody z mobilnych o 9%

Yuriko Hirota
Yuriko Hirota
X

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 często trzeba się przełączać między stronami.

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:

  1. Używanie metod obsługi unload.
  2. Używanie dyrektywy no-store w nagłówkach Cache-control.

Aby sprawdzić, czy w witrynie występują poważne blokady, otwórz Narzędzie deweloperskie w Chrome > Aplikacje > Pamięć podręczna wstecz/w przód. Możesz też użyć interfejsu notRestoredReasons API, aby uzyskać bardziej kompleksowy wgląd w blokery na podstawie rzeczywistego użycia w polu.

Oto jak Yahoo! JAPAN News usunął blokady:

CCNS jest przeznaczony do stron, które nigdy i pod żadnym pozorem nie powinny być przechowywane w pamięci podręcznej. Należy jednak pamiętać, że strony z Cns nie korzystają 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).

Aby dowiedzieć się więcej o opcjach cache-control, zapoznaj się z cache-controlschematem.

Testy A/B, aby udowodnić wpływ

Aby zmierzyć wpływ pamięci podręcznej stanu strony internetowej, Yahoo! JAPAN News przeprowadził test A/B przez 2 tygodnie. W jednej grupie wyświetlali wersję stron z poprawkami dotyczącymi pamięci podręcznej stanu strony internetowej, a w innej – wersję stron, które nie kwalifikują się do korzystania z tej pamięci. Aby uzyskać miarodajne wyniki, przetestowano ścieżki adresów URL z dużą liczbą wizyt. Nie było żadnych innych wizualnych ani funkcjonalnych różnic między stronami.

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 odnotowała znaczny wzrost liczby wyświetleń stron i przychodów z reklam, zwłaszcza na urządzeniach mobilnych.

Oto szczegółowe informacje o wpływie, jaki zaobserwowaliśmy w Yahoo! JAPAN News z testem A/B bfcache. Więcej informacji znajdziesz w tym studium przypadku.

Wskaźniki Wzrost procentowy (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 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.

Bezproblemowe działanie

Gdy strony wczytują się natychmiast, nawigacja jest płynniejsza.

W Yahoo! JAPAN News: jedna z głównych ścieżek użytkownika to czytanie wielu artykułów:

  1. Otwórz listę artykułów.
  2. Kliknij artykuł, który chcesz przeczytać.
  3. Gdy skończysz, wróć do listy artykułów.
  4. Kliknij inny artykuł, który chcesz przeczytać.

Przed wdrożeniem bfcache użytkownicy po przeczytaniu artykułu musieli czekać na ponowne załadowanie strony z listą artykułów. Może to być uciążliwe dla 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 wstecz była pozycja przewijania. W praktyce przeglądarka próbuje przywrócić pozycję przewijania podczas przechodzenia do poprzedniej strony. Jednak ze względu na dynamicznie dodawane reklamy lub inne zmiany układu pozycja przewijania może zostać przywrócona nieprawidłowo. Może to dezorientować użytkowników, a nawet zniechęcić ich do korzystania z strony.

Ten problem został rozwiązany, gdy cofanie jest obsługiwane przez bfcache: pozycja przewijania jest natychmiast i prawidłowo przywracana.

2 filmstripy z cofniętym odtwarzaniem. Górna część to filmstrip obsługiwany za pomocą bfcache, co zajmuje 0,3 sekundy, a dolna część to ten sam proces obsługiwany bez bfcache, co zajmuje 3,3 sekundy.

Dzięki bfcache problemy na ścieżce użytkownika zniknęły. Użytkownicy mogą natychmiast wrócić na stronę z listą artykułów i wybrać inny 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 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 szybsza, a pozycja przewijania jest dokładnie zachowana. Bez bfcache nie można zagwarantować tych ulepszeń.

Krótko mówiąc, zalety bfcache dla Yahoo! JAPAN News zawiera:

  • Wzrost liczby wyświetleń stron: użytkownicy częściej poruszali się po witrynie, gdy strony były przechowywane w pamięci podręcznej za pomocą biblioteki bfcache.
  • Większe przychody: w wyniku zwiększonej liczby wyświetleń stron 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 bfcache.

Wdrożenie pamięci podręcznej stanu strony internetowej bfcache

Krótko mówiąc, bfcache nie tylko sprawia, że witryna wczytuje się błyskawicznie, ale też może zmniejszyć tarcie w ogólnym doświadczeniu użytkownika i zwiększyć zaangażowanie w witrynie.

Zespół Chrome stale analizuje blokowanie bfcache, zwłaszcza wymienione przyczyny, ponieważ są to najczęstsze powody, dla których nie jest używany bfcache. W przyszłości mogą one nie blokować korzystania z pamięci podręcznej stanu strony internetowej, ale nie musisz czekać do tego czasu. Możesz korzystać z bfcache, sprawdzając obecnie blokujące go elementy i unikaj tych typowych (i innych rzadziej spotykanych) wzorców.