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

워드프레스 클라우드플레어 – GZIP CSS HTML 압축 최적화 속도개선

by

워드프레스를 사용하는 분들이라면 무거운 워드프레스의 단점을 개선하기 위해 다양한 최적화 모듈을 활용할 수 있습니다. 그중에서도 콘텐츠 전송 네트워크(CDN)와 보안 서비스를 제공하는 클라우드플레어(Cloudflare)는 워드프레스 속도를 비약적으로 개선하는 데 탁월한 선택입니다.

클라우드플레어는 WP Rocket 같은 워드프레스 최적화 플러그인과 뛰어난 궁합을 자랑합니다. 따라서 이미 최적화 플러그인을 사용 중이라면 클라우드플레어를 함께 사용하는 것을 강력히 추천합니다.

클라우드플레어의 주요 장점:

  • 웹 애플리케이션 방화벽(WAF): 외부 공격으로부터 사이트를 보호.
  • SSL 인증서 무료 제공: HTTP에서 HTTPS로 손쉽게 전환.
  • 강력한 캐싱 기능: 정적 콘텐츠를 캐싱하여 웹사이트 접속 속도를 대폭 향상.

특히, 무료 플랜에서도 이러한 강력한 기능을 제공하기 때문에 비용 부담 없이 워드프레스 성능을 개선할 수 있습니다. 워드프레스 사용자라면 꼭 활용해 보아야 할 도구라 할 수 있습니다.

노랗 목차 보이기

워드프레스 최적화 플러그인 CloudFlare 연동

워드프레스 클라우드플라워 속도개선 최적화 플러그인 1
WP Hummingbird / WP Rocket

기본적으로 Cloudflare를 제공하는 최적화 플러그인으로 아래 2가지를 추천합니다.

WP Rocket의 경우 유료플러그인으로 매우 만족스럽게 사용하고 있지만 돈이 들어가는게 싫은 분들은 허밍버드를 사용하느것도 추천합니다.

워드프레스 Gzip 압축테스트

워드프레스 gzip 압축

그리고 Gzip이 압축되었는지 확인하는 방법으로는 HTTPS 압축 테스트 홈페이지로 접속하면 확인이 가능합니다.

자신의 워드프레스 주소를 입력하면 압축하기전 용량과 압축 후 용량이 표시되며 녹색체크가 표시되면 제대로 워드프레스 Gzip이 압축이 된것입니다.

  • 압축 전 크기: 146.3 KB
  • 압축 후 크기: 29.6 KB
  • 절약률: 79.8%
    • 녹색 체크 표시가 나타나면 Gzip 압축이 정상적으로 활성화된 것입니다.

Gzip 압축의 장점으로는 전력 소비와 대역폭 절감과 렌더링 속도 향상, 서버부하 감소등이 있습니다.

전력 소비 절감: 작은 파일 전송으로 열린 연결 수 감소.

대역폭 절감: 콘텐츠 전송량이 줄어 비용 절감 효과.

렌더링 속도 향상: 인터넷 연결이 느린 환경에서도 빠른 페이지 로딩.

서버 부하 감소: 추가 연산이 필요하지만, 결과적으로 서버 효율성 개선.

Gzip 압축 활성화 방법

HTML, CSS, JavaScript, XML, SVG 같은 정적 콘텐츠를 자동 압축하기 위해서는 PHP 문서 상단에 아래 코드를 추가하면 HTML 압축이 가능합니ㅏㄷ.

<?php ob_start("ob_gzhandler"); ?>

Gzip 압축은 웹사이트 성능과 사용자 경험을 크게 향상시킬 수 있기 때문에 필수 체크항목이며 이렇게 간단한 설정으로 대역폭을 절약하고 로딩 속도를 개선하며, 서버 효율성을 극대화할 수 있습니다.

이 방법이 어렵다면 블루호스트 사용자라면 채팅을 통해 Gzip 압축을 요청하면 바로 진행해주니 이 점 참고하세요

CloudFlare 사이트 추가

CloudFlare 사이트 추가
CloudFlare 사이트 추가

클라우드플레어 Cloudflare 홈페이지에 접속 후 등록하고자 하는 사이트 주소를 입력합니다.

클라우드플레어 요금제
클라우드플레어 요금제

클라우드플레어는 프로와 비지니스,기업용이 있지만 무료버전으로 사용도 가능합니다.

  • 클라우드 애플리케이션 보호
    • Cloudflare는 에지와 원본에서 모두 클라우드 애플리케이션의 속도를 높이고 보호합니다.
  • 클라우드 연결 보호
    • Cloudflare는 HTTP(s) 프로토콜뿐만 아니라 SSH, SMTP, SFTP를 비롯한 TCP/UDP 서비스도 보호합니다.
  • 클라우드 액세스 보호
    • Cloudflare의 인증 및 ID 관리는 VPN을 사용하지 않고도 데이터를 올바르게 감시합니다.
  • 자체 공급자 사용
    • 대부분의 클라우드 공급자와의 통합이 빠르고 용이하므로 바로 준비하여 빠르게 실행할 수 있습니다. 심지어 자체 IP도 가져올 수 있습니다!
카페24 dns레코드 변경

사이트 추가가 되었다면 현재 DNS 레코드를 추가할 수 있습니다.

워드프레스 클라우드플라워 속도개선 최적화 플러그인 7

저 같은 경우는 도메인을 카페24에서 사용하고 있는데 해당 DNS 서버를 CloudFlare로 변경해야하며 호스팅 서버는 블루호스트 VPS 요금제를 사용하고 있습니다.

클라우드플레어를 사용하는 경우, 네임서버를 클라우드플레어로 변경하면 기존에 블루호스트와 연결했던 DNS 레코드(A, CNAME 등)가 클라우드플레어에서 관리되므로 지워지는 것이 아니라 클라우드플레어로 이전되어 설정됩니다.

클라우드플레어와 블루호스트 연동 유지

  1. 클라우드플레어 설정에서 블루호스트 DNS 복사
    • 클라우드플레어에 도메인을 추가하면 기존 DNS 레코드를 자동으로 가져옵니다.
    • 클라우드플레어에 추가된 레코드 중 블루호스트와 연결된 중요한 레코드가 누락되지 않았는지 확인하세요.
      • A 레코드: 도메인을 블루호스트 서버의 IP 주소와 연결.
      • CNAME 레코드: 도메인과 하위 도메인(예: www)을 올바르게 연결.
  2. 블루호스트에서 DNS 정보 확인
    • 블루호스트에 로그인하고, 현재 사용 중인 도메인의 DNS 설정(A, CNAME 등)을 확인합니다.
    • 클라우드플레어에 자동으로 추가되지 않은 레코드가 있다면, 클라우드플레어의 DNS 탭에서 수동으로 추가하세요.
  3. 클라우드플레어로 네임서버 변경
    • 카페24에서 네임서버를 클라우드플레어에서 제공한 값으로 변경합니다.
    • 네임서버 변경 후, 클라우드플레어가 DNS 트래픽을 관리하게 됩니다.
  4. 클라우드플레어에서 블루호스트와 연결 유지
    • 블루호스트 서버와 연결이 유지되려면 클라우드플레어의 DNS 레코드가 정확해야 합니다.
    • 블루호스트의 IP 주소(A 레코드)와 기타 필요한 설정(CNAME, MX 등)을 클라우드플레어에 추가하거나 기존 레코드가 정확한지 확인하세요.

클라우드플레어와 블루호스트 설정 유지 체크리스트

  1. A 레코드: 도메인과 하위 도메인(예: @, www)을 블루호스트 서버의 IP 주소로 연결합니다.
    • 예: @ -> 블루호스트 IP, www -> 블루호스트 IP
  2. CNAME 레코드: 하위 도메인 설정이 필요하다면, 블루호스트에서 설정한 CNAME 레코드를 클라우드플레어에 복사합니다.
  3. MX 레코드 (이메일): 이메일 호스팅을 사용하는 경우, MX 레코드를 정확히 클라우드플레어에 추가해야 합니다.
  4. TTL 설정: 클라우드플레어는 기본적으로 적절한 TTL(캐싱 유지 시간)을 자동 설정하므로, 특별한 경우가 아니면 변경하지 않아도 됩니다.
  5. 프록시(Proxy) 설정
    • 클라우드플레어에서 DNS 레코드의 프록시 상태를 확인합니다. (주황색 구름 아이콘: 활성화, 회색 구름 아이콘: 비활성화)
    • 블루호스트와 연결하려면 일부 레코드는 프록시를 비활성화(회색)해야 할 수 있습니다.

카페24 도메인서버 DNS 변경

워드프레스 클라우드플라워 속도개선 최적화 플러그인 8
카페24 dns레코드 변경

카페24기준 네임서버 변경으로 들어갑니다.

참고 : 카페24 네임서버 변경방법

네임서버 변경
네임서버 변경

다른 네임서버를 체크합니다.

워드프레스 클라우드플라워 속도개선 최적화 플러그인 10

카페24로 되어 있는 호스트명을 클라우드플레어 주소로 변경합니다.

  • 1차 네임서버 : nicole.ns.cloudflare.com
  • 2차 네임서버 : tody.ns.cloudflare.com
워드프레스 클라우드플라워 속도개선 최적화 플러그인 11

도메인서버 dns를 변경했다면 완료를 눌러줍니다.

이때 카페24에서 변경했다고 하더라도 처리되는데에는 최대 24시간이 소요될 수 있으며 저의 기준으로는 5분~10분정도 시간이 소요되었습니다.

도메인변경이 완료되면 활성으로 변경됩니다.

워드프레스 클라우드플라워 속도개선 최적화 플러그인 13
CloudFlare Global API Key

연동이 완료되었다면 플러그인에 있는 API 토큰을 이용해 Global API Key 보기를 눌러 토큰값을 입력하면 최종등록이 완료됩나디.

워드프레스 클라우드플레어 최적화

워드프레스 클라우드플라워 속도개선 최적화 플러그인 14

연동이 완료되었다면 클라우드플레어의 최적화 기능을 사용할 수 있습니다.

  • 워드프레스 분석
  • DNS
  • SSL / TLS
  • 방화벽 설정
  • 속도개선
  • 캐싱제거
  • 규칙 및 네트워크 트래픽등등
워드프레스 클라우드플라워 속도개선 최적화 플러그인 16

무료사용자들도 자동최소화 기능을 통해 웹사이트 소스코드의 파일크기를 줄일 수 있습니다.

  • JavaScript
  • CSS
  • HTML

압축을 통해 워드프레스 속도가 개선됩니다.

그리고 Brotli 압축을 통해 방문자의 HTTPS 트래픽에 대한 페이지 로드시간을 단축합니다.

클레어플레어 플러그인과 프로와 비지니스로 구입하면 더욱 빠른 속도를 제공하지만 전문 홈페이지가 아니라면 무료버전으로도 충분히 속도가 개선됩니다.

CloudFlare 연동해제 삭제방법

더이상 클라우드플레어를 사용을 원치않은 경우 고급동작에서 CloudFlare 사이트제거를 통해 등록을 해제할 수 있습니다.

워드프레스 수동 Gzip 압축방법

워드프레스 Gzip 압축확인 수동 압축 웹사이트 속도개선 1

워드프레스의 텍스트 Gzip 수동으로 압축하거나 압축유무를 확인하기 위해 websiteplanet 사이트로 접속합니다.

워드프레스 Gzip 압축확인 수동 압축 웹사이트 속도개선 2

그럼 현재 내 웹사이트의 Gzip 압축유무 및 용량을 확인할 수 있습니다.

워드프레스 Gzip 압축확인 수동 압축 웹사이트 속도개선 3

현재 압축되지 않은 상태로서 파일질라등을 통해 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 압축이 수동으로 됩니다.

워드프레스 Gzip 압축확인 수동 압축 웹사이트 속도개선 4

만약 .htaccess 파일을 수정할 수 없다면 PHP를 사용해 압축된 콘텐츠를 전송할 수 있습니다. HTML 파일을 .php 확장자로 지정하고 PHP 파일에 아래와 코드를 추가합니다.

<?php if (substr_count($_SERVER[‘HTTP_ACCEPT_ENCODING’], ‘gzip’)) ob_start(“ob_gzhandler”); else ob_start(); ?>

“Accept-encoding” 헤더를 확인할 수 있고 gzip으로 압축된 파일 버전(그렇지 않으면 정규 버전)을 반환할 수 있습니다.

Leave a Comment