브라우저 캐싱 ❓

최초 요청

위아래 사진은 같은 페이지의 요청을 비교한 사진입니다.

size를 보시면 아래의 사진은 대부분이 cache로부터 조회된 것을 확인할 수 있습니다

캐시가 활용된 모습

 

cache는 컴퓨터의 여러분야에서 쓰이고 있습니다. 

대표적인 곳이 cpu의 l1,l2,l3 캐시 입니다. 

캐시를 사용하여 같은 요청이 반복해서 들어왔을시 메모리로의 접근없이 빠르게 데이터를 조회하여 사용할 수 있습니다.

 

이러한 기능을 하는 캐시가 브라우저에서도 사용될 수 있습니다.

이를 브라우저 캐싱이라 합니다. 

일반적으로 정적인 리소스 들을 캐싱합니다.

1. 이미지 - 로고, 사진 등
2. HTML
3. CSS
4. Javascript

 

client와 서버간의 응답속도를 높이기 위해 웹 페이지의 구성요소들을 사용자 pc에 저장을 해둘수 있습니다.(브라우저 캐싱)

해당 페이지에 재방문 시에는 사용자 Pc의 데이터를 가져와 client에게 보여주어 트래픽을 줄이고 빠르게 화면을 보여줄 수 있습니다.

(최초 요청시에는 캐시에 해당 페이지 관련 데이터가 존재하지 않으므로 유효하지 않습니다)

 

응답의 헤더를 이용하여 캐시를 사용하도록 적용할 수 있고 

메타 태그를 이용하여 캐시를 사용하지 않도록 설정할 수도 있습니다.

 

 

응답의 헤더를 이용하여 캐시를 사용하도록 설정 

 

HTTP 1.1 에서는 두개의 로직을 사용합니다.

 

1. 만기일 확인 : 웹 페이지를 재방문시에 캐싱된 자산의 만기일을 확인합니다.

이 만기일은 서버 응답 헤더중 expires, Cache-control의 max-age를 통해 설정이 가능합니다.

 

2. 검증(validation) 확인 : 캐싱된 자산이 최신 상태인지를 파악하기 위하여 서버에 검증 요청을 보냅니다. 

만약 최신이라면 캐싱된 자산을 쓰고 아니라면 데이터를 새로 가져옵니다.

 

응답헤더 설정

 

expire에 만료 날짜 설정

=> 자산의 만료 일자 정의

 

Cache-control

• max-age=[seconds] : 요청시간으로부터 상대적인 시간을 표시합니다. (expire와 동일한 의미입니다)
• s-maxage=[seconds] : max-age와 같은 의미입니다. 하지만 shared cache(ex. proxy)에만 적용 됩니다.
• public : HTTP 인증이 된 상태에서도 캐싱하도록 설정합니다.
• private : 특정 유저의 브라우저에서만 캐싱되도록 설정합니다.  shared cache에는 캐싱하지 않습니다. HTTP 인증이 된 상태라면 응답들은 자동으로 private이 설정됩니다.
• no-cache : 서버에 유효성 검증 요청을 보내도록 강제합니다(최신 상태를 유지하기에 좋습니다)
• no-store : 어떤 상황에서도 응답을 저장하지 않습니다.
• no-transform :  이미지나 문서를 최적화된 포멧으로 변환하지 않도록 합니다.
• must-revalidate : 반드시 만료된 자산인지를 서버에 검증하도록 합니다(금융 거래와 같은 특정 상황에 필요합니다)
• proxy-revalidate : must-revalidate와 같은 의미입니다. 하지만 proxy cache에만 적용합니다.

 

 

메타 태그를 이용하여 캐시를 사용하지 않도록 설정 (클라이언트에서 캐시를 사용함으로써 발생할 수 있는 문제를 방지할 수 있습니다.)

<!-- 
Cache-control
no-cache : 캐시를 사용하기 전에 재검증을 위한 요청을 강제함
no-store : 클라이언트의 요청, 서버의 응답 등을 일체 저장하지 않음
must-revalidate : 캐시를 사용하기 전에 반드시 만료된 것인지 검증을 해야함
Ex) Cache-control: "no-cache, no-store, must-revalidate"
-->
<meta http-equiv="Cache-control" content="no-cache, no-store, must-revalidate">

 

nginx에서 응답들에 header를 추가해 줄수도 있습니다.

 # Aggressive caching for static files that rarely/never change
location ~ \.(?:asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|eot|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|odb|odc|odf|odg|odp|ods|odt|ogg|ogv|otf|pdf|png|pot|pps|ppt|pptx|ra|ram|svg|svgz|swf|tar|t?gz|tif|tiff|ttf|wav|webm|wma|woff|wri|xla|xls|xlsx|xlt|xlw|zip)$ {
	expires 31536000s;
	add_header Cache-Control "public, must-revalidate, proxy-revalidate";
}

location ~ \.(?:css|js)$ {
	expires 86400s; 
	add_header Cache-Control "public, must-revalidate, proxy-revalidate";
}

 

 

 

 

 

출처 : https://happist.com/557952/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-%EC%B5%9C%EC%A0%81%ED%99%94-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EC%BA%90%EC%8B%B1browser-caching-%EC%84%A4%EC%A0%95%EC%9C%BC%EB%A1%9C-%EB%B9%A0

[워드프레스 최적화] 브라우저 캐싱(Browser Caching) 설정으로 빠른 속도와 트래픽 절감이란 두마리

 

https://velog.io/@mgm-dev/%EA%B0%84%EB%9E%B5-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EC%BA%90%EC%8B%9C%EC%97%90-%EB%8C%80%ED%95%B4

[간략] 브라우저 캐시에 대해

http://nginx.org/en/docs/http/ngx_http_headers_module.html

Module ngx_http_headers_module