클라우드플레어 CDN 설정(Pro 플랜)

클라우드플레어 CDN을 예전에 사용했었는데 최근 다른 워드프레스 사이트에 재 연결을 하게 되었습니]다. 캐시 플러그인은 현재 사이트와 동일한 조건으로 세팅했는데 무료 플랜은 속도가 현재 사이트에 근접하지 못하고 오히려 느린 결과를 보였습니다._{(현재 사이트는 클라우드플레어 CDN이 적용되지 않은 상태입니다)}

원래 사이트처럼 동일하게 세팅해서 속도를 높일까 고민하다가 Pro플랜으로 업데이트 했습니다. 확실히 업데이트 후 현재 사이트보다 조금 느리지만 미세한 차이라 크게 신경 쓸 필요도 없고 모바일 페이지는 구글 페이지스피드에서 현재 사이트보다 더 안정적이 점수(95~99)를 보였습니다.

솔직히 무료 플랜은 추천하지 않습니다. 한국에서 접속 시 오히려 한국에 있는 원본 서버보다 상당히 느린 속도가 나오기 때문입니다. 해외 방문자도 있는 웹사이트를 만들 계획이라면 Pro 플랜이나 다른 업체의 CDN이나 해외 호스팅을 알아 보는게 더 나은 선택이란 생각이 듭니다.

✅ 클라우드플레어 초기 세팅

무료 플랜부터 DNS 등록 후 사용할 수 있으며 설정 방법은 안내 메뉴에 따라 간단하게 진행할 수 있습니다.

Pro 플랜 기준으로 설정 방법에 대해 알아 보겠습니다.

1. DNS 연결 후 계정 홈 화면

우측 상단의 추가를 눌러서 다른 도메인 계정을 추가할 수 있습니다.

2. 세팅 된 도메인의 계정 화면

도메인을 클릭해서 접속하면 사용하는 도메인 계정의 메인 화면을 확인할 수 있습니다.

좌측 SSL/TLS, Speed, caching, 규칙, 네트워크를 기본 세팅 방법에 대해 알아 보겠습니다.

✅ 클라우드플레어 CDN 세팅

무료 플랜에서는 설정 가능한 기능만 활성화하여 이용하시면 됩니다. 페이지 내 설명서에 충분히 적혀 있는 내용들은 추가로 설명드리지 않겠습니다. 개인적으로는 차후에 다른 사이트 설정 시 활용의 목적도 있기 때문입니다.

1. SSL/TLS 설정

1.1 SSL/TLS 암호화

전체 암호화 모드는 전체(엄격)으로 설정합니다.

1.2 에지 인증서

와일드카드 SSL을 무료 플랜부터 지원해 주는 것을 확인했습니다.

이 페이지에서 활성화 할 부분은 다음과 같습니다.

• 항상 HTTPS 사용 활성화
• 최소 TLS 버전
• 편의적 암호화
• TLS 1.3
• 자동 HTTPS 다시 쓰기
• Encrypted Client Hello

1.2.1 활성화 고려할 것

• HSTS(HTTP 엄격한 전송 보안)
  • HSTS 설정 같은 경우는 가장 중요한 조건이 와일드카드 SSL 사용인데 혹여 CDN 업체나 호스팅 업체를 바꾸게 되면서 와일드카드 SSL이 아닌 일반 SSL을 사용할 경우 HSTS 설정 상태에서 웹사이트가 열리지 않습니다. 그렇기 때문에 클라우드플레어를 계속 사용한다거나 와일드카드 SSL을 유지할 수 있다는 확신이 있을 때 활성화를 진행해야 합니다.

2. Speed – 최적화

2.1 이미지 최적화

2.2 콘텐츠 최적화

2.3 프로토콜 최적화

2.4 기타

다른 웹사이트나 CMS들 역시 반응형을 사용하지 AMP 기반으로 사용하는 것 같지 않습니다. AMP URL을 최적화 할 일은 그리 많지 않을 것 같습니다.

3. Caching

3.1 구성

캐싱 수준은 표준으로 설정했습니다. 정적 콘텐츠의 캐싱을 담당하며, 클라우드플레어에서는 표준 설정을 권장합니다. HTML을 캐싱하진 않기 때문에 페이지 규칙을 생성해야 합니다.

브라우저 캐시 TTL 같은 경우에는 1개월로 설정했습니다. 사용 중인 워드프레스 사이트에서 글을 새로 쓰거나 수정, 그리고 테마 수정 등을 한 이후 워드프레스 캐시 플러그인이 해당 페이지의 캐시를 초기화 해 주면서 클라우드플레어의 캐시도 초기화 해주기 떄문입니다.

애드센스 광고는 브라우저 캐시와 별개로 실시간으로 로드되어 TTL을 길게 잡아도 무관한 것을 체크했습니다. 짧게 잡아도 1일, 5일인데 이미 문제가 있었겠죠.

3.2 Cache Rules

먼저 HTML 캐시를 설정합니다. 설정 후 사이트에 문제가 있을 경우 삭제하고 캐시 초기화를 진행합니다.

▼ 로그인 페이지의 경우 캐시되지 않도록 캐시 우회 설정을 합니다.

▼ 마지막으로 WebP, jpg와 같은 이미지 파일 및 PDF 등의 파일 확장자 캐시 설정을 합니다.

3.3 Tiered Cache

계층형 캐시를 설정합니다.

Cache Rules 설정이 완료 되었습니다. 현재는 Pro 요금 기준 25개의 캐시 룰 중에 3개 룰만 적용했지만 시간이 날 때 유용한 룰이 있다면 추가할 예정입니다.

4. 규칙

4.1 Page Rules

차후 적절한 규칙이 있다면 추가 예정입니다.

4.2 Snippets

“웹 사이트 또는 응용 프로그램을 동적으로 맞춤화하는 짧고 강력한 JavaScript입니다.”라고 적혀 있고 차후에 사이트를 잘 유지한다면 제대로 쓸 수 있을지 모를 기능들도 보였습니다.

4.3 설정

이해 가는 부분들은 설정하고 불필요하거나 알아보지 않은 설정들은 활성화 시키지 않았습니다.

4.3.1 관리되는 변환

TLS 클라이언트 인증 헤더 추가는 속도에 영향을 줄 것으로 예상되어 미사용으로 유지했으며, 방문자 위치 헤더 활성화 이유는 방문자의 국가, 도시 등을 기반으로 맞춤형 콘텐츠 표시(언어 및 맞춤 광고 등)에 유효한 것으로 판단되기 때문입니다.

4.3.2 URL 정규화

수신 URL 정규화는 외부에서 들어오는 URL이 다를 경우 동일하게 처리하여 정규화 하는 것을 의미합니다.

https://example.com/page
https://example.com/page?utm_source=google

보안 강화, 불필요한 중복 방지 및 SEO와 캐싱 최적화에 도움이 되는 부분으로 확인되어 활성화를 유지합니다.

5. 네트워크

크게 어려운 건 없었지만 정리하는데 생각보다 시간이 오래 걸리는군요. 차후 다른 워드프레스 사이트 세팅이나 현재 세팅한 페이지의 설정한 내역을 확인할 때 이 포스트를 참고할 예정입니다.