블로그 로딩 속도 향상 방법

모뎀에서 광랜(GigaBit Ethernet)으로 인터넷 전송 회선은 엄청난 발전을 이루었습니다. 예전 모뎀으로 10분 이상 걸리던 자료 전송이 단 몇 초 만에 끝날 정도로 빨라졌지요.

하지만 경이적인 전송 회선이 일반화된 요즘에도 모뎀 사용하던 시절의 향수를 불러일으키는 느린 블로그는 여전히 존재합니다. ^^; 그렇다면 페이지 로딩이 늦어지는 이유는 무엇일까요? 아마도 가장 유력한 원인은 웹 서버나 전송 회선의 일시적인 문제일 것입니다. 하지만 상습적으로 속도 지연이 발생한다면 다른 문제가 있지는 않나 의심해봐야 합니다.

문제가 무엇인지 파악하는 첫 번째 방법은 블로깅 툴을 처음 설치했을 때를 떠올려보는 것입니다. 분명히 예전에는 빨랐는데 어느 순간부터 느려지기 시작했다면 스킨이나 플러그인, 외부 스크립트 등의 내부적인 문제 때문일 가능성이 높습니다. 웹 서버나 전송 회선이 다운그레이드 되는 경우는 드물 테니까요.

그래서 스킨이나 플러그인, 외부 스크립트의 영향을 배제한 블로깅 툴의 속도를 먼저 비교해봤습니다. 최적화된 속도라고 할 수 있는데 이 상태에서 스킨이나 플러그인을 적용하면서 블로그는 조금씩 느려질 것입니다. 이렇게 로딩 속도에 영향을 미치는 요인들을 알아보고 어떻게 해야 속도를 향상시킬 수 있는지 생각해보도록 하지요.

또한, 캐시(cache)를 이용한 페이지 로딩 속도 향상에 대해서도 다루겠습니다. 정적인(static) 페이지와 동적인(dynamic) 페이지의 속도 차이를 볼 수 있습니다.

Lord Time Analyzer 테스트

Lord Time Analyzer구글에서 만든 파이어폭스 브라우저의 부가 기능(addon)입니다. 우리가 웹 페이지를 볼 때 브라우저가 어떤 과정을 거치는지 알 수 있도록 해주는 유용한 애드온이지요. 이것을 이용해서 태터툴즈, 워드프레스, 텍스트패턴 블로그의 속도를 측정해봤습니다. 테스트 환경과 그래프의 의미는 앞서 포스팅한 블로깅 툴간의 속도 차이를 참고하시고 여기에서는 간단히 결과만 알아보겠습니다.

테스트 결과

블로깅 툴 속도 비교 결과

비교하기 쉽도록 그래프를 그려봤는데 단위가 빠졌군요. 숫자는 초(second)를 나타냅니다. 눈으로 보기에는 차이가 크지만 실제로는 가장 느린 워드프레스도 0.4초가 약간 넘을 뿐입니다. 오차를 줄이기 위해서 여러 번 시험한 다음 빠른 결과를 골랐는데 서버나 회선 상태에 따라서 느려지는 경우는 많지만 어느 한계 이상 빨라질 수는 없으리라 생각했거든요. 하지만 워낙 짧은 시간에 테스트가 끝나기 때문에 결과 값에 편차가 큰 편입니다. 그러니 이점을 감안해서 봐주시기 바랍니다.

Lord Time Analyzer를 이용하면 웹 페이지 전송 시간을 단계적으로 알려주는 html 문서를 만들 수 있습니다. 위 테스트에 사용된 결과를 하나의 html 문서로 정리했는데 자세한 결과값을 보실 분들은 상세 결과 보기를 클릭하세요.

결과 분석

그래프에서 볼 수 있듯이 워드프레스가 타 블로깅 툴보다 실제로 전송이 이루어지기까지 걸리는 시간(TTFB)이 약 0.2초 더 걸립니다. OctaGate SiteTimer를 이용한 지난 시험과 비슷한 결과지요. 이 차이가 워드프레스의 실행 속도 차이라고 예상됩니다.

기본적으로 세 블로깅 툴 모두 0.5초 이내에 페이지 전송이 끝납니다. 이후에 브라우저가 해당 문서를 화면에 표시(렌더링)하는 과정이 더 있지만 엄청나게 복잡한 문서가 아닌 한 순식간에 끝나기 때문에 무시할 수 있을 정도지요.

또한 테스트와 결과 분석의 편의를 위해서 각각의 스킨에서 CSS나 이미지를 제외시키고 테스트했는데 제 경험으로는 회선 상태가 나쁘지 않고 스킨에 아주 많은 이미지가 있지 않다면 로딩 속도가 크게 떨어지지는 않습니다. 길어야 0.5초 정도 늦어지리라 추측하는데 그렇게 될 경우라 해도 전체 로딩 속도는 대략 1초 미만이 됩니다.

물론 블로그에 글이 많아지게 되면 어쩔 수 없이 속도 저하가 생깁니다. 하지만 제 경험으로는 이것 역시 속도 저하에 미치는 영향은 크지 않습니다.

대부분의 경우 새로 블로깅 툴을 설치하고, 마음에 드는 스킨을 적용시킨 다음 첫 글을 썼을 때 그 페이지는 늦어도 1초 안에 열렸을 것입니다. 이 상태에서 플러그인과 외부 스크립트가 하나씩 들어갈 때마다 조금씩 늦어지는 것이지요.

캐시(cache) 사용 테스트

속도 비교 그래프에 제시된 녹색 막대(TTFB)는 페이지를 실시간으로 생성하는 블로깅 툴의 속도에 자체적인 한계가 있음을 보여줍니다. 그렇다면 정적인 html 문서는 얼마나 빨리 전송될까요? 답을 찾기 위해서 많은 사용자들이 최고의 워드프레스 플러그인의 하나로 꼽는 WP-Cache 플러그인을 적용한 후 테스트해봤습니다. 결과는 놀라울 정도더군요.

워드프레스 캐시 사용에 따른 속도 비교

보시는 바와 같이 WP-Cache 플러그인을 적용하면 페이지 전송 속도가 네 배 이상 빨라집니다. 브라우저가 요청한 문서를 웹 서버가 새로 만들지 않고 이미 만들어서 보관하고 있는 문서를 보내주기 때문이지요. 이론적으로는 동일한 문서를 전송하므로 두 그래프의 파란색 막대 길이가 비슷해야 하지만 실제로는 약간 차이가 있습니다. 하지만 실제로는 0.016초 차이니 무시할 정도라 할 수 있겠네요.

WP-Cache 플러그인 설치 방법은 Mei Clamo 블로그의 Wordpress plugin, WP-Cache 2.0 페이지를 참고하세요.

실제로 이 플러그인이 적용된 페이지가 얼마나 빠른지 느껴보려면 제 테스트 블로그를 시험해 보세요. 캐시는 특정 페이지를 누군가 먼저 요청했을 경우에 만들어지며 특정한 시간(1시간으로 설정됨)이 지나면 만료됩니다. 그러니 혹시 로딩이 느리다 생각되면 새로 고침으로 다시 열어보세요. 차이가 분명히 느껴질 것입니다.

† 현재 테스트 블로그의 WP-Cache 플러그인은 비활성화 상태입니다.

블로그 속도가 느려지는 원인

원래 속도 비교에 대해서는 이전 글을 포함해서 하나로 포스팅하려 했는데 두 개로 나누다보니 전개가 매끄럽지 않군요. ^^;

저는 블로그가 늦게 열리는 현상을 직접 경험해보지는 않았습니다. 하지만 다른 분들의 블로그를 돌아다니다 보면 몇 초를 기다려도 열리지 않는 곳도 많더군요. 탭 브라우징이 일반화되어서 일단 열어 놓고 천천히 보기는 하지만 불편한 것은 사실입니다.

그렇게 페이지 로딩이 늦어지는 원인을 나름대로 블로그를 하면서 알게된 정보를 바탕으로 추측해봤습니다. 많이 알고 계신 기본적인 내용들이지만 강조해서 나쁠 것은 없겠지요. 원인을 파악하면 해결 방법도 자연스럽게 알 수 있을 것입니다.

최적화되지 않은 플러그인 사용

로딩 속도 저하의 가장 큰 원인이라고 생각하는 것이 최적화되지 않은 플러그인의 사용입니다. 대부분의 오픈 소스 블로깅 툴에 사용되는 스크립트 코드는 최적화 면에서 어느 정도 검증되었다고 볼 수 있습니다. 즉, 속도 저하를 신경쓰면서 개발된다는 얘기지요. 하지만 플러그인은 해당 스크립트 언어를 아는 사람이면 누구나 개발하고 배포할 수 있습니다.

제가 사용하는 태그 표시 플러그인(tru_tags)의 안내 페이지를 보면 일부 기능에 대해서 서버에 많은 부하를 주니 주의해서 사용하라는 경고를 볼 수 있습니다. 일반적으로 글 목록과 관련된, 예를 들어서 월별 포스팅 목록과 태그에 포스팅 개수를 표시하거나 관련 글을 뽑아서 보여주는 기능을 제공하는 플러그인은 주의해서 개발되고 사용되어야 합니다.

따라서 블로그의 속도 저하를 막으려면 블필요한 플러그인 사용을 자제하고 꼭 필요할 경우에는 적용 전과 후를 비교해서 속도 저하가 없는지 확인해봐야 합니다. 많은 사람들이 사용하고 꾸준히 피드백되는 검증된 플러그인을 선택하는 것도 좋은 방법입니다.

과도한 외부 스크립트 사용

외부 스크립트란 말 그대로 자신의 블로그 서버가 아닌 다른 서버에 있는 스크립트를 의미합니다. 대표적인 예로는 구글의 애드센스를 들 수 있지요. 일반적으로 속도를 고려해서 만들어진 외부 스크립트는 페이지 로딩 지연에 결정적인 역할을 하지는 않지만 역시 아무런 고려 없이 개발될 경우에는 문제가 됩니다. 외부 서버에서 불러들이기 때문에 해당 서버에 문제가 발생하면 전송 시간이 급격하게 늦어질 수 있는데 이런 상황을 제대로 처리하지 못하면 전체적인 속도 저하로 이어질 가능성이 있으니까요.

외부 스크립트 사용의 문제점에 대해서는 CunningWeb 블로그의 너무 늦게 열리는 페이지에 관한 글을 참고하시기 바랍니다.

가장 좋은 방법은 불필요한 외부 스크립트를 아예 사용하지 않는 것입니다. 피드 구독 링크나 북마크 사이트 지원 등의 기능은 일부 방문객들에게 편리함을 주지만 만약 그중의 어느 한 스크립트에 문제가 있을 경우 모든 방문자가 속도 저하를 겪게 됩니다. 따라서 외부 스크립트를 적용할 경우에는 편리성과 속도 저하의 가능성을 저울질해보는 것이 좋습니다. 마찬가지로 검증된 스크립트를 사용하고, 적용 전후를 비교해보는 것도 유익합니다.

복잡한 스킨 사용

스킨은 블로그의 개성을 표현하는 중요한 수단입니다. 하지만 잘못 사용하면 속도 저하의 원인이 되기도 하지요. 제 경험으로는 다소 용량이 큰 이미지를 사용한다고 해서 속도가 크게 늦어지지는 않습니다. 워낙 전송 회선이 좋아졌으니까요.

하지만 적은 크기라도 너무 많은 이미지를 포함시키면 속도 저하가 생길 수 있습니다. 모뎀으로 저속 회선을 사용할 때에는 큰 이미지를 몇 개의 작은 이미지로 나눠서 올리는 방법이 일반적이었습니다. 하지만 지금은 어지간한 크기의 이미지는 말 그대로 순식간에 전송받을 수 있지요. 웹 서버가 동시에 처리할 수 있는 접속의 수는 제한되어 있기 때문에 한꺼번에 많은 사용자가 몰릴 경우를 대비해서 이미지의 개수를 가능한 줄이는 것이 좋습니다.

마찬가지로 너무 많은 CSS나 스크립트 파일을 링크하는 것도 안좋습니다. 작은 크기의 CSS 파일이 여러 개 있다면 하나로 통합시키는 것이 속도 면에서는 유리합니다.

마치며

사실 속도에 대한 욕심은 끝이 없습니다. 개인적으로는 0.3초 이내에 페이지가 열려야 로딩이 빠르다고 생각합니다. ^^; 하지만 속도에 대해 너무 관대한 분들도 많습니다. 몇 초가 지나도 열릴 기미가 없는 블로그는 정말 좋은 정보가 있지 않는 한 다시 방문하기 꺼려질 것이므로 적정한 선에서 관리를 하는 것이 방문객들에 대한 배려가 아닐까요?

이렇게 적정한 속도를 유지하는데 필요한 것은 무엇보다 ‘관심’입니다. 사실 속도 저하는 시간을 두고 조금씩 꾸준히 진행되는 경우가 많은데 그러면 나중에는 원인을 찾기도 어렵게 됩니다. 스킨을 바꿀 때나 새로운 플러그인을 설치할 때 혹시라도 눈에 띄게 느려지지는 않는지 확인하는 것만으로도 방문객에게 불편함을 줄 만큼의 속도 지연은 막을 수 있으리라 생각합니다.

댓글 4개가 달렸습니다. 태그: , , , ,

  1. 은현 | 2007-07-15 22:02

    하핫. 간만에 보는 텍페네요.
    저는 한때 텍페 사용하다 워프로 옮겼거든요. 워프가 더 빠르네라고 생각했던건 착각일까요. 하하

  2. wystan | 2007-07-15 22:38

    아무래도 서버 사양이나 설정이 속도에 많은 영향을 미치기 때문에 사용자에 따라서 얼마든지 다른 결과가 나올 수 있을겁니다.

    워낙 변수가 많은 테스트라서 과연 얼마나 신뢰성이 있을까 하는 의문도 있지만 그래도 참고는 될 수 있으리라는 생각에 글을 써봤답니다. ^^

    혹시라도 저와는 다른 결과가 나오는 분은 꼭 알려주셨으면 좋겠네요.

  3. Draco | 2007-07-16 04:53

    대표적인 느려지는 원인인 외부 스크립트에 다음 웹인사이드 같은 통계 기능이 있죠. 이상하게 반응이 느린 경우가 많더군요. 그래서 페이지 끝에 삽입하지만...

    하지만 요즘은 부실한 계정서비스가 은근히 많아서, 서버 상태 영향도 큰듯 합니다.

  4. wystan | 2007-07-16 14:52

    말씀하신대로 서버 상태도 큰 영향을 끼치리라 생각합니다. 호스팅 서비스 요금이 업체에 따라서 크게 차이 나는 것을 보면 분명히 성능이나 안정성 차이가 있겠지요. 물론 저가의 호스팅 서비스라고 해서 무조건 부실하지는 않겠지만 고가의 서비스와 동일하지는 않을 겁니다. 특히 부하(load)가 많이 걸리는 상태에서는요.

    그런데 워낙 저렴한 호스팅 서비스만 이용하다보니 상대적인 차이를 경험해볼 수가 없네요. 접속자와 트래픽이 워낙 적기도 하고요. 마음 같아서는 서버 스트레스 테스트(stress test)를 해보고 싶은데 쫓겨날까 봐 못하고 있습니다. ^^;

댓글이 닫혔습니다.