Today I Learned
배너 구현을 하다가 들었던 이미지 캐시 무효화에 대해서 정리해보려 한다.
이미지 캐시 무효화
웹 개발에서 성능 최적화와 사용자 경험은 가장 중요한 요소들이다. 그 중 이미지 캐싱은 웹사이트 로딩 속도 개선에는 크게 기여하지만, 때로는 문제가 생길 수 있다. 이를 해결하기 위한
캐싱
-
웹 브라우저에서 한 번 다운로드한 이미지, CSS, JS 파일 등을 유저 컴퓨터에 임시로 저장해두는 것을 Cache(캐시)라 한다.
-
같은 웹페이지를 또 방문할 때 파일을 다시 다운로드할 필요 없이 빠르게 로드해 UX를 향상하고 서버 부하를 막는 것
캐싱으로 인한 문제점
-
이미지를 새로 변경했음에도, 유저의 브라우저가 예전 이미지를 캐시에서 불러오면 변경된 이미지가 보이지 않는 현상이 발생할 수 있다.
-
이미지 뿐만 아니라 CSS나 static한 자원의 경우 URL이 바뀌지 않는다면 브라우저는 이미 캐시된 자원을 사용할 수 있다.
-
서비스 이용자마다 보이는 이미지가 달라져 웹사이트 일관성이 저해될 수 있다.
캐시 무효화 (Cache Busting)
브라우저가 가지고 있는 오래된 캐시파일을 무시하고 서버로부터 항상 최신버전을 다운받을 수 있도록 강제하는 기법.
쿼리 문자열 버전 관리 (Query String Versioning)
가장 보편적으로 사용하는 방법 중 하나로 이미지 URL 뒤에
?와 함께 임의의 쿼리 파라미터를 붙여서 URL을 변경한다.
- 브라우저는 URL이 변경되었다고 판단해 새로운 리소스로 인식해서 다시 다운로드하게 된다.
<img src="/images/profile.jpg?v=2">
<img src="/images/banner.png?timestamp=1678886400">-
구현이 매우 간단하고 백, 프론트에서 동적으로 값을 변경해 적용하기 편하다.
-
일부 프록시 서버나 CDN에서는 쿼리 문자열을 캐싱하지 않을 수 있어 예상치 못한 문제가 발생할 수 있으니 미리 테스트해봐야 한다.
-
URL에 쿼리 문자열이 노출되기 때문에 주의해야한다.
파일 이름 해싱 (File Name Hashing)
가장 강력한 캐시 무효화 방법으로 파일 내용이 변경될 때마다 파일 이름 자체를 변경하는 방식
- 보통 파일 내용의 해시값을 파일 이름에 포함시킨다.
<img src="/images/profile.d41d8cd98f00b204e9800998ecf8427e.jpg">-
Webpack, Parcel 같은 모던 프론트 빌드 도구를 통해 자동화할 수 있다.
-
CDN 캐싱 정책과도 잘 맞고, 파일 내용이 바뀌지 않으면 해시 값도 변하지 않는다.
-
단, 빌드 프로세스랑 통합되어야 하고 구현이 복잡할 수 있다.
HTTP 헤더를 통한 제어
서버에서 응답 헤더를 조작해 캐싱 동작을 제어하는 방법
-
Cache-Control 헤더
no-cache: 캐시를 사용하되, 매번 서버에 유효성 검사(revalidation)를 요청
no-store: 캐시를 아예 저장하지 않음. 민감한 정보에 사용
max-age=[초]: 지정된 시간 동안 캐시를 유효하게 유지 -
Expires 헤더
RFC 1123 날짜 형식으로 캐시 만료 시간을 지정
