웹 최적화 기법 - 캐시 최적화

Serve static assets with an efficient cache policy

=> 네트워크를 통해 다운로드하는 리소스에 캐시를 적용하라는 의미

 

캐시
자주 사용하는 데이터나 값을 미리 복사해둔 임시 저장 공간 또는 저장하는 동작 웹에서 서비스에서 사용하는 이미지나 자바스크립트 파일을 매번 네트워크를 통해 불러오지 않고 최초에만 다운로드하여 캐시에 저장해두고 그 이후 요청 시 저장해둔 파일을 사용한다.

 

• 웹에서 사용하는 캐시의 종류
  • 메모리 캐시
    • 메모리에 저장하는 방식
    • RAM
  • 디스크 캐시
    • 파일 형태로 디스크에 저장하는 방식

 

어떤 캐시를 사용하는지 직접 제어가 불가하며 브라우저가 사용 빈도나 파일 크기에 따라 특정 알고리즘에 의해 알아서 처리된다.

단순 새로고침을 한 후 확인한다면 메모리 캐시가 많을 것이고

브라우저를 종료한 뒤 네트워크 리소스를 확인하면 디스크 캐시가 많을 것이다.

기본적으로 브라우저가 완전히 종료되면 메모리에 있는 내용은 제거하고 다음 접속 때 파일 형태로 남아있는 캐시를 활용하기 때문이다.

 

Network 패널에서 리소스 중 하나를 확인해보면 응답 헤더에 캐시에 대한 설정인 Cache-Control 이라는 헤더가 없다는 것은 서버에서 캐시 설정이 제대로 되어 있지 않다는 것이다.

즉 브라우저가 캐시를 하기 위해선, Cache-Control이라는 응답 헤더가 있어야 하는 것.

Cache-Control
리소스의 응답 헤더에 설정되는 헤더 브라우저는 서버에서 이 헤더를 통해 캐시를 어떻게, 얼마나 적용해야 하는 판단

no-cache : 캐시를 사용하기 전 서버에 캐시된 리소스를 사용해도 되는지 검사 후 사용,
no-store : 캐시 사용 안함
public : 모든 환경에서 캐시 사용 가능
private : 브라우저 환경에서만 캐시 사용, 외부 캐시 서버에선 사용 불가
max-age : 캐시의 유효 시간, 해당 시간 안이라면 서버에 사용 가능 여부를 묻지 않고 캐시된 리소스를 바로 사용

Cache-Control : private, max-age=60

 

캐시 적용을 위해선 별도의 서버에서 설정해줘야 한다.

const header = {
	setHeader: (res, path) => {
		res.setHeader('Cache-Control', 'max-age=10');
	},
}

 

• 캐시 유효 시간이 만료되면,
  • 브라우저는 캐시된 리소스를 계속 사용해도 될지 서버에 확인
  • 서버에서 캐시된 리소스의 응답 헤더에 있는 Etag 값과 서버에 있는 최신 리소스의 Etag 를 비교하여 캐시된 리소스가 최신인지 아닌지 판단한다.
  • 즉 서버에 있는 리소스가 변하면 Etag 값이 달라지고 서버는 새로운 Etag 값과 함께 최신 리소스를 브라우저로 다시 보내준다.
• 적절한 캐시 유효 시간
  • 모든 리소스에 동일한 캐시 설정이 적용되면 효율적이지 않다. 리소스마다 사용이나 변경 빈도가 달라 유효 시간도 다르게 주어지는 것이 좋다.
  • 일반적으로 HTML은 no-cache 설정을 적용
  • 자바스크립트와 CSS는 코드가 변경되면 해시도 변경되어 완전히 다른 파일이 되어버리므로 캐시를 오래 적용해도 HTML만 최신 상태라면 자바스크립트나 CSS 파일은 최신 리소스를 로드하기 때문에 굳이 유효 시간을 줄 필요 없이 public, max-age=31536000 으로 1년의 유효 시간을 설정해준다.