뒤로 가기를 할 때 페이지 전체가 다시 로드된다면 뒤로/앞으로 캐시인 bfcache를 확인하세요. 유용한 테스트를 하려면 구체적인 탐색 경로와 확인된 초기 상태가 필요합니다. 한 번 성공했다고 해서 이후의 모든 뒤로 가기에서 페이지가 복원되는 것은 아닙니다.
탐색 경로 정하기
공개된 상품 페이지나 게시글을 선택하세요. 다른 페이지로 이동한 뒤 브라우저의 뒤로 버튼으로 돌아옵니다. 브라우저, 버전, 사용한 페이지를 기록하세요. 돌아온 뒤에도 필터, 스크롤 위치, 표시된 콘텐츠가 올바른지 확인하세요.
Milten의 bfcache 테스트로 페이지 복원을 조사할 수 있습니다. 결과가 어떤 탐색 경로를 대상으로 하는지 확인하세요. 수동으로 다른 경로를 따라가면 결과가 달라질 수 있습니다.
브라우저에서 결과 보기
Chrome DevTools의 Application 패널에는 뒤로/앞으로 캐시 테스트가 있습니다. 테스트 결과와 복원을 막는 원인이 보고되면 그 내용을 보여 줍니다. 테스트한 브라우저와 버전을 기준으로 결과를 해석하세요.
bfcache와 HTTP 캐시는 서로 다른 방식으로 동작합니다. bfcache 가이드에서 차이를 설명합니다. 이 가이드는 web.dev에서 제공됩니다. 네트워크 요청이 빨라졌다는 사실만으로 bfcache에서 복원되었다고 판단할 수는 없습니다.
보고된 원인 조사하기
고객 데이터를 사용하지 않는 설명용 예시입니다. 진단 도구가 포함된 스크립트의 수명 주기 이벤트 핸들러를 복원 방해 요인으로 보고했다고 가정해 보겠습니다. 해당 스크립트를 찾아 핸들러의 역할을 확인하세요. 비공개 테스트 환경에서 적절한 변경 사항을 검증한 뒤 같은 탐색 경로를 다시 테스트하세요.
테스트를 통과하기 위해 캐시 헤더를 일괄적으로 바꾸지 마세요. 페이지의 목적과 정보의 최신성 및 기밀성에 관한 요구 사항을 고려하세요. bfcache 사용 조건은 브라우저에 따라서도 달라집니다.
돌아온 뒤 페이지 상태 확인하기
변경 후에는 기술적인 결과뿐 아니라 페이지 내용도 점검하세요. 가격, 장바구니 내용, 세션 상태를 다루는 페이지라면 해당 정보가 올바른지 확인해야 합니다. 복원된 페이지에 사용자의 오해를 부를 만한 오래된 정보가 표시되어서는 안 됩니다.
사용자가 실제로 이용하는 브라우저에서 같은 경로를 반복해서 테스트하세요. 성공, 실패, 미실행을 구분해 기록하세요. 돌아온 뒤 상호작용이 느리다면 INP 가이드를 참고하세요.
항상 강제로 복원할 수 있나요?
캐시 사용 여부는 브라우저가 결정합니다. 테스트가 성공했다는 것은 해당 시도에서 복원이 관측되었다는 뜻입니다.
캐시 제한을 모두 없애야 하나요?
먼저 보고된 원인과 해당 제한의 목적을 확인하세요. 변경 사항을 평가할 때는 보안 요구 사항과 표시되는 정보의 정확성도 고려해야 합니다.
페이지의 bfcache를 테스트하세요. 최초 로딩을 조사하려면 속도 테스트를 이용하세요.
