웹 성능 최적화: Cache
캐시는 웹 성능을 최적화할 수 있는 수단중 하나로 웹브라우저가 서버로부터 받은 데이터를 임시 저장하여, 다음에 동일한 요청이 들어왔을 때 서버에 다시 요청하지 않고도 빠르게 응답할 수 있도록 돕는 메커니즘 입니다. 이로 인해 웹페이지의 로딩 속도를 향상시키고, 서버의 부하를 줄일 수 있습니다.
캐시는 이미지, CSS 파일, JavaScript 파일등 자주 바뀌지 않은 정적 리소스에 적용하는 것이 가장 효율적입니다.
HTTP 캐시의 동작 원리
캐시는 서버로부터 설정된 값으로 동작됩니다. HTTP Header에 항목을 추가하여 동작됩니다.
캐시의 생명주기
캐시의 생명 주기는 아래의 옵션으로 관리 됩니다.
1. max-age
HTTP/1.1 200 OK
Date: Mon, 25 Nov 2024 10:00:00 GMT
Cache-Control: max-age=3600가장 간단하고 우선순위기 높은 옵션입니다. 브라우저는 설정된 값 기준으로 캐시를 유지합니다. 클라이언트와 서버간의 시간 동기화 없이 서버가 응답을 보낸 시간으로부터 계산하게 됩니다. 브라우저는 동일한 리소스를 요청하기전에 시간을 확인하고 만료시간보다 이전인 경우 캐시된 데이터를 사용하고 지났다면 서버에 재요청을 하게 됩니다.
2. Expires
HTTP/1.0 200 OK
Date: Mon, 25 Nov 2024 10:00:00 GMT
Expires: Tue, 25 Nov 2024 12:00:00 GMTCache-Control: max-age값 대신 캐시 만료시간을 정확히 지정할 수 있습니다, Cache-Control 옵션보다 이전에 나왔으며 우선순위가 낮기 때문에 옵션을 같이 사용하게 되면 Expires는 무시됩니다.
캐시의 재검증
캐시의 생명주기가 끝나면 브라우저는 새롭게 리소스를 요청하기전에 조건부 요청(Conditional request)을 통해 캐시가 유효한지 재검증(Revalidation)을 수행합니다. 재검증 결과 브라우저가 가지고 있는 캐시가 유효하다면, 서버는 [304 Not Modified] 요청을 내려줍니다. 304 응답은 HTTP 본문을 포함하지 않기 때문에 매우 빠르게 내려받을 수 있습니다
1. ETag, If-None-Match
HTTP/1.1 200 OK
Date: Mon, 25 Nov 2024 00:00:00 GMT
Cache-Control: max-age=3600
ETage: "E20241125000000"서버로부터 Cache-Control: max-age 항목과 함께 ETag에 구분할 수 있는 값을 설정하여 응답을 받습니다. ETag는 캐시 생명주기가 끝나게되면 브라우저가 해당 값을 사용하여 서버에게 요청하게됩니다.
GET /style.css HTTP/1.1
If-None-Match: "E20241125000000"브라우저는 If-None-Match 옵션을 추가하여 ETag값을 설정하여
요청하게되면 서버는 style.css 리소스의 ETag 값과 요청 헤더의 If-None-Match 값과 비교하게 됩니다. 만약 리소스가 변경되지 않아 ETag값이 같아면 서버는 [304 Not Modified]을 응답으로 보내게 되고 데이터 전송 없이 헤더만 반환하게되어 실제 데이터는 브라우저에 캐싱되어 있는 데이터를 사용하게 됩니다,
2. Last-Modified, If-Modified-Since
HTTP/1.1 200 OK
Content-Type: text/css
Last-Modified: Fri, 25 Nov 2024 00:00:00 GMT서버가 리소스를 마지막으로 수정한 시점인 Last-Modified를 헤더에 포함하여 응답합니다. 그리고 브라우저는 동일한 리소스를 요청할때 If-Modified-Since에 이전에 받은 Last-Modified 값을 포함하여 요청합니다.
GET /style.css HTTP/1.1
If-Modified-Since: Fri, 25 Nov 2024 00:00:00 GMT해당 옵션또한 변경된 리소스가 없다면 [304 Not Modified]을 응답하게 되며 If-None-Match가 없거나 ETag를 지원하지 않는 경우에만 사용가능합니다.
좀더 까다롭게 다루기
1. Cache-Control: no-cache
no-cache 옵션은 리소스가 캐시에 저장될 수 있지만, 캐시의 여부와는 상관없이 리소스를 반드시 서버에 재검증을 요청해야 하는 옵션입니다.
즉 리소스를 저장해서 사용하지만 매번 확인 체크를 수행합니다.
2. Cache-Control: no-store
no-store는 리소스가 캐시에 저장되지 않도록 완전히 차단하는 옵션입니다. 민감한 정보가 포함됬거나 자주 변경되어 캐시가 무의미하거나 필요가 없는 경우 사용할 수 있습니다.
캐시와 CDN의 시너지 효과
CDN은 분산된 서버 네트워크를 통해 콘텐츠를 사용자와 가까운 서버에서 빠르고 안정적으로 제공하여, 원본 서버에 있는 리소스를 CDN의 에지 서버에 캐싱합니다.
이를 통해 사용자 요청은 본 서버가 아닌 CDN을 통해 즉시 응답되며, 콘텐츠 제공 속도가 빨라지고 원본 서버로의 요청이 줄어 네트워크 대역폭을 절감할 수 있습니다. 이와 같은 기술의 결합으로 효과적인 웹 최적화를 기대할 수 있습니다.
마지막
캐시는 서버에서 설정해야 하는 부분이 아쉽지만, 최적화에서 빠질 수 없는 중요한 수단인 것 같습니다. 다만, 만능은 아니라고 생각되므로 적재적소에 잘 활용해야 할 것 같습니다.
