워드프레스 CloudFlare "클라우드플레어"CDN HTTS GZIP 압축 로딩 속도개선
워드프레스는 생각보다 무거워서 생각만치 빠른 속도가 나오지 않는데요 그렇기 때문에 다양한 플러그인 등을 통해서 이미지를 압축하고 HTML이나 JS 쿼리,자바스크립트,CDN,HTML 등을 압축하는 방식을 사용하는데 생각만큼 사용방법이 쉽지 않다는 단점이 있습니다. 설정도 자칫 잘못했다가는 접속이 되지 않거나 제대로 테마가 표시되지 않는 등의 오류가 발생하기 때문에 초보자들도 쉽지 않은데요 옛날부터 유행했지만 당시에는 그다지 추천하지 않았던 방식인 CloudFlare "클라우드플레어"라는 인터넷 서버를 통해서 워드프레스 속도를 개선하는 방법으로서 최근에는 캐시 및 속도개선 및 안정성 등에서 만족스러워서 포스팅으로 남겨봅니다.
| CDN 장점 | 설명 |
| 더 빠른 로딩 시간 | CDN은 사용자와 가장 가까운 서버에서 콘텐츠를 제공하기 때문에 로딩 속도가 향상됩니다. 사용자가 요청한 콘텐츠가 CDN 서버에 이미 캐시되어 있다면 웹사이트 로딩 시간이 크게 단축될 수 있습니다. |
| 트래픽 감소 | CDN은 콘텐츠를 여러 서버에 분산 저장하므로 웹사이트의 트래픽이 분산됩니다. 이로 인해 웹 서버의 부하가 감소하고 대역폭 사용량이 줄어듭니다. |
| 지역별 성능 향상 | CDN은 전 세계에 서버를 배치하여 사용자의 지리적 위치에 가장 가까운 서버에서 콘텐츠를 제공합니다. 따라서 사용자의 지역에 따른 성능 향상이 있습니다. |
| 고가용성 및 내결함성 | CDN은 여러 서버에 콘텐츠를 복제하여 내결함성을 제공합니다. 특정 서버에 장애가 발생하더라도 다른 서버에서 콘텐츠를 제공하여 웹사이트의 가용성을 높여줍니다. |
| 대역폭 최적화 | CDN은 콘텐츠를 압축하고 최적화하여 대역폭 사용을 최소화합니다. 이를 통해 트래픽 비용을 절감할 수 있습니다. |
CDN을 사용하면 위와 같은 이점이 있습니다.
워드프레스 클라우드플레어 - GZIP CSS HTML 압축 최적화 속도개선 - 노랗IT월드
워드프레스를 사용하는 분들이라면 무거운 WP의 단점을 개선하기 위해 다양한 최적화 모듈을 사용할텐데 그중에서 클라우드 서버를 이요한 워드프레스 속도개선방법으로 클라우드플레어라는
yellowit.co.kr
참고로 CloudFlare라고 하는 워드프레스 플러그인이 있는데 오류가 생각보다 많고 굳이 사용할 필요성을 느끼지 않기 대문에 우선은 다른 방법으로 클라우드플레어 설치하는 방법을 알아보도록 하겠습니다.
우선 CloudFlare 설치하기 위해서는 워드프레스 최적화 플러그인중에서 추천하는 Hummingbird나 WP-Rocket을 함께 사용하느것을 추천합니다.
워드프레스 Hummingbird
워드프레스의 허밍버드 "Hummingbird"를 설치했다면 캐싱에서 Sever Type을 CloudFlare로 설정해서 설치할 수 있으며 허밍버드 플러그인은 무료로 쉽게 빠르게 Gzip 압축 및 HTML 압축 등을 제공합니다.
워드프레스 CSS Gzip 압축 최적화 플러그인 Hummingbird
워드프레스 CSS Gzip 압축 최적화 플러그인 Hummingbird 워드프레스는 꽤나 무거운 CMS형 플랫폼으로서 호스팅서버가 제대로 받쳐주지 않는다면 속도에 꽤 신경을 쓰게 됩니다. 그렇기 때문에 워드프
jab-guyver.co.kr
워드프레스 수동 Gzip 압축방법
워드프레스의 텍스트 Gzip 수동으로 압축하거나 압축유무를 확인하기 위해 아래사이트로 접속합니다.
무료 GZIP 압축 검사기 – 정확도 100% 온라인 도구
웹사이트에서 GZIP 압축이 제대로 이뤄지는지 확인해보고 자세한 보고서를 받으세요. 대역폭을 50%까지 낮출 수 있습니다!
www.websiteplanet.com
그럼 현재 내 웹사이트의 Gzip 압축유무 및 용량을 확인할 수 있습니다.
현재 압축되지 않은 상태로서 파일질라등을 통해 FTP 접속 후 .htaccess 파일을 수정합니다.
compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
# Or, compress certain file types by extension:
<files *.html>
SetOutputFilter DEFLATE
</files>.htaccess 파일 하단에 위 코드를 추가하면 Gzip 압축이 수동으로 됩니다.
만약 .htaccess 파일을 수정할 수 없다면 PHP를 사용해 압축된 콘텐츠를 전송할 수 있습니다. HTML 파일을 .php 확장자로 지정하고 PHP 파일에 아래와 코드를 추가합니다.
<?php if (substr_count($_SERVER[‘HTTP_ACCEPT_ENCODING’], ‘gzip’)) ob_start(“ob_gzhandler”); else ob_start(); ?>“Accept-encoding” 헤더를 확인할 수 있고 gzip으로 압축된 파일 버전(그렇지 않으면 정규 버전)을 반환할 수 있습니다.
워드프레스 Rocket
다음은 유료 플러그인이지만 버튼 한번으로 오류 없이 간단하고 빠르게 GZIP 및 HTML 캐싱, CDN 등 설정이 가능한 Rocket 플러그인을 사용해서도 클라우드플레어를 함께 사용할 수 있습니다.
워드프레스 WP ROCKET 플러그인 CSS 압축 Gzip 최적화
워드프레스 WP ROCKET 플러그인 CSS 압축 Gzip 최적화 워드프레스에는 다양한 최적화 플러그인이 있으며 이런 플러그인을 이용하면 웹페이지를 잘 모르더라도 쉽게 설정을 할 수 있는 장점이 있습니
jab-guyver.co.kr
워드프레스 CloudFlare 설치 추가
이렇게 CloudFlare 사이트에 접속해서 등록하고자 하는 워드프레스 주소를 눌러 사이트 추가를 눌러줍니다.
아쉽게도 티스토리의 경우는 클라우드플레어를 통해 사이트 가속 및 보호가 불가능합니다.
프로부터 비지니스,엔터프라이즈등 유료 요금제가 있지만 하단에 FREE를 통해 무료로 사이트 속도 개선 효과를 충분히 볼 수 있습니다.
우선 사이트 인증을 위해서는 DNS 레코드 추가를 확인 후 계속을 눌러줍니다.
기본적으로 도메인에 대해서 CloudFlare의 이름 서버를 추가해야합니다.
저 같은 경우는 블루호스트에서 호스팅을 하지만 도메인은 카페24에서 하기 때문에 카페24를 통해 네임서버를 변경합니다.
카페24 접속 후 네임서버를 변경합니다.
다른 네임서버로 선택 후 클라우드플라워의 호스트명을 입력합니다.
- 1차 네임서버 : nicole.ns.cloudflare.com
- 2차 네임서버 : tody.ns.cloudflare.com
각각 ip확인을 눌러주면 자동으로 ip주소가 등록됩니다.
이후 이름 서버 변경이 완료되었다면 등록기관으로부터 서버 업데이트가 되는데 최대 24시간이 걸릴 수 있으나 저 같은 경우는 5분 이내에 등록이 완료되었습니다.
클라우드플레어에 등록이 완료되었으며 정식으로 활성화시키기 위해서는 토큰 "Token"을 등록해야 합니다.
클라우드플레어 토큰 등록
API 토큰 -> Global API KEY -> 보기를 선택해서 나오는 토큰 값을 등록합니다.
CloudFlare 최적화 기능
정상적으로 워드프레스 CloudFlare 설치가 완료되었다면 속도 개선 및 최적화 기능을 사용할 수 있습니다.
기본적으로 DNS 설정 및 SSL/TLS, 방화벽, 속도 개선, 캐싱, 트래픽, 네트워크 등 다양한 설정이 가능합니다.
유료 기능 등은 패스하더라도 무료로 제공하는 기능도 꽤 좋습니다.
자동최소화 기능을 통해 웹사이트의 소스코드의 파일크기를 줄일 수 있으며 효과를 바로보기 위해서는 캐시를 삭제합니다.
기본적으로 자바스크립트와 CSS, HTML 압축을 쉽게 지원하며 Brotli 기능을 통해 HTTS 트래픽 속도에 대한 로딩 속도를 단축합니다.
로켓 로더를 통해 자바스크립트를 포함판 페이지 로딩 속도도 함께 개선할 수 있으며 모바일 AMP Real URL을 통해 기존 구글 AMP 캐시 URL을 대신해서 실제 URL로 표시합니다.
그리고 모바일 리디렉션을 통해 스마트폰으로 접속하는 방문자를 위한 모바일 웹 사이트로 리디렉션 기능도 제공합니다.
이를 통해 방문자 분석 및 캐시 된 백분율값과 클라우드플레어가 제공된 데이터와 캐시된 데이터 용량을 볼 수 있습니다.
무료로 무려 4GB가 제공되어 2GB가 캐시된 효과를 볼 수 있습니다.
CloudFlare 삭제 제거방법
CloudFlare 등록 후 마음에 들지 않는다면 얼마든지 등록을 취소해 제거할 수 있습니다.
우측 하단 고급동작 -> CloudFlare에서 사이트 제거를 선택합니다.
이렇게 등록을 삭제한 뒤에는 앞서 변경한 네임서버를 원래 있던 서버로 되돌려놓아야 정상적으로 워드프레스 접속이 가능해집니다.
워드프레스 페이지 로딩 속도 개선 및 측정 방법 - 노랗IT월드
워드프레스는 전세계에서 제일 많이 사용하는 cms형 플랫폼으로서 무한한 홈페이지를 만들어 낼 수 있습니다. 하지만 워드프레스의 단점이 가볍진 않은 무게로 잘못 세팅을 하면 로딩 속도 느려
yellowit.co.kr
워드프레스 웹사이트 속도측정 4가지 - 로딩속도 SEO 최적화 5가지 - 노랗IT월드
이 글에서는 워드프레스와 같은 웹사이트의 속도측정하고 개선하는 방법을 알아보겠으며 워드프레스를 사용하는 예시를 통해 왜 속도 측정이 중요하며, 어떻게 최적화하는지를 설명하겠습니
yellowit.co.kr
'IT 리뷰 > 블로그 SEO' 카테고리의 다른 글
| 블루호스트 워드프레스 PHP 8.0 설정 오류 해결방법 (0) | 2021.10.23 |
|---|---|
| 워드프레스 내부링크 주소 문구 일괄 변경 플러그인 (0) | 2021.10.01 |
| 워드프레스 사이트맵 등록 웹마스터도구 소유권 확인 (0) | 2021.09.29 |
댓글