배경
뒤로-앞으로 캐시 (bfcache)는 페이지가 탐색 기록에서 복원될 때를 대비해 페이지의 스냅샷을 메모리에 저장합니다. 이렇게 하면 페이지로의 돌아가기 탐색 속도가 크게 빨라지지만 일부 브라우저 API (예: 언로드 리스너)로 인해 bfcache가 실패하고 페이지가 정상적으로 로드될 수 있습니다.
Lighthouse에서 bfcache 실패를 감지하는 방법
독립형 탐색
독립형 탐색이 끝나면 Lighthouse는 탐색 기록에서 페이지를 복원하여 bfcache가 사용 중인지 감지하려고 시도합니다.
사용자 흐름
Lighthouse는 사용자 흐름을 실행할 때 탐색에서 bfcache를 적극적으로 테스트하지 않습니다. 이는 모든 탐색이 끝날 때 페이지에서 나갔다가 다시 돌아오면 페이지의 대부분의 사용자 환경이 반영되지 않기 때문입니다.
하지만 사용자 여정의 일부로 기록 탐색을 포함하여 시간 범위 모드에서 bfcache 사용을 테스트할 수는 있습니다. 예를 들면 다음과 같습니다.
const flow = await startFlow(page);
// This navigation will not test the bfcache
// because it is part of a user flow.
await flow.navigate('https://example.com');
// This timespan will try to restore the page from the bfcache.
// Problems restoring from the bfcache are surfaced in this report.
await flow.startTimespan();
await page.goto('https://example2.com');
await page.goBack();
await flow.endTimespan();
bfcache 실패 이해
어떠한 이유로든 페이지를 bfcache에서 복원할 수 없는 경우 감사에 실패합니다. Lighthouse에는 bfcache를 사용할 수 없는 이유와 문제를 일으킨 프레임이 표시됩니다. 실패 이유는 다음 세 가지 유형 중 하나일 수 있습니다.
- 조치 가능: 이러한 문제를 해결하여 캐싱을 사용 설정할 수 있습니다.
- 지원 대기 중: Chrome에서 아직 이러한 기능을 지원하지 않으므로 캐싱이 방지됩니다. 하지만 지원이 시작되면 Chrome에서 이러한 제한이 사라집니다.
- 조치 불가: 이 페이지에서는 이러한 문제를 해결할 수 없습니다. 페이지에서 제어할 수 없는 요인으로 인해 캐싱이 차단됩니다.
