Кэш назад/вперед (или 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
, эта блок-схема вам очень поможет.
Влияние bfcache в цифрах
Чтобы измерить влияние bfcache, Yahoo! JAPAN News провела A/B-тестирование в течение двух недель, в ходе которого они предоставили версию своих страниц с исправлениями bfcache одной группе, а версию со страницами, не имеющими права на bfcache, — другой. Они выбрали URL-адреса со значительным объемом трафика, чтобы тест мог дать значимые результаты. Других визуальных или функциональных различий между двумя версиями не было.
Вот видео, сравнивающее сайт с bfcache и без bfcache. Вы можете видеть, что веб-сайт с включенным bfcache загружается значительно быстрее при навигации назад или вперед.
Что действительно многообещающе, так это то, что группа с включенным bfcache добилась значительного увеличения количества просмотров страниц и доходов от рекламы , особенно на мобильных устройствах.
Вот подробности о влиянии, наблюдаемом Yahoo! JAPAN News с их A/B-тестом bfcache. (Дополнительную информацию можно найти в их статье с практическим примером ).
Когда переходы вперед и назад между страницами с помощью bfcache становятся мгновенными, пользователи, как правило, остаются на страницах дольше, тем самым увеличивая количество просмотров рекламы, что приводит к увеличению доходов от рекламы.
bfcache повышает удобство работы пользователей на веб-сайте
Когда страницы загружаются мгновенно, навигация становится более плавной.
В Yahoo! JAPAN News, один из основных путей пользователя заключается в следующем:
- Перейти к списку статей
- Нажмите на одну статью, чтобы прочитать
- Вернуться к списку статей
- Нажмите на другую статью, чтобы прочитать
До появления bfcache, когда пользователи заканчивали читать статью (шаг 2), им приходилось ждать повторной загрузки страницы со списком статей. Это может быть фактором разногласий для пользователей, которые просто хотят вернуться к списку статей, чтобы выбрать другую статью для чтения.
Еще одним источником проблем при навигации назад была позиция прокрутки. На практике браузер пытается восстановить положение прокрутки, когда происходит обратная навигация. Однако из-за динамически добавляемой рекламы или других изменений макета положение прокрутки часто восстанавливается неправильно, что может привести к тому, что пользователи потеряют ориентацию или даже покинут страницу. Это никогда не является проблемой, если обратная навигация осуществляется с помощью bfcache: позиция прокрутки немедленно и правильно восстанавливается.
Теперь, благодаря bfcache, трудности в пути пользователя исчезли — пользователи могут мгновенно вернуться на страницу со списком статей и выбрать другую статью для чтения, не дожидаясь загрузки страницы со списком статей.
То же самое происходит, когда пользователи переходят от одной статьи непосредственно к другой и обратно:
Вкратце, преимущества использования bfcache для Yahoo! Новости Японии включают в себя:
- Увеличение количества просмотров страниц: пользователи с большей вероятностью перемещались по веб-сайту, когда страницы были кэшированы с помощью bfcache.
- Увеличение дохода. В результате увеличения количества просмотров страниц за сеанс увеличилось количество показов рекламы, что привело к увеличению дохода на мобильных устройствах на 9 % по сравнению с тестовой группой без bfcache.
Заключение
Короче говоря, bfcache не только делает ваш веб-сайт мгновенным, но также может уменьшить неудобства в общем взаимодействии с пользователем и повысить вовлеченность вашего веб-сайта.
Команда Chrome постоянно изучает блокировщики bfcache, особенно две причины, перечисленные в этой статье, поскольку они являются распространенными причинами, по которым bfcache не используется. В будущем это, возможно, не помешает использованию bfcache, но ждать до этого момента не нужно. Вы можете извлечь выгоду из bfcache, взглянув на свои блокировщики bfcache и избегая этих распространенных и других менее распространенных шаблонов.