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

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

클라우드플레어는 외부 공격으로부터 웹사이트를 보호하기 위한 웹 애플리케이션 방화벽(WAF) 기능과 HTTP에서 HTTPS로 전환할 수 있는 SSL 인증서를 무료로 제공합니다. 또한 정적 콘텐츠를 캐싱하여 웹사이트 접속 속도를 비약적으로 개선할 수 있는 강력한 캐싱 기능을 제공합니다.

이 서비스는 무료 플랜으로도 기본적인 기능을 사용할 수 있어 비용 부담 없이 워드프레스 성능을 향상시키는 데 도움을 줍니다.

또한 클라우드플레어는 단독으로 사용할 수도 있지만, 워드프레스 최적화 플러그인(예: WP Rocket, W3 Total Cache)과 함께 사용하는 것이 최상의 성능을 발휘할 수 있습니다. 특히 클라우드플레어는 자체적으로 제공하는 공식 워드프레스 플러그인을 통해 간편하게 설정 및 관리를 할 수 있어 사용자 편의성을 높입니다.

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

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

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

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

워드프레스 Gzip 압축테스트

워드프레스 gzip 압축

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

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

압축되지 않은 페이지 크기 : 146.3 KB
압축 된 페이지 크기 : 29.6 KB
저축 : 79.8 %

콘텐츠를 압축하면 대역폭 사용량을 줄일 수 있어 비용을 절감하고, 특히 인터넷 연결이 느린 장치에서는 렌더링 시간이 단축됩니다. 뿐만 아니라 서버의 부하를 줄이는 데도 효과적입니다.

웹 페이지의 서버 파일을 즉석에서 압축하려면 서버가 약간의 추가 연산을 수행해야 하지만, 결과적으로 서버가 한 번에 처리해야 하는 작업량이 감소하여 전력 소비를 크게 절감할 수 있습니다. 작은 파일을 전송하는 데 필요한 시간이 줄어들기 때문에, 워드프레스 호스팅 서버는 주어진 시간 동안 더 적은 수의 열린 연결을 유지할 수 있습니다. 이는 HTTP 압축을 활성화하는 데 사실상 단점이 거의 없음을 보여줍니다.

HTTP 압축을 활성화하는 가장 일반적인 방법은 mod_deflate 또는 mod_gzip을 사용하는 것입니다. 이를 통해 HTML, CSS, JavaScript, XML 같은 모든 정적 콘텐츠를 자동으로 압축할 수 있습니다. 또한 XML의 한 형태인 SVG 이미지도 압축 대상에 포함됩니다.

만약 서버가 콘텐츠를 압축하도록 설정되어 있지 않고 이를 변경할 수 없는 상황이라면, 다른 방법도 사용할 수 있는데 예를 들어, HTML 파일에만 적용하고자 한다면, 문서 상단에 간단한 PHP 코드를 추가해 PHP가 HTML을 실시간으로 gzip 형식으로 압축하도록 만들 수 있습니다.

이와 같은 방식으로 콘텐츠를 효율적으로 압축하면 웹사이트의 성능과 사용자 경험이 크게 향상될 수 있습니다.

PHP 문서의 맨 위에 다음 줄을 추가하기만 하면 됩니다.
<? ob_start(“ob_gzhandler”); ?>
내용이 출력되기 전에 삽입되어야 합니다. mod_deflate만큼 효율적이지는 않지만 여전히 잘 작동하며 엄청난 대역폭과 프로세서 전력을 절약합니다.

CloudFlare 사이트 추가

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

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

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

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

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

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

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

저같은 경우는 도메인을 카페24에서 사용하고 있는데 해당 DNS 서버를 CloudFlare로 변경해야합니다.

카페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분정도 시간이 소요되었습니다.

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

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

워드프레스 클라우드플라워 속도개선 최적화 플러그인 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