[Cloudflare 시리즈2] 클라우드플레어 사이트최적화 - 캐싱

1. 클라우드플레어 작동원리

2. 클라우드플레어 사이트 최적화 - 캐싱

3. 클라우드플레어 사이트 최적화 - 스피드

 

 

클라우드플레어를 이용해 웹페이지 최적화를 하고 싶다면 수많은 메뉴 중 캐싱, 스피드 2가지만 알아도 충분하다.

 

1. Caching 2. Speed

 

이 페이지에서는 이 중 캐싱을 다룬다.

 

1. Caching 상태 분석

①Analytics 메뉴 활용하기

 

 

클라우드플레어는 기본적으로 모든 리소스를 캐시한다.

Analytics > Traffic 메뉴를 보면 친절하게 캐시된 요청과 캐시되지 않은 요청을 보기 쉽게 차트로 보여준다.

 

 

②네트워크창에서 헤더로 분석하기

 

네트워크 탭에서 CSS 필터링 한 결과

 

캐싱이 잘 되었다면 Size에 memory cache(또는 disk cache)로 나오고 Time이 모두 0이다.

 

캐시파일의 경우 TTFB가 확연히 줄어들어 SEO 향상에도 도움이 된다.

 

클라우트플레어 캐시 파일의 네트워크 탭

 

캐시되고 있는 파일 아무거나 클릭해보면

Response Headers의 속성으로 cache-control, cf-cache-status, server가 나온다.

이 때 캐시컨트롤은 클라우드플레어에서 설정한 값으로 나오는데,

예시 화면의 2678400은 초단위로 나타낸 것으로 캐시 TTL 설정으로 1달로 한 것이다.

server는 실제 사용중인 웹서버가 아닌 cloudflare로 표시된다.

cf-cache-status는 캐시 상태를 나타낸 것으로 바로 아래서 더 자세히 알아보자.

 

③cf-cache-status에 따른 캐시 상태 분석

 

HIT	정상적으로 캐시되고 있음
MISS	클라우드플레어 캐시서버에서 리소스를 못찾아 오리진서버(Origin Server)까지 간 상태 (아무것도 캐시되지 않은 최초 사이트 로드 시 발생함)
EXPIRED	파일이 캐시에 있지만 보관기간이 지나서 오리진서버로 갔다옴 (보통 해당 캐시파일을 지우거나 TTL 시간이 만료되면 발생함)
STALE	EXPIRED 되어서 오리진서버로 갔지만 해당 파일을 찾지 못함 (보통 해당 파일이 삭제된 경우 발생함)
BYPASS	헤더의 Cache-Control 설정이 "no-cache, private, max-age=0"인 경우 오리진서버로 직행함 >> 캐시컨트롤을 no-cache로 해놓으면 클라우드플레어는 캐싱하지 않음
UPDATING	오리진서버에서 캐시서버로 업데이트 중 (보통 캐시가 만료되어 오리진서버에 갔다가 다시 저장할 때 발생, 주로 요청이 많은 리소스 or 캐시 삭제 후 최초 접속했을 때 일어남)
DYNAMIC	사용자 정의에 따라 캐시하지 않기로 함

 

(클플 공식 문서: https://developers.cloudflare.com/cache/about/default-cache-behavior/ )

 

2. 클라우드플레어 캐시 규칙

클라우드플레어에도 물론 캐시 규칙이 있는데 다음과 같다.

 

① Cache-Control 헤더가 "no-cache, private, max-age=0" 중 하나로 설정되어 있을 경우 캐시하지 않는다.

② 반대로 Cache-Control 헤더가 **"public"**이면서 "max-age"가 0보다 큰 경우나 Expires 속성이 미래 날짜로 되어 있는 경우 캐시한다.

③ Cache-Control "max-age"와 Expires가 둘 다 설정된 경우 max-age를 따른다.

 

확장자 기준으로 캐시

 

다음의 확장자를 포함하는 파일들만 캐시한다.

bmp	ejs	jpeg	pdf	ps	ttf
class	eot	jpg	pict	svg	webp
css	eps	js	pls	svgz	woff
csv	gif	mid	png	swf	woff2
doc	ico	midi	ppt	tif	xls
docx	jar	otf	pptx	tiff	xlsx

 

이에 더하여 robots.txt 파일도 캐시한다.

 

 

3. 클플 캐시 삭제하기

클플에서는 기본적으로 캐시파일들의 업데이트 상태를 항상 확인하지만 간혹 파일의 변경이 일어났는데 이전 파일을 계속 불러오는 경우가 있다.

 

이때는 캐시플러시를 통해 삭제해줘야 한다.

 

 

캐싱 탭에서 할 수 있는데 사용자 지정 제거와 모두 제거 속성이 있다.

 

일반적인 웹사이트 캐시 제거시에는

모두 제거를 하면 사이트 전체 리소스의 캐시가 삭제되어 오리진 서버에서 한꺼번에 가져와야 하기 때문에 갑자기 많이 느려질 수 있다.

 

 

따라서 사용자 지정 제거를 통해 특정 파일만 제거하는 것이 안전하다.

캐시파일 url로 제거할 수 있는데, 예를 들어 static 경로의 style.css 라는 파일을 삭제하고 싶다면 "${DOMAIN}/static/style.css" 라고 입력하면 된다.

 

 

4. 브라우저 캐시 TTL 설정하기

TTL(Time To Live)은 캐시파일을 저장되는 시간을 의미한다.

 

 

클라우드플레어 캐싱 창에서는 TTL 또한 설정할 수 있는데 최소 30분~1년 단위로 가능하며

'기존헤더유지'를 선택하면 서버에서 설정해놓은 헤더대로 설정이 가능하다.

 

 

또한 개발 모드 ON으로 하면 캐시를 일시적으로 저장하지 않고 오리진 서버에서 바로 가져오게 된다.

(직접 끄지 않으면 3시간동안 유지된 후 자동으로 OFF 된다.)

 

캐시 TTL 기준은 어떻게 설정하면 좋을까?

 

ⓛ 바뀔 일이 잘 없는 컨텐츠는 보통 3개월 이상 길게 잡는다. (파비콘 같이 거의 바뀔 일 없는 리소스는 1년 이상 길게 잡기도 한다.)

② 변동이 많은 리소스의 경우 15분~1시간으로 설정하기도 한다.

③ 캐시를 가능한 많이 활용하는 것이 좋다. 아무리 짧은 TTL이라도 no-cache보다 낫다.

 

 

5. 특정 리소스만 캐시하지 않게 하려면

 

여러 사정에 의해 특정 파일만 캐시에서 제외하고 싶을 때가 있다.

그럴 때 규칙 메뉴에서 "Page Rule 생성"을 누른 후

 

 

리소스 경로 입력 후 캐시 수준을 "바이패스", 원본 캐시 제어를 ON하면 된다.

 

 

네트워크 탭에서 cache-control이 "no-cache", cf-cache-status가 "DYNAMIC"으로 설정된 것을 확인할 수 있다.

 

 

추가로 규칙 탭에서는 캐시 제어 뿐만 아니라 리디렉션, 무결성검사, HTTPS만 사용하도록 설정 등 보안, DNS에 관한 다양한 룰을 설정할 수 있다.