클라우드플레어 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만으로는 많은 시간이 소요될 수 있습니다. 오프페이지 SEO 중 하나인 백링크를 생각하게 되며, 링크 빌딩을 위한 링크 교환에 대해 생각하게 됩니다. 링크 교환(Link-Exchange)이란 각각의 다른 웹사이트가 링크를 교환함으로써 링크 주스(점수)를 보내는 것입니다. 상호 링크, 상호 백링크라고도 부릅니다. 목차✅ 클라우드플레어 초기 세팅1. DNS 연결 후 계정 홈 화면2. 세팅…

  • Awin Affiliate 회원가입

    Awin Affiliate에 회원 가입을 진행했습니다. 순서에 대해 확인 해 보겠습니다. 목차✅ 클라우드플레어 초기 세팅1. DNS 연결 후 계정 홈 화면2. 세팅 된 도메인의 계정 화면✅ 클라우드플레어 CDN 세팅1. SSL/TLS 설정2. Speed – 최적화3. Caching4. 규칙5. 네트워크1. Awin Affiliate란? 아마존 어필리에이트와 같이 해외에서 인지도 있는 광고대행 회사입니다. Awin Affiliate (이전 명칭: Affiliate Window)은 온라인…

  • 캐싱 개념과 분류: 웹사이트 성능 최적화 | 원리와 활용 | 서버 측 캐시 5가지와 클라이언트 캐시

    사이트 성능 최적화란 사용자에게 더 빠른 로딩 속도와 쾌적한 경험을 제공하기 위해 웹 자원과 서버 구조를 효율적으로 관리하는 작업입니다. 이를 위해 일반적으로 캐싱, 파일 최적화, 전송 최적화, 서버 최적화 네 가지 핵심 전략이 활용됩니다. 캐시를 통해 반복되는 데이터를 저장하고, 파일 최적화를 통해 CSS·JS·이미지 등의 용량을 줄이며, 전송 최적화에서는 압축과 CDN, HTTP/2 등을 활용해…

  • [WP] 워드프레스 페이지 빌더 vs 블록 에디터 5가지 차이

    워드프레스 구텐베르크(Gutenberg) 블록은 블록 에디터입니다. 공식 블록 에디터가 출시된 이후 워드프레스 페이지 빌더(Page Builder)를 대체하는 방향으로 흐르지 않을까? 라는 의문을 워드프레스를 이용한 웹사이트를 운영한다면 누구나 가졌을 법한 의문입니다. 많은 사람들이 페이지 빌더를 버리고 블록 데이터(Block Editor)로 이동하게 될까요? 이 글에서는 여기에 대한 해답을 찾기 위해 각각의 차이점과 앞으로의 미래를 개인적인 의견으로 예측해 보겠습니다….

  • [SEO] 구글 랭크브레인이란? | RankBrain 최적화 방법 3가지

    검색엔진최적화를 공부한다면 구글 랭크 브레인(RankBrain) 알고리즘에 대해 이해해야 합니다. 랭크브레인은 기계 학습(데이터 입력을 통해 스스로 학습하는 기계의 능력)을 활용하여 검색 엔진 쿼리에 가장 관련성 높은 결과를 결정하는 역할을 합니다. 이전에는 Google이 기본 알고리즘을 사용하여 특정 검색어에 대한 결과를 결정했지만, RankBrain 이후에는 검색자의 위치, 개인화 요소, 검색어의 단어 등 다양한 요소를 고려하여 검색자의 실제…

  • [Chrome]크롬 개발자도구 웹페이지 속도 측정-네트워크 패널 이용 방법 4가지

    크롬 개발자도구 네트워크 패널은 개발자가 웹페이지에서 실제로 업로드와 다운로드가 잘 되는지 HTTP 헤더, 콘텐츠, 크기와 같은 개별 리소스의 속성 등을 체크해야 하는 2가지 경우에 이용을 합니다. 이 페이지에서는 ‘크롬 개발자도구 웹페이지 속도 측정’하는 방법과 네트워크 페널의 기본적인 사용법에 대해 다루겠습니다. CMS로 운영되는 워드프레스 웹사이트 및 쇼핑몰로 운영되는 사이트 등 웹사이트의 속도 개선으로 SEO에…

답글 남기기

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

Prove your humanity: 3   +   5   =