뒤로-앞으로 캐시 (bfcache)로, 즉시 뒤로/앞으로 탐색을 사용할 수 있도록 하는 브라우저 최적화 기능입니다. 탐색 기능을 많이 사용하는 웹사이트에서 특히 사용자의 탐색 환경을 크게 개선합니다.
bfcache에 관한 web.dev 도움말
Yahoo! 일본에서 가장 인기 있는 뉴스 플랫폼 중 하나인 JAPAN News는 bfcache 적중률을 높이기 위한 공동의 노력을 기울였고, 그 결과 사용자 경험과 비즈니스가 크게 개선되었습니다. 특히 A/B 테스트 결과에 따르면 bfcache를 사용하는 페이지에서 광고 수익이 9% 증가했습니다.
이 사례 연구에서는 Yahoo! JAPAN News는 bfcache의 차단 요인을 없애고 bfcache로 사용자 환경이 크게 개선된 방법을 소개했습니다.
bfcache 차단기 삭제
bfcache는 Chrome 86부터 사용되었으며, 모든 최신 브라우저에서도 사용할 수 있습니다. 하지만 bfcache를 최대한 활용하려면 웹사이트에서 잠재적인 차단 기능을 제거해야 합니다. Yahoo! JAPAN 뉴스에서 발생한 문제는 다음과 같습니다.
unload
핸들러 사용Cache-control
헤더에no-store
지시어 사용
Chrome 개발자 도구 > 애플리케이션 > 뒤로/앞으로 캐시 (세부정보)로 이동하거나 notRestoredReasons
API를 사용하여 실제 사용 현황을 토대로 차단기를 보다 종합적으로 파악하여 웹사이트에 어떤 주요 차단 요소가 있는지 확인할 수 있습니다.
Yahoo! JAPAN News에서 방해 요인을 제거했습니다.
- 언로드 핸들러:
unload
이벤트는 매우 불안정합니다.unload
이벤트 대신pagehide
이벤트를 사용합니다. 또한 웹사이트에서 특정 출처의unload
핸들러를 안정적으로 삭제할 수 있도록permission-policy: unload
가 Chrome 115에서 출시되었습니다. Chrome에서는unload
핸들러도 점진적으로 지원 중단할 계획입니다. Cache-control: no-store
(또는 줄여서 CCNS):Cache-control
헤더를no-store
에서no-cache
로 변경하면 bfcache를 사용 설정할 수 있습니다. 또한 Chrome은 특정 상황에서no-store
헤더가 있는 경우에도 bfcache 캐싱을 시작할 계획입니다.
CCNS는 어떤 경우에도 캐시해서는 안 되는 페이지를 위한 것입니다. 여기에는 CCNS가 있는 모든 페이지는 CDN 에지 서버 및 로컬 캐시를 비롯한 캐싱 기술의 이점을 누릴 수 없다는 점에 주의해야 합니다.
CCNS 헤더가 있다면 웹사이트에 적합한 Cache-control
전략이 무엇인지 논의할 수 있는 좋은 기회입니다. no-store
와 no-cache
의 주요 차이점은 다음과 같습니다.
Cache-control
옵션에 대해 자세히 알아보려면 이 플로우 차트가 도움이 됩니다.
수치로 보는 bfcache의 영향
bfcache의 영향을 측정하기 위해, Yahoo! JAPAN News는 2주 동안 A/B 테스트를 진행하여 한 그룹에는 bfcache 수정사항이 있는 페이지의 버전을 다른 그룹에는 제공하고, 다른 그룹에는 bfcache를 사용할 수 없는 페이지가 있는 버전을 제공했습니다. 테스트에서 유의미한 결과를 얻을 수 있도록 트래픽이 많은 URL 경로를 선택했습니다. 두 버전 간에 다른 시각적, 기능적 차이는 없었습니다.
다음은 웹사이트를 bfcache와 포함하지 않은 웹사이트와 비교하는 동영상입니다. 뒤로 탐색 또는 앞으로 탐색 시 bfcache를 사용 설정한 웹사이트가 훨씬 빠르게 로드되는 것을 확인할 수 있습니다.
정말로 유망한 것은 bfcache를 사용 설정한 그룹이 특히 휴대기기에서 페이지 조회수와 광고 수익이 크게 증가했다는 것입니다.
다음은 Yahoo! JAPAN News에서 bfcache A/B 테스트를 진행했습니다. 자세한 내용은 우수사례 문서를 참조하세요.
bfcache를 사용해 페이지 간의 뒤로/앞으로 탐색이 즉각적으로 바뀌면 사용자가 페이지에 더 오래 머무르는 경향이 있어 광고 조회수가 증가하고 광고 수익이 증가합니다.
bfcache로 웹사이트에서 원활한 사용자 경험 개선
페이지가 즉시 로드되면 탐색이 더 원활해집니다.
Yahoo! JAPAN 뉴스의 주요 사용자 경험 중 하나는 다음과 같습니다.
- 기사 목록으로 이동
- 읽을 기사 1개를 클릭하세요.
- 기사 목록으로 돌아가기
- 읽으려면 다른 기사를 클릭하세요.
bfcache를 사용하기 전에는 사용자가 기사를 다 읽은 후 (2단계) 기사 목록 페이지가 다시 로드될 때까지 기다려야 했습니다. 이는 기사 목록으로 돌아가 읽을 다른 기사를 선택하려는 사용자에게는 마찰 요소가 될 수 있습니다.
뒤로 탐색 시 마찰을 일으키는 또 다른 원인은 스크롤 위치였습니다. 실제로 브라우저는 뒤로 탐색이 발생할 때 스크롤 위치를 복원하려고 시도합니다. 그러나 동적으로 추가된 광고나 기타 레이아웃 변경으로 인해 스크롤 위치가 잘못 복원되는 경우가 많아 사용자가 방향성을 잃거나 페이지에서 나갈 수도 있습니다. 뒤로 탐색이 bfcache에서 지원되는 경우 이는 문제가 되지 않습니다. 스크롤 위치가 즉시 올바르게 복원됩니다.
이제 bfcache를 사용해 사용자 여정에서 발생하는 불편함이 사라졌습니다. 사용자는 기사 목록 페이지가 로드될 때까지 기다릴 필요 없이 바로 기사 목록 페이지로 돌아가 다른 기사를 선택해 읽을 수 있습니다.
사용자가 한 기사에서 다른 기사로 직접 이동했다가 돌아올 때도 마찬가지입니다.
간단히 말해 Yahoo!에서 bfcache를 사용할 경우의 JAPAN 뉴스에는 다음이 포함됩니다.
- 페이지 조회수 증가: 페이지가 bfcache로 캐시된 경우 사용자가 웹사이트 내에서 탐색할 가능성이 높았습니다.
- 수익 증가: 세션당 페이지 조회수가 증가하면서 광고 노출수가 증가했으며, 그 결과 bfcache를 사용하지 않은 테스트 그룹에 비해 모바일 수익이 9% 증가했습니다.
결론
간단히 말해, bfcache를 이용하면 웹사이트를 즉시 이용할 수 있을 뿐 아니라 전반적인 사용자 경험의 마찰을 줄이고 웹사이트 참여도를 높일 수 있습니다.
Chrome팀에서는 지속적으로 bfcache 차단기를 살펴보고 있습니다. 특히 이 도움말에 나온 두 가지 이유는 bfcache가 사용되지 않는 일반적인 이유이기 때문입니다. 앞으로는 이로 인해 bfcache 사용이 차단되지 않을 수도 있지만 그때까지 기다릴 필요는 없습니다. bfcache 차단기를 살펴보고 이러한 일반적이고 덜 일반적인 패턴을 피하면 bfcache의 이점을 누릴 수 있습니다.