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

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

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

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

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

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

클라우드플레어 도메인 DNS 등록

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

1. DNS 연결 후 계정 홈 화면

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

클라우드플레어 계정 홈

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

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

클라우드플레어 계정 화면-기본 세팅

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

✅ 클라우드플레어 CDN 세팅

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

1. SSL/TLS 설정

1.1 SSL/TLS 암호화

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

클라우드플레어 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 콘텐츠 최적화

클라우드플레어 콘텐츠 최적화1
클라우드플레어 콘텐츠 최적화2

2.3 프로토콜 최적화

클라우드플레어 프로토콜 최적화1
클라우드플레어 프로토콜 최적화2

2.4 기타

클라우드플레어 기타 최적화-자동 서명된 교환(SXG)

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

3. Caching

3.1 구성

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

클라우드플레어 Caching 구성1

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

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

클라우드플레어 Caching 구성2
클라우드플레어 Caching 구성3

3.2 Cache Rules

Cache Rules 설정


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

Cache Rules HTML 캐시 설정

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

Cache Rules 캐시 우회 설정

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

Cache Rules 확장자 캐시 설정(이미지, PDF 등의 파일)

3.3 Tiered Cache

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

클라우드플레어 Tiered Cache

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

클라우드플레어 Cache Rules 설정 완료

4. 규칙

4.1 Page Rules

클라우드플레어 규칙-Page Rules

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

클라우드플레어 규칙-Page Rules2

4.2 Snippets

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

클라우드플레어 규칙-Snippets

4.3 설정

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

4.3.1 관리되는 변환

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

클라우드플레어 규칙 - 관리되는 변환
4.3.2 URL 정규화
클라우드플레어 규칙 - URL 정규화

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

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

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

5. 네트워크

클라우드플레어 네트워크 설정1
클라우드플레어 네트워크 설정2
클라우드플레어 네트워크 설정3

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

Similar Posts

  • 웹사이트 성능 테스트 기준: 크롬 개발자 도구 | 구글이 만든 SEO·성능 분석 표준

    웹사이트 속도와 성능은 단순한 점수로 판단할 수 없습니다. 중요한 것은 사용자 브라우저에서 어떤 리소스가 병목을 일으키는지, 그리고 렌더링이 어느 시점에 완료되는지를 직접 확인하는 것입니다. 이 과정을 통해서만 실제 성능 저하의 원인을 정확히 파악할 수 있습니다. 크롬 개발자 도구는 별도의 프로그램 설치 없이 브라우저 안에서 웹사이트 성능 테스트를 직접 할 수 있는 가장 강력한…

  • 글로벌 SEO 비교 사이트 4군데

    글로벌 SEO 비교 사이트를 찾고 있다면 SimilarWeb, Ahrefs SEMrush, Moz와 같은 인기있는 웹사이트를 추천합니다. 이 사이트들은 트래픽 및 키워드 순위 정보를 제공하여 전 세계적인 SEO 분석을 가능케 합니다. 이 중에서 웹사이트 순위 정보도 제공하는 사이트는 SimilarWeb, Alexa, SEMrush와 같은 사이트들입니다. 이러한 사이트들은 글로벌 SEO 분석에 도움이 되는 강력한 도구로, 인기와 신뢰성이 높습니다. 목차✅…

  • Off Page SEO: 오프 페이지 SEO 정의와 7가지 방법

    오프 페이지 SEO(Off Page SEO)란 SEO의 범주 중 하나로 콘텐츠 내부(온 페이지 SEO)가 아닌 외부로부터 검색 엔진 순위를 높이기 위한 SEO입니다. 다른 웹 사이트로부터 발생하는 백링크 구축을 통한 링크 빌딩, 다른 웹 사이트로부터 받은 백링크에 대한 가치를 나타내는 링크 주스 등을 생각할 수 있습니다. 결국 “백링크가 중요하다.”가 주요 포인트 중 하나인 이유는 많은…

  • 저작권 없는 무료 이미지 다운로드 사이트 추천 LIST 35+@-라이선스 확인

    블로그나 상업용으로 이미지를 사용해야 하는데 저작권 때문에 유료 이미지를 사용하지만 유료 이미지 사이트를 사용하는 것에는 한계가 있습니다. 예를 들어 한 달에 발행하는 뉴스·블로그 글이 이용하는 유료 이미지 사이트의 이미지 수를 초과하는 경우입니다. 저작권 없는 무료 이미지 사이트를 같이 사용하는 방법을 고려할 수 있습니다. 무료이미지 상업용 사용 조건 등은 어떻게 되는지 확인해 보겠습니다. 스톡…

  • 크롬 개발자 도구 성능 탭 활용

    웹사이트의 성능을 정확하게 평가하려면 단순한 속도 점수보다, 브라우저가 실제로 렌더링과 스크립트를 어떤 순서로 처리하는지를 살펴보는 것이 더 중요합니다. 크롬 개발자 도구 성능 탭은 페이지 로딩 과정과 사용자 상호작용에 따른 성능 저하를 시각적으로 분석할 수 있는 도구입니다. 렌더링 지연, 자바스크립트 실행 순서, LCP·FCP·CLS와 같은 Core Web Vitals 지표까지 모두 한 화면에서 확인할 수 있어,…

  • URL 디렉터리 구조 vs 플랫 구조: SEO 성능과 웹사이트 운영 효율

    구글의 검색엔진 최적화(SEO) 기본 가이드에 따르면, URL 디렉터리 구조를 통해 유사한 주제의 페이지를 그룹화하는 것은 검색 엔진이 사이트 구조를 이해하고 색인을 최적화하는 데 유리합니다. 특히 사이트의 규모가 크거나 페이지 수가 많을수록 디렉터리(폴더) 단위로 콘텐츠를 체계적으로 묶어 두면 크롤러가 페이지 관계를 파악하고 크롤링 빈도를 조정하기 쉽습니다. 하지만 플랫 구조도 관리 효율성과 URL 단순성 측면에서…

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

Prove your humanity: 1   +   4   =