[Network] 웹 캐시로 트래픽 부담 줄이기

웹 캐시 (Web Cache)

  웹 캐시(Web Cache) 혹은 HTTP 캐시는 클라이언트가 웹 사이트 혹은 애플리케이션에 접속할 때 정적 자산을 캐싱함으로써 사이트에 접속할 때마다 해당 리소스들을 반복적으로 다시 요청하는 것이 아니라 저장된 사본을 사용하게 해준다. 그를 통해 웹 사이트를 접속할 때 페이지 로딩 시간을 감소시킬 수 있을 뿐만 아니라 서버 측에 가해지는 트래픽 부담 역시 경감시킬 수 있다. 리소스는 캐싱하는 장소는 브라우저일 수도 네트워크 상(ex. 프록시 서버)일 수도 있다. (만약 Cache-Control 헤더 값을 public으로 지정하는 경우 모든 장소에 캐싱이 가능하며 private으로 설정하는 경우 사용자의 브라우저에만 캐싱이 가능하다.) 웹 캐시를 통해 캐싱되는 리소스는 정적 자산이라는 점에 주목해야 한다. 웹 캐시를 통해 캐싱되는 대표적인 정적 자산(static assets)의 목록은 다음과 같다.

(1) 이미지 (로고, background ...), 비디오

(2) HTML

(3) CSS

(4) JS

  

웹 캐시 유효 기간

  웹 캐시는 무한정 유효한 것이 아니다. 정적 리소스는 다른 리소스에 비해 쉽게 변화하지 않을 뿐이지 여전히 사이트 업데이트에 따라 바뀔 수 있는 자원들이다. 따라서 웹 캐시는 일정 유효기간을 가지며 해당 유효기간 이내에는 서버에 요청을 보내지 않고 캐싱된 데이터를 사용한다. 한편 유효기간이 지났다고 캐시가 바로 삭제되는 것은 아니며 유효기간 이 지난 캐시는 재검증 작업을 거친다. 만약 서버 측에서 확인했을 때 해당 캐시가 아직 유효하다면 서버 측은 304 코드를 돌려준다. (그를 통해 캐시는 다시 재사용이 가능해진다.) 재검증 통과 응답은 HTTP 본문을 포함하지 않기 때문에 매우 적은 비용으로 통신이 가능하다. 반면 재검증 결과 캐시가 유효하지 않다면 최신 리소스를 다시 보내준다. 따라서 캐시가 유효하지 않아도 [캐시 재검증]-[최신 리소스 요청]을 한 번의 요청을 통해 해결할 수 있다.

  웹 캐시 유효 기간을 설정해주는 헤더의 예시는 다음과 같다.

(1) max-age : 초(seconds)를 통해 해당 캐시가 지금으로부터 유효할 기간을 지정해줄 수 있다. (만약 max-age를 0으로 설정하는 경우 리소스 요청이 있을 때마다 직접 서버에 재검증 요청을 수행한다. 그러나 일부 모바일 브라우저의 경우 사용자 경험을 위해 웹 브라우저를 껐다 키기 전까지 리소스를 유지하기도 한다고 한다.)

(2) s-maxage : max-age와 유사하나 브라우저가 아닌 중간 서버(ex. CDN)에만 별도로 max-age를 적용하기 위해 사용한다.

(3) Expires : 현재 시간을 기준으로 하는 앞의 두 가지와 다르게 분명한 만료 시간을 지정해준다.

 

 

HTML, CSS, JS 유효 기간 설정하기

  HTML, CSS, JS 파일 등은 사이트 갱신 작업이 이루어지지 않는다면 바뀌지 않는다. 그렇다고 유효 기간을 무작정 길게 설정하는 경우 재배포가 이루어졌어도 새로운 리소스를 가져오지 못하는 문제가 발생할 것이다. 예를 들어서 특정 버전에 버그가 발생해 긴급 수정 후 재배포 작업을 진행해도 만약 웹캐시가 아직 유효하다면 사용자들은 캐시를 삭제해주지 않는 한 여전히 버그가 있는 버전을 확인하게 될 것이다.

  캐시 유효기간을 최대로 하되 빌드 및 배포할 때마다 파일명에 빌드 버전과 같이 고유한 값을 추가해준다면 어떨까? 그렇게 된다면 캐싱의 효율성은 극대화하면서 서비스의 재배포가 이루어질 때마다 사용자들의 입장에서는 항상 최신 상태를 유지할 수 있을 것이다.