Кэш назад/вперед помог 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 > Приложения > Кэш назад/вперед . Альтернативно вы можете использовать API notRestoredReasons , чтобы получить более полное представление о блокировщиках на основе фактического использования в полевых условиях.

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

Заменены обработчики выгрузки : вместо события unload использовалось событие pagehide , поскольку unload очень ненадежна . Permissions-Policy: unload=() была запущена в Chrome 115, чтобы веб-сайты могли надежно удалять обработчики unload для определенных источников. Chrome планирует постепенно отказываться от обработчиков unload .
Изменено cache-control : изменение заголовка Cache-control с no-store (CCNS) на 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 , просмотрите блок cache-control .

A/B-тестирование для демонстрации эффекта

Чтобы измерить влияние 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 навигация вперед/назад между страницами становится мгновенной, пользователи, как правило, остаются на страницах дольше, тем самым увеличивая количество просмотров рекламы, что приводит к увеличению доходов от рекламы.

Бесперебойный пользовательский опыт

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

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

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

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

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

Эта проблема решена, когда обратная навигация поддерживается bfcache: позиция прокрутки немедленно и правильно восстанавливается.

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

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

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

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

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

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

Внедрите bfcache прямо сейчас

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

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