Chrome Early Hints preload가 안 될 때, 캐시 설정과 요청 확인법

서버를 고치기 전에 DevTools의 캐시 설정을 본다

103 응답에 preload 링크가 있는데 선행 요청이 보이지 않는다면 Network의 Disable cache를 먼저 확인한다. Chrome은 이 설정이 켜져 있을 때 해당 preload를 무시한다. 서버가 힌트를 보냈다는 사실과 브라우저가 그 힌트를 사용했다는 사실은 다르다.

10월 20일 공개된 DevTools 업데이트 소개는 이 조건에 대한 경고를 추가했다고 밝혔다. 문서 제목은 11월 업데이트지만 Chrome 155·156에 들어온 기능을 소개한다. 경고는 Early Hints 헤더 섹션에 나타나며, 캐시 설정 때문에 preload가 무시되는 이유를 설명한다.

이 경고를 서버 장애나 모든 preload의 실패로 읽으면 진단 방향이 달라진다. 우선 체크박스를 해제하고 같은 페이지를 다시 로드해 103 기반 선행 로딩을 확인해야 한다.

문서의 103 헤더와 CSS·폰트의 Initiator를 따로 본다

확인 순서는 힌트 수신 → 대상 리소스 요청이다. Chrome의 Early Hints 문서는 문서 요청에서 헤더를, 미리 로드한 리소스에서 Initiator와 Size를 확인하는 방법을 설명한다.

1. DevTools의 Network를 열고 Disable cache를 해제한다.
2. 페이지를 새로고침한 뒤 최상위 문서 요청을 선택한다.
3. Headers의 Early Hints Headers에서 대상 URL과 rel=preload를 확인한다.
4. 대상 CSS나 폰트 요청으로 이동해 Initiator의 Early-hints 표시를 확인한다. 공식 예제에서는 Size가 (Disk cache)로 나타난다.

(Disk cache)만으로 Early Hints가 동작했다고 결론 내릴 수는 없다. 일반 캐시 로드도 있으므로 힌트의 URL과 요청을 연결해서 읽어야 한다. 반대로 103 헤더만 있으면 수신은 확인했지만 실제 사용 여부는 아직 확인하지 않은 상태다.

첫 방문처럼 보려면 캐시를 비우고, 사용 자체는 허용한다

오래된 캐시를 없애고 싶은 목적이라면 Disable cache를 켜는 대신 캐시를 한 번 비울 수 있다. Network 공식 참고 문서는 요청 목록에서 마우스 오른쪽 버튼을 눌러 Clear browser cache를 선택하는 방법을 안내한다.

캐시 비우기는 저장된 응답을 지우는 작업이다. 캐시 비활성화는 이후의 캐시 사용도 막는 설정이다. Early Hints의 preload 동작을 살피려면 비운 뒤에도 Disable cache는 해제한 상태로 다시 로드한다. 다른 탭과 사이트의 캐시 사용에도 영향을 줄 수 있는 브라우저 캐시 삭제라는 점은 작업 전에 구분해야 한다.

일반적인 캐시 없는 로딩을 확인하려는 테스트에서는 Disable cache가 유용하다. 다만 그 결과를 Early Hints가 허용된 로딩과 같은 조건으로 비교해서는 안 된다. 측정 기록에 체크박스 상태를 함께 남겨야 같은 조건으로 다시 볼 수 있다.

캐시를 켰는데도 안 된다면 인증서와 응답 조건을 확인한다

Chrome이 밝힌 제한 사항에 따르면 Early Hints로 가져온 리소스는 HTTP 캐시에 저장됐다가 문서가 사용한다. 캐시할 수 없는 응답은 다시 요청될 수 있다. 로컬 HTTPS의 인증서가 신뢰되지 않으면 경고 화면을 넘겨 접속해도 HTTP 캐시는 비활성화된다.

적용 대상도 최상위 문서의 탐색 요청이다. 일반 API 요청에 같은 헤더를 붙이는 것만으로 같은 동작을 기대해서는 안 된다. 우선 문서에 103이 도착했는지, 캐시를 허용했는지, 대상 응답을 캐시할 수 있는지 순서대로 나눠 확인하면 서버 설정과 브라우저 테스트 조건을 혼동하지 않을 수 있다.