Как кэш назад/вперед помог Yahoo! JAPAN News увеличили доходы на мобильных устройствах на 9%

Yuriko Hirota

Кэш назад/вперед (или bfcache) — это оптимизация браузера, которая обеспечивает мгновенную навигацию вперед и назад. Это значительно улучшает возможности просмотра для пользователей, особенно для веб-сайтов, которые включают в себя множество переходов вперед и назад.
статья на web.dev о bfcache

Yahoo! JAPAN News, одна из самых популярных новостных платформ в Японии, предприняла согласованные усилия по улучшению показателя посещаемости bfcache и в результате добилась значительного улучшения пользовательского опыта и улучшения бизнеса. В частности, результаты проведенного ими A/B-теста показали, что страницы, использующие bfcache , увеличили доход от рекламы на 9% .

В этом тематическом исследовании объясняется, как Yahoo! JAPAN News удалили блокировщики bfcache и рассказали о том, как bfcache значительно улучшил взаимодействие с пользователем.

Удаление блокировщиков для bfcache

bfcache доступен начиная с Chrome 86, а также доступен во всех современных браузерах. Однако для того, чтобы в полной мере воспользоваться преимуществами bfcache, необходимо удалить потенциальные блокировщики на своем веб-сайте. Некоторые основные блокировщики Yahoo! Новости Японии:

Использование обработчиков unload
Использование директивы no-store в заголовках Cache-control

Вы можете проверить, какие основные блокировщики существуют для вашего веб-сайта, перейдя в Chrome Dev Tools > Applications > Back/forward Cache ( подробнее ) или воспользовавшись API notRestoredReasons , чтобы получить более полное представление о блокировщиках на основе фактического использования в полевых условиях. .

Вот как Yahoo! JAPAN News удалили свои блокировщики:

Обработчики выгрузки: используйте событие pagehide вместо события unload , поскольку событие unload очень ненадежно . Кроме того, в Chrome 115 была запущена permission-policy: unload , чтобы веб-сайты могли надежно удалять обработчики unload для определенных источников. Chrome также планирует постепенно прекратить поддержку обработчиков unload .
Cache-control: no-store (или сокращенно CCNS): изменение заголовка Cache-control с no-store на no-cache может включить bfcache. Chrome также планирует начать кеширование для bfcache даже с заголовком no-store при определенных обстоятельствах .

CCNS предназначен для страниц, которые ни при каких обстоятельствах не следует кэшировать. Это связано с оговоркой, что любая страница с CCNS не сможет извлечь выгоду из какой-либо технологии кэширования, включая пограничные серверы CDN и локальные кэши.

Если у вас есть заголовок CCNS, это прекрасная возможность обсудить, какие стратегии Cache-control подходят для вашего веб-сайта. Вот основные различия между no-store и no-cache .

Cache-control: no-store Cache-control: no-cache

`Cache-control: no-store`	`Cache-control: no-cache`
Ответ не может храниться в кешах. Следовательно, ответ извлекается полностью на каждый запрос. Это следует использовать для частных ответов.	Ответ разрешено хранить в кешах, если он повторно проверяется на сервере перед каждым использованием. Это должны быть публичные ответы, которые вы хотите проверять каждый раз (например, домашняя страница новостного веб-сайта — хотя даже в этом случае очень короткое время кэширования может повысить производительность и разгрузить работу с основных серверов).

Ответ не может храниться в кешах.
Следовательно, ответ извлекается полностью на каждый запрос.
Это следует использовать для частных ответов.

Ответ разрешено хранить в кешах, если он повторно проверяется на сервере перед каждым использованием.
Это должны быть публичные ответы, которые вы хотите проверять каждый раз (например, домашняя страница новостного веб-сайта — хотя даже в этом случае очень короткое время кэширования может повысить производительность и разгрузить работу с основных серверов).

Если вы хотите узнать больше о параметрах Cache-control , эта блок-схема вам очень поможет.

Влияние bfcache в цифрах

Чтобы измерить влияние bfcache, Yahoo! JAPAN News провела A/B-тестирование в течение двух недель, в ходе которого они предоставили версию своих страниц с исправлениями bfcache одной группе, а версию со страницами, не имеющими права на bfcache, — другой. Они выбрали URL-адреса со значительным объемом трафика, чтобы тест мог дать значимые результаты. Других визуальных или функциональных различий между двумя версиями не было.

Вот видео, сравнивающее сайт с bfcache и без bfcache. Вы можете видеть, что веб-сайт с включенным bfcache загружается значительно быстрее при навигации назад или вперед.

Что действительно многообещающе, так это то, что группа с включенным bfcache добилась значительного увеличения количества просмотров страниц и доходов от рекламы , особенно на мобильных устройствах.

Вот подробности о влиянии, наблюдаемом Yahoo! JAPAN News с их A/B-тестом bfcache. (Дополнительную информацию можно найти в их статье с практическим примером ).

Метрики	% прироста (мобильные устройства)	Прирост % (компьютерная система)
частота попаданий в bfcache	+54,03 балла (0,04% → 54,07%)	+47,28 балла (0,02% → 47,30%)
Просмотры страниц	+2,26%	+0,65%
Доход от рекламы	+9,0%	+0,6%

Когда переходы вперед и назад между страницами с помощью bfcache становятся мгновенными, пользователи, как правило, остаются на страницах дольше, тем самым увеличивая количество просмотров рекламы, что приводит к увеличению доходов от рекламы.

bfcache повышает удобство работы пользователей на веб-сайте

Когда страницы загружаются мгновенно, навигация становится более плавной.

В Yahoo! JAPAN News, один из основных путей пользователя заключается в следующем:

Перейти к списку статей
Нажмите на одну статью, чтобы прочитать
Вернуться к списку статей
Нажмите на другую статью, чтобы прочитать

До появления bfcache, когда пользователи заканчивали читать статью (шаг 2), им приходилось ждать повторной загрузки страницы со списком статей. Это может быть фактором разногласий для пользователей, которые просто хотят вернуться к списку статей, чтобы выбрать другую статью для чтения.

Еще одним источником проблем при навигации назад была позиция прокрутки. На практике браузер пытается восстановить положение прокрутки, когда происходит обратная навигация. Однако из-за динамически добавляемой рекламы или других изменений макета положение прокрутки часто восстанавливается неправильно, что может привести к тому, что пользователи потеряют ориентацию или даже покинут страницу. Это никогда не является проблемой, если обратная навигация осуществляется с помощью bfcache: позиция прокрутки немедленно и правильно восстанавливается.

Две диафильмы обратной навигации от статьи к странице со списком статей. Вверху — это диафильм процесса, обрабатываемого с помощью bfcache, который занимает 0,3 секунды, а внизу — тот же процесс, обрабатываемый без bfcache, который занимает 3,3 секунды.

Теперь, благодаря bfcache, трудности в пути пользователя исчезли — пользователи могут мгновенно вернуться на страницу со списком статей и выбрать другую статью для чтения, не дожидаясь загрузки страницы со списком статей.

То же самое происходит, когда пользователи переходят от одной статьи непосредственно к другой и обратно:

Анимированное изображение, показывающее обратный поток навигации от статьи к странице со списком статей с bfcache и без него. С bfcache обратная навигация не только быстрее, но и точно сохраняется положение прокрутки. Без bfcache эти гарантии не могут быть предоставлены.

Вкратце, преимущества использования bfcache для Yahoo! Новости Японии включают в себя:

Увеличение количества просмотров страниц: пользователи с большей вероятностью перемещались по веб-сайту, когда страницы были кэшированы с помощью bfcache.
Увеличение дохода. В результате увеличения количества просмотров страниц за сеанс увеличилось количество показов рекламы, что привело к увеличению дохода на мобильных устройствах на 9 % по сравнению с тестовой группой без bfcache.

Заключение

Короче говоря, bfcache не только делает ваш веб-сайт мгновенным, но также может уменьшить неудобства в общем взаимодействии с пользователем и повысить вовлеченность вашего веб-сайта.

Команда Chrome постоянно изучает блокировщики bfcache, особенно две причины, перечисленные в этой статье, поскольку они являются распространенными причинами, по которым bfcache не используется. В будущем это, возможно, не помешает использованию bfcache, но ждать до этого момента не нужно. Вы можете извлечь выгоду из bfcache, взглянув на свои блокировщики bfcache и избегая этих распространенных и других менее распространенных шаблонов.