Кэш назад/вперед помог 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! JAPAN News, относятся:

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

Проверить наличие основных блокировщиков на вашем веб-сайте можно, перейдя в Инструменты разработчика Chrome > Приложения > Кэш "Назад/Вперед" . В качестве альтернативы, вы можете использовать API notRestoredReasons , чтобы получить более полное представление о блокировщиках на основе фактического использования сайта.

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

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

Ниже приведены подробности о влиянии, отмеченном 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! JAPAN News включают в себя:

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

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

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

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