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