워드프레스로 전환하고 나서 하도 이런저런 플러그인을 만지다 보니 어느순간 블로그가 엄청나게 느려진 것을 발견했습니다. 몇번씩 갈아 엎은 끝에 어느 정도 최적화를 끝냈습니다. 서버가 2006년에 산 Mac mini 녀석이라 아무리 최적화를 했다고는 해도 데이타를 뽑아내는 속도가 썩~ 훌륭한 것은 아니더군요. 그래도 4년전 맥에서 이 정도 퍼포먼스가 나오는 것을 다행으로 생각해야죠.

하도 복잡했던 작업이라 이 포스트를 통해 그 동안의 최적화 작업을 스스로 메모해 놓으려고 합니다. 혹시 저와 같이 집에서 맥으로 블로그를 운영하시는 분들은 참조하세요.


Yahoo YSlow performance score 99점에 A등급, 프론트페이지 로딩시간 1초이내

이번에 최적화 작업을 하면서 목표는 매우 간단했습니다. 위 그림과 같이 YSlow퍼포먼스 테스트에서 A등급을 받는것, 그리고 프론트 페이지 로딩시간을 1초이내로 당기는 것이었습니다. 처음해보는 작업이라 며칠동안 무수한 삽질을 반복했지만 결국 달성은 했습니다.  아래는 구글 Page Speed Score 화면인데 91점을 획득(할때마다 1~2점씩 다릅니다) 했습니다.


Google Page Speed 에서도 92점을 획득


위 화면처럼 아직도 몇가지 최적화 할 과제들이 남아있지만 이정도면 괜찮다 싶어서 그대로 두었습니다.  지금 제 블로그에서 가동중인 플러그인 목록입니다.

  • Akismet : 댓글 스팸을 걸러주는 플러그인. 거의 이 세계에서는 필수인 듯. 벌써 몇개가 걸렸들었다
  • All in One SEO Pack : 검색엔진 노출을 도와주기 위해 최적화 해주는 녀석. 이 역시 거의 필수
  • Audio Player : 음악을 올리는 나에게는 필수. 한곡씩 밖에 못올리지만 이만큼 간편한 녀석도 없는 듯
  • Contact Form 7 : 포스트에서 쥔장에게 메일을 작성할 수 있는 플러그인. 강의 신청받을 때 유용할 듯
  • Customized Recent Comments : Sidebar 최근 댓글 목록 포맷을 커스터마이징 할 수 있는 도구 (사이드바를 확인하시라)
  • Guestbook Generator : 말 그대로 방명록을 깔끔하게 만들어주는 도구. 기본적으로 워드프레스엔 방명록이 없다
  • Image Widget : 사이드바 맨 위의 팻매스니 사진을 이걸로 만들었다. 배너출력 도구
  • My Category Order : 내가 원하는 순서대로 카테고리를 보여주게끔 한다
  • Tweet This : 포스트를 그대로 트위터에 등록할 수 있게 해준다
  • W3 Total Cache : 캐시 프러그인. WP Super Cache 대신 선택했다. 잘한 선택. 대부분의 최적화 작업을 여기에서 했다(강추!)
  • WordPress.com Stats : 방문자 통계 플러그인. 조금 더 지켜봐야겠지만 느낌이 괜찮다
  • WordPress Database Backup : DB백업은 필수, 당연히 필요하다.
  • WordPress Popular Post : 내 포스트별 조회수를 보여준다
  • WP-Page Navi : 워드프레스 기본 네비가 앞으로, 뒤로 밖에 없는걸 보고 첨엔 놀랐다. 필수아이템 !!
  • WP-Polls : 포스트에 Poll을 붙일 수 있게 해준다. 향후 가끔씩 써먹을 예정이다
  • WP-SlimStat-Ex : WordPress.com Stats와 비슷한 통계 플러그인으로 둘다 상호보완적으로 쓸만하다
  • WP-Whisper-Comment : 비밀댓글을 달 수 있게 해준다.
  • WPtouch : 스마트폰 전용 테마라고 생각하면 된다. 매우 잘만들어졌다. 강추!! 내 블로그에 접근하면 볼 수 있다
  • Yet Another Related Posts Plugin : 포스트아래쪽에 연관되는 포스트 목록을 자동 생성한다


최적화의 포인트는 많다

후우~ IT는 확실히 3D 직종으로 변해가고 있다. 화려하고 전문적인 영역으로 보이지만 실제로 그 안에서 일을 하다보면 ‘내가 뭘 하고 있는 건가..’하는 생각이 자주 들곤 했었다. 시스템에 장애가 생겼을 때 그 원인을 즉각적으로 명쾌하게 파악해 내는 것은 쉬운일이 아니다. 원인을 즉각적으로 잘 찾아내는 IT조직들은 대부분 실력이 좋아서라기 보다는 평시에 그만큼 원인을 Detect 할 수 있는 장치를 잘 해둔 탓이다. (하긴 그것도 실력이긴 하지…)

조금 작은 시스템이지만 블로그 역시 기본적으로는 커다란 시스템이 갖추고 있는 굵직한 체계는 다 들어가있다. 그 안을 들여다 보면 매우 복잡하다. 장애가 어디서 생겼는지 파악하는 것과 성능을 어떻게 올릴지 궁리하는 것은 기본적으로 접근경로가 같다. 네트워크, 서버, OS, 웹서버, DB서버, 어플리케이션 서버, 기타 시스템 소프트웨어들 그리고 블로그 호스팅 소프트웨어(워드프레스와 같은…) 등등 모든 요소에 성능을 올릴만한 포인트가 있고 또한 거기에 장애의 요인들이 숨어있다.

나의 최적화 노력은 순전히 소프트웨어 부문에서만 이루어졌다. 당장 좋은 성능의 Mac mini를 사기도 돈이 궁하고 물리적인 네트워크 스피드를 올리는 것도 그랬다.  소프트웨어를 통한 최적화는 궁한 사람들에게는 최적의 방법이다. 나의 최적화 작업은 크게 두단계로 나누어 진행되었다

  • DataBase 부문 : 별건 없다. MySQL의 Query Cache를 켜라 !
  • WEB (WordPress) 부문 : Cache를 최적화 하라 ! (W3 Total Cache)


MySQL Q-Cache

Query Cache는 같은 질의를 반복적으로 DB에 날렸을 때 번번히 DB에 요구를 보내지 않고 이미 가지고 있는 결과값을 Cache에서 꺼내서 바로 주기 때문에 성능향상에 도움이 된다. 특히 블로그와 같은 형태라면 더욱 그러할 것이다. MAMP에 들어있는 MySQL의 세팅을 보면 놀랍게도 Query Cache가 기본적으로 꺼져있다.  더 놀라운 사실은 MAMP에 내장된 MySQL의 파라미터 값을 세부적으로 조절할 수 없다는 사실이었다 !

MAMP 포럼을 뒤져본 결과 그건 사실이었고 이를 극복할 수 있는 것이 MAMP Pro였다.(MAMP Pro는 유료다 -.-)  Mac mini Server(Snow Leopard Server)라면 이걸 걱정할 필요가 없는데 나는 일반 Snow Leopard 유저이니 걱정할만 했고 반나절 정도를 고민하다가 전격적으로 MAMP Pro로 갈아탔다.  (점점 Mac mini Server를 사야하는 이유가 분명해 지고있다)


MySQL Administrator로 본 Query Cache 변수들


Query Cache를 설정하고 나자 위의 화면과 같이 DB캐시가 작동하기 시작한다. 설정이전에는 Qcache_not_cached와 Qcache_free_memory를 제외하고는 모두 0이었다. 성능? 물론 성능에 지대한 도움이 된다. 어떻게 설정하는지 알아보자.

작업은 간단하다. MySQL 설정 화일인 my.cnf에 다음 두줄을 더 적어 넣으면 그만이다.

query-cache-type = 1

query-cache-size = 20M

MAMP Pro의 File 메뉴에서 Edit Templete > MySQL My.cnf 를 선택하면 에디터가 열리는데 여기에 위의 두줄을 삽입하고 MAMP를 재시동하면 끝이다. query-cache-type=1 은 qCache를 사용하겠다는 선언이고 size는 cache의 크기이다.

 

WordPress의 최적화 (주로 Cache설정)

일단 WordPress의 캐시 플러그인으로 W3 Total Cache 를 이용하기로 결정했고 WP Super Cache를 지웠다. W3…는 다양한 플러그인과 테마 사용에 따르는 수많은 자바스크립트 화일과 css 화일들을 한군데로 묶어(combine) 압축할 수 있는 (minify) 기능이 존재한다. 실질적으로 이 기능이 라운드트립을 줄이고 로딩속도를 높이는데 지대한 공헌을 하였다.  이를 위해 다음의 몇가지 준비가 필요하다

  • W3 Total Cache Plug-In : WordPress.org 에서 구할 수 있는 플러그 인이다
  • Firefox : 모두 다 아는 웹브라우저. 아래의 세개는 파이어폭스 플러그인이다
  • Firebug :  성능측정 디버깅 등을 종합적으로 브라우저 상에서 수행 할 수 있는 개발도구(무료)
  • YSlow : Firebug의 플러그인으로 웹페이지 성능측정 결과를 제공한다 (무료)
  • Google Page Speed : 역시 Firebug 플러그 인으로 웹페이지 스피드를 측정한다 (무료)

위와 같은 도구들은 이번에 워드 프레스를 경험하면서 처음 알게되었다. (정말 이런 도구들이 무료라는 것이 신기할 따름이다)

자 위의 네가지 요소가 갖추어 졌다면 W3 Total Cache을 켜놓고 화이어폭스를 통해 내 블로그를 들여다 보면서 하나하나 튜닝해 나가는 작업이 남았다. 나는 처음 Yslow, Google Page Speed로 측정했을 때 D, 74점 정도가 나왔었다. 내 블로그의 여러 페이지들으르 분석해 보니 다운로드의 대부분을 차지하는 것이 자바스크립트 였는데 W3 Total Cache의 minify 옵션을 통해 15개의 자바 스크립트를 하나로 묶고 대략 8개의 CSS화일을 하나로 묶고나니 놀라울 정도의 성능 향상이 있었다.


좀 더 자세한 사항들은 아래의 링크를 참조하면서 따라 하기 바란다.


One more thing…

블로그에 올리는 사진 한장도 최적화를 통해 스피드를 증진시키는데 한몫할 수 있다. 나는 ImageOptim을 찾아서 사용하게 되었는데 보통 10% 정도의 화일크기를 줄여준다. 배치작업이 가능하다는 것이 장점이며 나는 이미 업로드한 블로그의 이미지들을 이 도구를 통해 한꺼번에 압축했다. (그런데 PNG화일의경우 최적화 속도가 조금 느린것 같은 느낌이다)

Facebook Comments