[ 워드프레스 : CDN ] Cloudflare | 클라우드 플레어 캐시 활용법

Cloudflare | 클라우드 플레어 캐시 활용법
CDN으로 TTFB | 사이트 속도 개선 방법

구글을 하시는 분들은 클라우드플레어 캐시를 활용하여 페이지 속도를 빠르게 하고 싶으신 분들이 있을 겁니다.
( 기본 설정은 인터넷에 찾아보면 많이 나와 있어 Pass 하겠습니다. )
워드프레스는 살짝 무거울 수가 있습니다.
그래서 Js CSS 압축은 필수이고요, 캐싱을 활용하여 페이지 속도를 가속화 해줘야합니다.
이 부분만 해줘도 워드프레스는 가볍게 돌아갈 수 있습니다.

 

하지만 일반 설정으로만 하였을 때는 무겁게 돌아갈것입니다. 
그래서 클라우드 플레어 페이지룰 | Page Rule 이라는 것을 활용하여 속도를 개선할 수 있습니다.

결론부터 제가 개선한 부분을 공유 드립니다.

개선 전

개선 후

TTFB가 3배이상 빠르게 개선 되었고, 다른 CSS JS도 캐싱이 되면서 상당히 속도가 빠르게 되었습니다.
Cloudflare가 회선이 로또이다 보니 일반 설정을 할 경우 HTML이 쭈욱 늘어지는 경우가 있습니다.
이러한 부분을 개선하기 위해서는 ' Page Rules | 페이지룰 '을 활용하여 엣지 캐시를 활용 해줘야합니다.

 

 

Cloudflare Plug in 설치

먼저 해야할 것은 워드프레스에 Cloudflare Plug in을 설치하는 것입니다.

해외 유저들은 내사이트의 HTML 정보를 Cloudflare에

잘 전달하기 위해서는 플로그인을 설치하는 것이 좋다라고 합니다. 
클라우드플레어 측에서의 공식적인 답변은 없지만 커뮤니티에서는
그러한 이야기가 있어 일단 설치해보았습니다.

 

- 플로그 인이 오류가 자주 일어납니다. 그래서 설치에 대한 부분은 선택 사항입니다.

 

설치를 하게 되면 클라우드플레어 가입 메일과 API를 넣으라고 합니다.

클라우드플레어 사이트에 들어가셔서 개요 > API > API 토큰 가져오기에 들어가서, 

상단 메뉴바의 API 토큰을 선택하시면 Global API 토큰을 얻으실 수 있습니다. 

이것을 넣으시면 워드프레스 플로그인은 설치 끝

이제 가장 중요한 Page Rules를 설정하는 법을 보겠습니다.

 

다시한번 말씀드리지만 기본 셋팅은 제외하겠습니다.

 

메뉴 항목의 페이지룰을 선택하세요.

 

 

Cloudflare Page Rules 설정

 

페이지룰은 무료로 하실 경우 기본 3개까지 사용이 가능합니다.

 

1. 전체 사이트의 캐싱을 주어서 속도개선을 하는 것입니다.

URL 넣는 곳 > https://mysiteURL.com* 

설정 >

    - 브라우저 캐시 TTL : 한시간 

      (넣어도 되고 빼도 됩니다. 브라우저 캐시를 넣을 경우 캐시 구성에서 기존 헤더 유지를 선탠하세요.)

      (수정이 많거나, 동적 페이지일 경우 브라우저 캐시는 안넣으시는 것을 추천 드립니다.)

      (때에 따라 다르지만, 애드센스 광고 노출을 빠르게 원하시는 분들은 사용하지 않는 것을 추천 드립니다.)

    - 캐시수준 : 모두 캐시

    - 에지 캐시 TTL : 한달

2. 사이트의 이미지같은 업로드한 파일들을 캐싱하여 속도를 개선 합니다.

URL 넣는 곳 > http://mysiteURL.com/wp-content/uploads* 

설정 >

    - 브라우저 캐시 TTL : 하루

    - 캐시수준 : 모두 캐시

    - 에지 캐시 TTL : 한달

 

3. 어드민의 경우 캐시가 필요없으니 보안 수준을 올려 캐싱자원을 아낍니다.

URL 넣는 곳 > http://mysiteURL.com/wp-admin*   

설정 >

    - 보안 수준 : 높음

    - 캐시수준 : 바이패스

    - 앱 사용 중지

    - 성능 사용 중지

 

모바일 PageSpeed 개선이 되었네요.

 

 

각 사이트마다 설정은 변경이 될 수 있습니다.

위 설정이 기준은 아닙니다.

 

* 본 컨텐츠는 마음껏 복사해서 사용하셔도 됩니다. 단, 출처(URL)는 남겨주세요.

 

클라우드플레어 2023년 설정 새로운 방법

클라우드플레어 설정 방법 1편

클라우드플레어 설정 방법 1편

 

 

[ 워드프레스 : CDN ] Cloudflare | 클라우드 플레어 캐시 활용법 - 2

[ 워드프레스 : CDN ] Cloudflare | 클라우드 플레어 캐시 활용법 - 2

 

[ 워드프레스 : CDN ] Cloudflare | 클라우드 플레어 설정 방법

[ 워드프레스 : CDN ] Cloudflare | 클라우드 플레어 설정 방법