페이지를 뒤로-앞으로 캐시에서 복원할 수 있는지 확인합니다.

배경

뒤로-앞으로 캐시 (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에서 이러한 제한사항을 제거합니다.
  • 조치할 수 없음: 이 페이지에서 문제를 해결할 수 없습니다. 페이지에서 제어할 수 없는 항목이 캐싱을 방지합니다.

Lighthouse 뒤로-앞으로 캐시 감사 결과 예시

자료