정적 컨텐츠(css, js, 이미지) 튜닝

서비스를 올리니 css, js 등의 로딩이 느려서 화면이 로딩시 깨지는 현상이 발생했다. 이를 해결하기 위해 정적 컨텐츠를 AWS의 cloud Front 등의 CDN으로 url을 변경해 보았으나, 현상은 크게 나아지지 않았다. CDN보다 캐쉬 적용이 더 중요한 부분이었음.

Cache Control : 스프링부트는 설정파일에 추가만으로 정적 컨텐츠의 cache Control 설정이 가능했다.

spring:
  web:
    resources:
      cache:
        cachecontrol:
          max-age: 3600

ETag : http응답값에 파일의 해쉬값을 내려보내준다. 클라이언트는 요청시에 If-None-Match로 해쉬값을 다시 보내고, 파일이 변경되지 않았을 경우에는 파일을 다시 보내는 것이 아니라, 304 Not-Modified 로 응답을 보내게 되어, 빠르게 캐쉬된 데이터를 재활용한다.

적용이후 로딩화면 : 상태 200이 연하게 표시되는 항목은 캐쉬에서 가져온 항목이다.(이미지파일들은 캐쉬처리된 것을 볼 수 있다)

304처리 : If-Modified-Since, If-None-Match 를 요청헤더에 보내고, 304로 응답을 받는 모습