워드프레스 최적화 Log

By | 2010-09-26

워드프레스로 전환하고 나서 하도 이런저런 플러그인을 만지다 보니 어느순간 블로그가 엄청나게 느려진 것을 발견했습니다. 몇번씩 갈아 엎은 끝에 어느 정도 최적화를 끝냈습니다. 서버가 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

13 thoughts on “워드프레스 최적화 Log

  1. 홍순모

    Mac Mini 로 홈서버를 구축하는 방법도 있네요.
    좋은 글 잘 읽었습니다. 저도 홈서버를 만들었지만 부지런하지 못해서 블로그에 글을 많이 올리지 못해서 트래픽이 거의 없습니다.

    전 오래된 노트북과 리눅스 조합입니다. 돈의 거의 들이지 않았죠…블로그 보다는 웹앨범, 문서관리시스템, MediaTomb 등의 미디어 서버등 주로 개인용으로 사용하고 있습니다… 사실 거의 10개월 이상 켜놓고 있는데 큰 문제는 없었지만 워낙 오래된 노트북이라 디스크나 기타 하드웨어적으로 문제가 생기지 않을까 해서 데이터 백업을 하려고 합니다… 하드웨어만 Mac Mini로 갈아 타고 싶네여…

    Reply
    1. demitrio Post author

      홈서버는 계속 켜놓아야 하고 대기모드에 빠지면 안되기 때문에 전력사용량이 중요할듯 합니다.
      그런면에서 최근에 나온 맥미니는 80w정도로 최고죠. 24시간 가동시켰을때 월 2천원 정도라 하더군요. 반면 제 구형 맥미니는 110w 입니다. 거의 40% 정도 전기를 더 먹죠. 홈서버 구축시 참고할만한 사항일듯 합니다. 들러주셔서 감사합니다 ^^ (그건 그렇고 입력폼이 좀 잘못되었네요 CSS를 수정해봐야겠습니다 -.-;;)

      Reply
  2. kwans

    역시 워드프레스였군요!!! 첫페이지 보는 순간 앗 이건 티스토리가 아닌데… 라는 느낌이 들었습니다. 역시 예상적중~. 아! 혹시 위드프레스를 통해 개인도메인 등록까지 상세한 강의좀 부탁할수 있을까요? 블로그를 통해서요 ㅎㅎ. 아니면 워드프레스 테마를 티스토리에 적용할 수 있는 방법이라도… ㅠㅜ 귀찮으시겠지만 부탁드려봅니다.

    Reply
    1. demitrio Post author

      전 티스토리는 아니지만 텍스트 큐브(어차피 같은 태생)를 사용해보고 이번에 워드프레스 테마들을 만져보게 되면서 그 구조들을 들여다 보게 되었는데 그 이유는 저의 예전 테마를 워드프레스에 적용할 수 있을까…때문이었죠. 워드프레스 최신판인 3.0.1로 넘어오면서 그런데… 참 많이 다르더군요. 하물며 같은 워드프레스 테마라도 버전에 따라 차이점이 큽니다. 워드프레스 3.0.1은 뭐랄까…블로그와 카탈로그, 매거진 형태의 다양한 목적의 웹사이트를 포괄하도록 하는 기능이 많습니다. 대부분의 기존 테마들이 새로운 워드프레스 버전을 모두 지원하지 못하죠. 지금 제가 사용하는 이 테마 역시 마찬가지입니다. 그래서 예전 테마를 여기에 적용하려는 걸 포기하고 여기에 안주했죠. 그 반대의 경우도 손을 대기 참 어렵다고 느껴집니다.

      Reply
  3. 에효.

    안녕하세요. 죄송하지만 뭐 좀 궁금한게 있어서 여쭤보려는데요.
    W3 Total Cache를 설치하긴 했는데
    The required directives for fancy permalinks could not be detected, please confirm they are available. 이런 에러가 뜨는데 fancy permalinks가 무슨뜻인지 도통 모르겠더군요. 혹시 어떻게 해결 해야 되는지 알려주실수 있나요?

    Reply
    1. demitrio Post author

      하…이거 저도 처음해보는 거라서 말이죠…저 역시 계속 헤딩을 하면서 배워나가는 중이랍니다. 말씀하신 메시지는 저는 구경하지 못했군요. 저보다는 개발사 홈페이지 등을 참조하는 것이 낫지 않을까요?

      Reply
  4. hungi

    Mac 좋아하는 wordpress 사용자입니다.
    아직 초보라 제 블로그는 외부에서 뜨질않네요..
    구글링중 여기까지 와서 좋은 정보 담아갑니다.
    아직 제 블로그는 해결이 안된 상태네요
    서버사양은 펜티엄3 256 RAM/ 리눅스입니다.

    Reply
    1. demitrio Post author

      혹시 외부는 안되고 내부만 된다면 네트워크 설정때문일 가능성이 높습니다. 제 블로그에서 맥으로 블로그 운영하기 시리즈
      http://www.demitrio.com/?p=93 를 한번 읽어보세요. 조금 도움이 되실겁니다.

      Reply
      1. hungi

        네 80포트 막힘 문제는 해결 하여서 html은 나오지만..
        php실행이 되긴하는데요.. 한참기다린 후에야 CSS디자인 깨져서 블로그가 나옵니다.. 그래서 wp super cache 플러그인 설치해서 html로 정적페이지 파싱하려구요.. 잘될지 모르겟네요~

    2. demitrio Post author

      캐쉬를 사용하기 전에 먼저 완전한 페이지가 제시간에 뜨는 것이 더 중요하다고 생각됩니다.

      Reply
  5. jaeihyun

    지금은 2013년 3월 22일 금요일 입니다.
    오래 전에 쓰신 글 같은데 호스팅을 계속 운영중이시네요.
    좋은글 잘 읽고 지나가다 감회를 좀 나누려 써 봅니다.

    Reply
    1. demitrio Post author

      감사합니다~ 벌써 3년이 지났네요 ㅎㅎ

      Reply

demitrio 에 응답 남기기 응답 취소