워드프레스 성능 높이는 방법 2가지 (ft. hummingbird, cloudflare)

워드프레스 성능 점수가 낮네??

구글/빙 검색에서 유입량이 적어 이유가 대체 무엇일까 고민하다가, 구글에서 제공하는 사이트 성능 체크 사이트가 있다고 해서 성능 테스트를 진행해봤다. 구글에서 제공하는 https://pagespeed.web.dev/ 사이트이고, 주소만 넣어주면, 모바일과 데스크톱 성능 점수를 매겨서 보여준다. 기분이 나쁘게도 점수가 좋지 않게 나왔다. 혹시나 싶어 여러 번 테스트를 해봤는데, 항상 점수가 같진 않다. 하지만, 좋은 점수는 아니다.

우선 점수를 먼저 보자면, 모바일에서 31점, 데스크탑에서 88점이 나왔다. 웹페이지 로딩 속도가 느리면 구글 검색에서 제외하거나 후순위로 밀린다는 내용을 어디선가 봤기 때문에 성능을 높일 수 있는 방법을 찾아봤다.

우선 내 워드프레스의 설치된 플러그인 목록을 저장한다. 최소한으로 사용하려고 노력 중이다.

내 워드프레스에 설치된 플러그인 목록
설치된 플러그인 목록
  • Ad Inserter : 이건 구글 광고를 넣는 플러그인. 자동 광고도 넣고 있지만, 글 목록 나오는 곳곳에 넣고 싶어서 플러그인을 설치했다.
  • Code Block Pro : 말 그래도 코드 블럭이다. 코드만 다르게 보여주고 싶을 때 사용한다. 사용해 본 것 중에서 제일 괜찮은 듯 싶다.
  • Dissble XML-RPC : 음 XML-RPC 공격 방지용으로 설치한 플러그인. 이상하게도 .htaccess 에 xml-rpc 항목을 적으면 워드프레스 전체 사이트가 안뜬다. 그래서 어쩔 수 없이 사용하고 있는 플러그인. 아직도 이유를 모르겠다.
  • Rank Math SEO : 이건 요즘 유행한다는 SEO
  • UpdraftPlus : 디비 백업 플러그인이다.
  • Wordfence : 보안 플러그인다.
  • simple-SSL : 이건 왜 설치했지? SSL 인증서 때문에 설치했던 듯 싶다.
모바일 점수 31점
모바일 점수 31점!! 이럴수가
데스크톱 점수 88점
데스크톱 점수는 88점이다.

허밍버드(Hummingbird) 플러그인 설치

허밍버드 플러그인 웹사이트 : https://wordpress.org/plugins/hummingbird-performance

성능을 높이기 위해선 캐시 플러그인을 설치하면 된다는 리뷰들을 보고선, 우선 허밍버드 플러그인을 설치했고, Caching, Gzip, Asset 등의 무료 옵션은 모두 켜줬다. 허밍버드를 선택한 것은 한방에 다 하려고… 캐시는 WP Super Cache, Gzip은 뭐, JS 압축은 뭐뭐 이렇게 추천을 했는데, 하나씩 설치하기가 귀찮았다.

아무튼 플러그인을 설치하고, 다시 성능 테스트를 진행했더니, 모바일 39점, 데스크톱 90점 정도가 나왔다. 모바일 점수가 좋아지긴 했지만, 데스크톱 점수가 90점이 되는 녹색으로 나오는데, 모바일은 31점이나 39점이나 붉은색으로 보여준다. 뭔가 나한테 경고 하는 것 같아서 기분이 좋지 않다. 그래서 성능을 높이는 방법을 좀 더 찾아보니, CDN 서비스를 따로 사용하라고 한다. 유명한 CloudFlare라는 서비스를 이용해 보자는 생각에 다시 구글링 시작. 시놀로지에 돌아가는 여기 워드프레스에도 적용할 수 있다는 사실을 확인하고, 세팅하기 시작했다.

CloudFlare 세팅

CloudFlare 아 영어로 치려니 귀찮다. 클라우드플레어 세팅을 검색해보니, 뭐가 이리 설명이 많은지 사람을 쫄게 만든다. 하지만, 직접 세팅해보니 아주 매우 간단!! 아래 순서대로 진행하면 된다.

  1. 클라우드플레어 회원가입
    우선 https://www.cloudflare.com 사이트에 접속한다. 그리고 회원가입을 하자. 나는 구글계정으로 회원가입을 했다.
    회원 가입 끝!!
  2. 워드프레스 사이트 추가
    회원가입하고 나면, 사이트 추가할 수 있는 화면이 나온다. 여기에 https:// 또는 www을 뺀 순수한 도메인 명을 입력한다.
    vividian.net으로 입력했다.
  3. 요금제 선택
    3개 유료 요금제가 화면에 나타나는데, 밑으로 스크롤하면 무료 요금제가 나온다.
    개인 블로그에 뭐 트래픽이 높지도 않고, 구글 검색에서도 안 나오는 사이트 따위… 무료 요금제로 충분하다.
  4. 다음. 다음. 다음.
    갑자기 바람바람바람이 생각나지만… 아무튼 뭐 물어보면 다음 다음 다음 버튼을 눌러주면 된다.
    아주 쉽다.
  5. (중요!!!) 도메인 관리사이트에 클라우드플레어 네임서버 등록
    이 부분 때문에 어렵다고 생각이 들었었나 보다. 지금 vividian.net 도메인은 가비아에서 관리하고 있는 네임 서버를 클라우드플레어로 바꿔야 한다는 얘기다.
    위에 4번까지 끝나면 클라우드플레어 네임서버가 2개 등장한다. 네임서버명인데, 이걸 가비아에 등록하면 된다.
    가비아 사이트로 들어가서, 도메인 세팅 페이지에 접속 클라우드플레어 네임서버 2개를 등록했다. (다른 네임서버는 모두 지웠다.)
    반영되는데 최대 24시간이라고 해서, “나중에 확인해야겠군” 이라고 생각하고 새로고침 눌렀더니 2분만에 반영이 되었다.
가비아 사이트에 클라우드플레어 네임서버 등록
가비아 도메인 관리에서 네임서버를 클라우드플레어에서 알려준 주소로 넣어줬다.

이렇게 힘들게(?) 세팅을 하고, 다시 워드프레스 성능 점수를 재봤다.
와!! 모바일 62점 / 데스크톱 95점이 나왔다. 기뻐서 여러번 재봤더니 모바일은 61~65점 사이를 와따갔다하고, 데스크톱은 95~100점 사이를 와따갔다 한다. 100점 나오니깐 왠지 기분이 좋아진다. 그래도 모바일 점수가 붉은색에서 주황색으로 변경됐는데, 이것도 나중에 조치를 취해야겠다고 생각이 든다.

모바일 점수 62점
모바일 점수는 61~65점 사이가 나온다.
모바일 점수 95점
데스크톱 점수는 95~100점 사이가 나온다. 100점 나왔을 때 스샷을 찍었어야 했는데…

마치며

허밍버드 플러그인에 퍼포먼스 테스트가 있는데, 여긴 점수가 더 낮게 나오긴 한다. 그리고, 이것저것 고치라고 주르륵 나오는데 나중에 시간 들여서 해결을 해봐야겠다.
클라우드플레어 연결이 이렇게 쉬운줄 알았으면 시간내서 빨리 적용해 볼 걸 그랬다. 이렇게 점수가 높아질 줄은…


댓글 달기

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

위로 스크롤