⚡ 캐시 헤더 분석기
Cache-Control, ETag, Expires, Vary, Age 분석 — max-age / s-maxage를 사람이 읽기 쉽게. 주요 CDN(Cloudflare, CloudFront, Fastly, Akamai, Vercel) 자동 감지.
📚 Cache-Control 참조
• public: CDN/프록시 포함 모든 캐시
• private: 브라우저만(공유 캐시 불가)
• no-store: 어디에서도 캐시하지 않음
• no-cache: 캐시는 가능하나 매번 재검증
• max-age=N: N초 동안 유효
• s-maxage=N: 공유 캐시(CDN)에만 적용되는 max-age
• immutable: 재검증 불필요 — 해시 자산에 적합
• stale-while-revalidate=N: N초 동안 stale 응답 후 백그라운드 재검증
• stale-if-error=N: 원본 오류 시 N초 동안 stale 응답
📖 이 진단으로 알 수 있는 것
이 진단은 지정한 URL 의 응답 헤더에서 Cache-Control · ETag · Last-Modified · Expires 와 CDN 고유 헤더를 꺼내 디렉티브를 분해해 표시합니다. 판정할 수 있는 것은 그렇게 지시하고 있는가까지이며 실제로 캐시되었는지는 알 수 없습니다. 브라우저는 용량이 빠듯하면 지시와 무관하게 버리고, CDN 은 자사 규칙으로 덮어쓸 수 있습니다.
| 판정 항목 | 무엇을 보는가 | 걸렸을 때의 대처 |
|---|---|---|
| Cache-Control 를 쓰지 않음 | 지정이 없으면 캐시되지 않는 것이 아니라 캐시 측이 마음대로 수명을 추정합니다(휴리스틱 캐시). Last-Modified 가 있으면 최종 갱신부터의 경과 시간의 10% 정도를 유효 기간으로 보는 구현이 일반적입니다. 1년 전에 갱신한 페이지라면 대략 1개월 캐시될 수 있다는 뜻입니다. |
모든 응답에 명시합니다. HTML 은 no-cache(저장은 하되 매번 서버에 확인), 내용 해시가 붙은 자산은 max-age=31536000, immutable, 개인정보를 포함하는 응답은 private, no-store 세 패턴이면 거의 충분합니다. no-cache 와 no-store 는 이름이 헷갈리지만 전자는 저장하고 후자는 저장하지 않습니다. |
| 가변 파일에 긴 max-age 를 붙임 | style.css 같은 고정 이름 파일에 1년짜리 max-age 를 붙이면 갱신해도 기존 방문자에게는 1년간 닿지 않습니다. 게다가 브라우저에 배포해 버린 캐시는 서버 측에서 취소할 수단이 없습니다. CDN 퍼지가 듣는 것은 엣지까지이고 이용자 단말에는 닿지 않기 때문입니다. |
긴 TTL 은 갱신하면 파일명이 바뀌는 설계와 세트로만 씁니다. app.4f2c1a.css 처럼 내용 해시를 파일명에 넣고 HTML 쪽 참조를 고쳐 쓰는 형태입니다. 이 구성이라면 immutable 을 붙여도 안전하고 새로고침해도 재검증조차 발생하지 않습니다. 이미 긴 TTL 을 배포해 버렸다면 파일명을 바꾸고 옛것을 포기하는 것이 유일한 회복 수단입니다. |
| 개인화된 응답에 public 이 붙어 있음 | 로그인 이름이나 장바구니 내용을 포함한 페이지에 public(또는 s-maxage)이 붙으면 공유 캐시가 그것을 저장해 다음의 다른 이용자에게 그대로 배포합니다. 타인의 개인정보가 표시되는, 캐시 설정에서 일어날 수 있는 최악의 사고입니다. CDN 도입 직후에 발각되는 경우가 많은 문제입니다. |
인증 후의 응답에는 Cache-Control: private, no-store 를 돌려줍니다. Vary: Cookie 로도 이론상 분리할 수 있지만 쿠키 값마다 다른 엔트리가 되므로 사실상 캐시가 듣지 않게 되어 CDN 의 부하 대책으로는 실패합니다. 익명용과 인증용으로 경로나 서브도메인을 나누고 전자만 캐시 가능하게 하는 설계가 확실합니다. |
캐시의 무서움은 실수가 자기 손을 떠나 계속 남는다는 데 있습니다. 설정을 고쳐도 이미 배포된 지시는 취소할 수 없습니다. 그래서 망설여지면 짧게 시작해 나중에 늘리는 것이 철칙입니다. stale-while-revalidate 를 함께 쓰면 만료 순간에 기다리게 하지 않고 옛 내용을 돌려주면서 뒤에서 갱신할 수 있으므로 짧은 max-age 로도 체감 속도를 떨어뜨리지 않습니다. CDN 을 쓴다면 max-age(브라우저용)는 짧게, s-maxage(CDN 용)는 길게, 퍼지로 즉시 반영하는 조합이 다루기 쉬운 구성입니다.