본문 바로가기
IT 리뷰/블로그 SEO

워드프레스 CloudFlare "클라우드플레어"CDN HTTS GZIP 압축 로딩 속도개선

by 일상에 도움되는 노랗 2021. 10. 11.
반응형

워드프레스는 생각보다 무거워서 생각만치 빠른 속도가 나오지 않는데요 그렇기 때문에 다양한 플러그인 등을 통해서 이미지를 압축하고 HTML이나 JS 쿼리,자바스크립트,CDN,HTML 등을 압축하는 방식을 사용하는데 생각만큼 사용방법이 쉽지 않다는 단점이 있습니다. 설정도 자칫 잘못했다가는 접속이 되지 않거나 제대로 테마가 표시되지 않는 등의 오류가 발생하기 때문에 초보자들도 쉽지 않은데요 옛날부터 유행했지만 당시에는 그다지 추천하지 않았던 방식인 CloudFlare "클라우드플레어"라는 인터넷 서버를 통해서 워드프레스 속도를 개선하는 방법으로서 최근에는 캐시 및 속도개선 및 안정성 등에서 만족스러워서 포스팅으로 남겨봅니다.

 

워드프레스 클라우드플레어 - GZIP CSS HTML 압축 최적화 속도개선 - 노랗IT월드

워드프레스를 사용하는 분들이라면 무거운 WP의 단점을 개선하기 위해 다양한 최적화 모듈을 사용할텐데 그중에서 클라우드 서버를 이요한 워드프레스 속도개선방법으로 클라우드플레어라는

yellowit.co.kr

참고로 CloudFlare라고 하는 워드프레스 플러그인이 있는데 오류가 생각보다 많고 굳이 사용할 필요성을 느끼지 않기 대문에 우선은 다른 방법으로 클라우드플레어 설치하는 방법을 알아보도록 하겠습니다.

 

워드프레스 CloudFlare "클라우드플레어"CDN HTTS GZIP 압축 로딩 속도개선

우선 CloudFlare 설치하기 위해서는 워드프레스 최적화 플러그인중에서 추천하는 HummingbirdWP-Rocket을 함께 사용하느것을 추천합니다.

워드프레스 Hummingbird

WP-Hummingbird

워드프레스의 허밍버드 "Hummingbird"를 설치했다면 캐싱에서 Sever Type을 CloudFlare로 설정해서 설치할 수 있으며 허밍버드 플러그인은 무료로 쉽게 빠르게 Gzip 압축 및 HTML 압축 등을 제공합니다.

워드프레스 Rocket

WP-ROCKET

다음은 유료 플러그인이지만 버튼 한번으로 오류 없이 간단하고 빠르게 GZIP 및 HTML 캐싱, CDN 등 설정이 가능한 Rocket 플러그인을 사용해서도 클라우드플레어를 함께 사용할 수 있습니다.

워드프레스 CloudFlare 설치 추가

이렇게 CloudFlare 사이트에 접속해서 등록하고자 하는 워드프레스 주소를 눌러 사이트 추가를 눌러줍니다.

아쉽게도 티스토리의 경우는 클라우드플레어를 통해 사이트 가속 및 보호가 불가능합니다.

프로부터 비지니스,엔터프라이즈등 유료 요금제가 있지만 하단에 FREE를 통해 무료로 사이트 속도 개선 효과를 충분히 볼 수 있습니다.

우선 사이트 인증을 위해서는 DNS 레코드 추가를 확인 후 계속을 눌러줍니다.

기본적으로 도메인에 대해서 CloudFlare의 이름 서버를 추가해야합니다.

저 같은 경우는 블루호스트에서 호스팅을 하지만 도메인은 카페24에서 하기 때문에 카페24를 통해 네임서버를 변경합니다.

카페24 접속 후 네임서버를 변경합니다.

카페24 네임서버 변경

다른 네임서버로 선택 후 클라우드플라워의 호스트명을 입력합니다.

  • 1차 네임서버 : nicole.ns.cloudflare.com
  • 2차 네임서버 : tody.ns.cloudflare.com

각각 ip확인을 눌러주면 자동으로 ip주소가 등록됩니다.

이후 이름 서버 변경이 완료되었다면 등록기관으로부터 서버 업데이트가 되는데 최대 24시간이 걸릴 수 있으나 저 같은 경우는 5분 이내에 등록이 완료되었습니다.

클라우드플레어에 등록이 완료되었으며 정식으로 활성화시키기 위해서는 토큰 "Token"을 등록해야 합니다.

클라우드플레어 토큰 등록

CloudFlare Gloabl API Key

API 토큰 -> Global API KEY -> 보기를 선택해서 나오는 토큰 값을 등록합니다.

CloudFlare 최적화 기능

정상적으로 워드프레스 CloudFlare 설치가 완료되었다면 속도 개선 및 최적화 기능을 사용할 수 있습니다.

기본적으로 DNS 설정 및 SSL/TLS, 방화벽, 속도 개선, 캐싱, 트래픽, 네트워크 등 다양한 설정이 가능합니다.

유료 기능 등은 패스하더라도 무료로 제공하는 기능도 꽤 좋습니다.

JavaScript, CSS, HTML 압축

자동최소화 기능을 통해 웹사이트의 소스코드의 파일크기를 줄일 수 있으며 효과를 바로보기 위해서는 캐시를 삭제합니다.

기본적으로 자바스크립트와 CSS, HTML 압축을 쉽게 지원하며 Brotli 기능을 통해 HTTS 트래픽 속도에 대한 로딩 속도를 단축합니다.

로켓 로더를 통해 자바스크립트를 포함판 페이지 로딩 속도도 함께 개선할 수 있으며 모바일 AMP Real URL을 통해 기존 구글 AMP 캐시 URL을 대신해서 실제 URL로 표시합니다.

그리고 모바일 리디렉션을 통해 스마트폰으로 접속하는 방문자를 위한 모바일 웹 사이트로 리디렉션 기능도 제공합니다.

 

이를 통해 방문자 분석 및 캐시 된 백분율값과 클라우드플레어가 제공된 데이터와 캐시된 데이터 용량을 볼 수 있습니다.

무료로 무려 4GB가 제공되어 2GB가 캐시된 효과를 볼 수 있습니다.

CloudFlare 삭제 제거방법

CloudFlare 등록 후 마음에 들지 않는다면 얼마든지 등록을 취소해 제거할 수 있습니다.

우측 하단 고급동작 -> CloudFlare에서 사이트 제거를 선택합니다.

사이즈 제거

이렇게 등록을 삭제한 뒤에는 앞서 변경한 네임서버를 원래 있던 서버로 되돌려놓아야 정상적으로 워드프레스 접속이 가능해집니다.

 

워드프레스 페이지 로딩 속도 개선 및 측정 방법 - 노랗IT월드

워드프레스는 전세계에서 제일 많이 사용하는 cms형 플랫폼으로서 무한한 홈페이지를 만들어 낼 수 있습니다. 하지만 워드프레스의 단점이 가볍진 않은 무게로 잘못 세팅을 하면 로딩 속도 느려

yellowit.co.kr

 

반응형

댓글0