블로그 속도를 향상시키기 위해 시도한 방법들

Edited by Leun Kim

티스토리에서 워드프레스로 블로그를 옮기고 나서, 무엇보다도 많은 시간을 투자한 작업은 블로그 속도를 향상시키는 작업이었습니다. 옮길 때만 하더라도 이 정도로 스피드가 안 나올줄은 예상치 못했던 터라 좀 멘붕이 왔습니다만, 덕분에 많은 것도 배웠고 예전에 비하면 많이 속도가 향상된 듯 싶네요(사실 아직 느리지만 OTL).

그럼 제 블로그의 속도 향상에 기여한 공이 큰 작업들부터 순서대로 나열해 보도록 하겠습니다.

1. Page Size 줄이기
기본적으로 페이지에 로딩되는 이미지 수를 감소시켜, 페이지 자체의 크기를 줄였습니다. 메인 페이지의 경우 초반 20MB 이상에서, 현재 5MB 선으로 줄어들었습니다.

2. Server 이전
기존의 GoDaddy 서버로부터 HostGator 서버로 이전하였습니다. 알아보니, GoDaddy의 경우 느린 속도로 정평이 나 있더군요.

3. Cache Plugin 적용
워드프레스 캐시 플러그인으로는 WP Total Cache 나 W3 Super Cache 가 유명하지만, 적용해 본 결과 QuickCache 라는 플러그인이 제 블로그에는 가장 잘 맞는듯 합니다.

4. Plugin을 다수 제거
초반에 뭣도 모르고 깔았던 다수의 플러그인들을 50%가량 삭제하였습니다. 플러그인을 많이 깔면 그만큼 CSS를 많이 로드해야 하니 느려질 수 밖에 없겠죠?

5. CSS Sprites 적용
다수의 이미지를 하나의 이미지로 압축시켜 로드하고 있습니다. 예를 들어 오른쪽 사이드바의 작은 이미지들 20여개를 1개의 이미지로 압축해서 CSS를 이용해 로드함으로써 서버로의 request 수를 대폭 감소시켰습니다.
Sprites에 사용한 사이트는 이 곳입니다.

6. Compression
.htaccess 를 수정하여 deflate compression을 사용하여 서버와 통신합니다. 제가 취한 방법은 이 링크의 아래쪽 1번과 2번 방법에서 자세하기 보실 수 있습니다.

7. CSS, HTML, JavaScript 최소화
여러가지 툴을 이용해서 CSS, HTML, JavaScript 를 최소화 시켰습니다.

8. 무손실 이미지 압축
Yahoo Smush.it 등을 사용하여 이미지를 무손실 압축할 수 있었습니다. 이미지 사이즈가 80% 이상 줄어든 파일들도 많이 있습니다.

9. 이미지 크기 지정
$<$img src$>$ 등의 태그 내부에 width와 height를 하나하나 지정해 줌으로써 브라우저의 렌더링 시간을 최소화 시켰습니다.

하지만!
제 사이트 속도가 느려진데 꽤 큰 기여를 한 “폰트”는 결국 포기하지 못하였습니다. 현재 한글 폰트인 “나눔고딕”과 일본어 폰트인 mplus-1p-regular 폰트를 동시에 로드하고 있는 것이 사이트에 꽤 큰 부담이 되고 있습니다. 또 오른쪽 사이드바에 Recent Comments 도 로딩 시간을 꽤 잡아 먹더군요 OTL.

그럼 우리 모두 초경량(超軽量)이면서 풍성한 블로그를 위해 화이팅!

 

 
I was born and raised in Daegu, S. Korea. I majored in electronics and math in Seoul from 2007 to 2012. I've had a great interest in math since freshman year, and I studied PDE in Osaka, Japan from 2012-2014. I worked at a science museum and HUFS from 2014 in Seoul. Now I'm studying PDE in Tokyo, Japan. I also developed an interest in music, as I met a great piano teacher Oh in 2001, and joined an indie metal band in 2008. In my spare time, I enjoy various things, such as listening music, blogging, traveling, taking photos, and playing Go and Holdem. Please do not hesitate to contact me with comments, email, guestbook, and social medias.



5 comments

  • 하핫.. 저도 가볍고, SEO에 최적화된 블로그(www.leunpark.com; 디자인만, IE지원X, 외국 서버라 느림) 만들고 있는 참이었는데 재밌는 글이 올라왔네요. 시험기간이라서 이러면 안 되니 간단하게 적고 공부하러 가겠습니다.ㅠㅠ

    웹에 대해 잘 안다면 블로그를 직접 만들면 가장 좋겠지만, 쉽고 다양한 기능을 지원하는 워드프레스 같은 것도 좋겠죠. 여기서 다양한 기능이라는 게 문제를 일으키죠. 지금 이 글보기(?) 페이지만 해도 114 requests에 4.6MB(only transferred)라 합니다. 지금 제작 중인 제 블로그가 11 requests에 277KB(+cache)인 거에 비하면 뭔가 엄청난 숫자임을 알 수 있죠. 그래서 제가 간단하게 속도를 증진시킬 방법 몇 가지를 적어 보았습니다.

    1. CSS, JS 합치기(HTTP 요청 최소화): 지금 여기서 소스 보기(크롬상 Ctrl+U)를 하면 엄청난 CSS의 광경을 보실 수 있습니다. 이 페이지에는 총 31개의 스타일시트 파일이 있는데, 한 개 로딩할 때 100ms라 계산해보면 총 3.1s가 됩니다. 그런데 이걸 compressor하고 하나로 합쳐서 용량이 좀 늘어나 로딩하는 데에 많이 잡아 1s가 걸렸다 해봅시다. 그래도 2.1s나 이득인 걸 알 수 있습니다(syntaxhighlighter 기능은 안 쓰시는 거 같은데 빼셔도 될 것 같네요). 이런 관점에서 보면 css sprite는 아주 탁월한 선택이죠. :)

    2. 디자인 요소는 <head>안에, script는 </body> 전에(스타일시트와 자바스크립트 배치를 이용한 성능 향상): 말이 상당히 난해한데요. html은 위에서부터 아래로 차례대로 읽어 렌더링을 진행합니다. 눈치가 빠르다면 여기서 ‘디자인 요소를 위에 놔두고 script들은 밑에 놔두면 체감속도가 빨라지겠구나!’라고 알 수 있죠. 그리고 웹표준상 css들은 head안에 넣어야 하고요. 그런데 지금 css, favicon과 google analytics 로딩 소스가 body 한가운데에 있죠. 저로서는 속도보다 더 중요한 소스 미관상 안 예쁘므로 css와 favicon소스는 <head>안에, script는 </body>전으로 자리를 옮겨줍시다.

    3. 중복되는 것 지우기: 이건 정말 쉽죠. 지금 소스에 favicon 관련이 120, 221번째 줄에 있습니다. 둘 중 하나는 없애버립시다. 그리고 google analytics 소스도 138, 209번째 줄에 두 개 있습니다. 그런데 이둘 중 209번째 줄에 있는 소스가 더 최신 소스(analytics.js)이므로 138번째 줄에 있는 건 없애버리고 209번째 줄에 있는 걸 위에서 말했듯이 </body> 전으로 자리를 옮겨줍시다.

    4. 폰트 캐시 설정하기: 폰트 때문에 많이 느리다고 했는데요. 폰트는 DOM contents가 구성될 때까지 기다렸다가 적용이 되어서 많이 느리게 보입니다. 그러니 DOM이 빨리 구성되게 하면 되는데, 그 방법들은 위에 있듯이 CSS와 이미지를 빨리 로딩하는 겁니다. 그 방법들은 위에 있죠? 그리고 잘 될지는 모르겠는데 폰트들을 다 /font/ 같은 곳에 집어넣고 .htaccess를 사용해서 gzip이랑 cache 설정해 보시고 그래도 안되면 여기 에서 ajax로 로딩하는 기법 한번 적용해 보세요.

    5. Hosting 이전: 지금 호스팅 사용 중인 곳이 미쿡꺼 맞죠? 아시다시피, 미쿡에서 태평양을 건너오기 때문에 속도가 느려요. 속 편하게 한국 호스팅(cafe24.com, phps.kr)이나 일본 호스팅 쓰시는 것도 좋은 방법일 거 같네요. 일본이랑 한국은 해저케이블로 바로 연결되어 있으니 다른 국가들보다는 빠르고요.

    웹에 대해서라면 말하고 싶은게 엄청나게 더 많지만, 이만 공부하러 가겠습니다. 아, 아까 댓글에서 말했듯이 될 수 있으면 b보다 strong, strong보다 span으로 style을 입히는 걸 권장하고 있습니다. html 공부까지 하시다니! 전.. 시험공부 해야 하는데 집중력이.. 😥

    • 오.. 정말 감사합니다. 하나하나씩 한 번 시도해 보아야 겠네요! 아, 서버같은 경우는 일부러 미국 쪽을 선택했습니다. 뭐 속도만 빼면야 득이 더 많고, 장기적으로도 그렇고요. 게다가 남한이나 일본이나 서버가 실제로 폭파될 가능성도 있죠 ㅎㅎ

      html을 공부하지는 않습니다. 뭐, 중딩시절때 좀 배운것 말고는 없었는데, 블로그 운영하다보니 얼떨결에 html과 기초적인 CSS를 습득해 나가게 되었네요.

      앞으로도 전문가적인 조언 많이 좀 부탁드립니다. 굽신굽신..

    • 와, 드디어 블로그가 슬슬 자리잡고 있으신가 보네요, 축하드립니다! 코멘트를 남길려고 했는데, 아직 코멘트 활성화는 안 되었나 보네요.
      그리고 제 사이트에 대한 분석 다시한번 정말로 감사드립니다. 일단은 각종 플러그인들의 수많은 CSS와 JavaScript 파일들을 좀 압축해서 로드시켜 보았습니다 :) 후에 플러그인을 좀 더 제거해서 로드해야하는 부담부터 일단 줄여 봐야겠습니다. 그래도 여전히 폰트 부담이 가장 큰 것 같네요. 메인페이지 같은 경우 총 5.0MB 로드 중 폰트만 순수하게 4.3MB를 차지하더군요 OTL. 한글이나 일본어, 중국어같은 문자들이 이런 면에서는 웹상에서 알파벳계열 언어보다 확실이 뒤쳐지는것 같습니다.

      그리고 말씀하신 Syntax Highlighter가 혼자서 커다란 CSS 파일을 무려 3개나 로드하고 있었더군요OTL, 물론 과감히 삭제해 버렸습니다.