뒤로-앞으로 캐시가 Yahoo! JAPAN 뉴스의 모바일 수익 9% 증대

Yuriko Hirota

뒤로-앞으로 캐시 (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: no-store`	`Cache-control: 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 적중률	+54.03포인트 (0.04% → 54.07%)	+47.28포인트 (0.02% → 47.30%)
페이지 조회	2.26%증가	0.65% 증가
광고 수익	9.0%증가	0.6% 증가

bfcache를 사용해 페이지 간의 뒤로/앞으로 탐색이 즉각적으로 바뀌면 사용자가 페이지에 더 오래 머무르는 경향이 있어 광고 조회수가 증가하고 광고 수익이 증가합니다.

bfcache로 웹사이트에서 원활한 사용자 경험 개선

페이지가 즉시 로드되면 탐색이 더 원활해집니다.

Yahoo! JAPAN 뉴스의 주요 사용자 경험 중 하나는 다음과 같습니다.

기사 목록으로 이동
읽을 기사 1개를 클릭하세요.
기사 목록으로 돌아가기
읽으려면 다른 기사를 클릭하세요.

bfcache를 사용하기 전에는 사용자가 기사를 다 읽은 후 (2단계) 기사 목록 페이지가 다시 로드될 때까지 기다려야 했습니다. 이는 기사 목록으로 돌아가 읽을 다른 기사를 선택하려는 사용자에게는 마찰 요소가 될 수 있습니다.

뒤로 탐색 시 마찰을 일으키는 또 다른 원인은 스크롤 위치였습니다. 실제로 브라우저는 뒤로 탐색이 발생할 때 스크롤 위치를 복원하려고 시도합니다. 그러나 동적으로 추가된 광고나 기타 레이아웃 변경으로 인해 스크롤 위치가 잘못 복원되는 경우가 많아 사용자가 방향성을 잃거나 페이지에서 나갈 수도 있습니다. 뒤로 탐색이 bfcache에서 지원되는 경우 이는 문제가 되지 않습니다. 스크롤 위치가 즉시 올바르게 복원됩니다.

기사에서 기사 목록 페이지로 이동하는 역방향 이동을 보여주는 두 개의 슬라이드입니다. 맨 위는 bfcache로 처리되는 프로세스의 슬라이드로, 0.3초가 걸리는 반면, 하단은 bfcache 없이 처리되는 동일한 프로세스(3.3초)입니다.

이제 bfcache를 사용해 사용자 여정에서 발생하는 불편함이 사라졌습니다. 사용자는 기사 목록 페이지가 로드될 때까지 기다릴 필요 없이 바로 기사 목록 페이지로 돌아가 다른 기사를 선택해 읽을 수 있습니다.

사용자가 한 기사에서 다른 기사로 직접 이동했다가 돌아올 때도 마찬가지입니다.

bfcache를 사용하거나 사용하지 않은 상태에서 기사에서 기사 목록 페이지로의 뒤로 탐색 흐름을 보여주는 애니메이션 이미지입니다. bfcache를 사용하면 뒤로 탐색이 빨라질 뿐만 아니라 스크롤 위치가 정확하게 유지됩니다. bfcache가 없으면 이러한 보장이 불가능합니다.

간단히 말해 Yahoo!에서 bfcache를 사용할 경우의 JAPAN 뉴스에는 다음이 포함됩니다.

페이지 조회수 증가: 페이지가 bfcache로 캐시된 경우 사용자가 웹사이트 내에서 탐색할 가능성이 높았습니다.
수익 증가: 세션당 페이지 조회수가 증가하면서 광고 노출수가 증가했으며, 그 결과 bfcache를 사용하지 않은 테스트 그룹에 비해 모바일 수익이 9% 증가했습니다.

결론

간단히 말해, bfcache를 이용하면 웹사이트를 즉시 이용할 수 있을 뿐 아니라 전반적인 사용자 경험의 마찰을 줄이고 웹사이트 참여도를 높일 수 있습니다.

Chrome팀에서는 지속적으로 bfcache 차단기를 살펴보고 있습니다. 특히 이 도움말에 나온 두 가지 이유는 bfcache가 사용되지 않는 일반적인 이유이기 때문입니다. 앞으로는 이로 인해 bfcache 사용이 차단되지 않을 수도 있지만 그때까지 기다릴 필요는 없습니다. bfcache 차단기를 살펴보고 이러한 일반적이고 덜 일반적인 패턴을 피하면 bfcache의 이점을 누릴 수 있습니다.