블로깅 툴간의 속도 차이

링크를 클릭하고 페이지가 브라우저에 표시되기까지 수 초간의 짧은 시간 동안 브라우저와 웹 서버 사이에는 어떤 일이 벌어질까요?

먼저 브라우저가 원하는 페이지를 전송해달라고 웹 서버에 요청하게 됩니다. 그러면 웹 서버가 이에 대한 응답으로 해당 페이지의 html 문서를 브라우저에게 전송합니다. 브라우저는 전송된 html 문서를 해석해서 페이지 출력(렌더링)에 필요한 CSS, 이미지, 스크립트 파일 등을 순차적으로 다시 웹 서버에 요청하고 그 결과를 받아옵니다. 그러면서 동시에 페이지를 그려나는데 이렇게 필요한 자원에 대한 요청과 전송, 렌더링이 동시에 이루어지기 때문에 이미지가 많이 포함된 페이지도 빠르게 화면에 표시됩니다.

그렇다면 웹 서버는 html 문서에 대한 요청이 들어오면 어떻게 반응할까요?

크게 두 가지 경우로 나눌 수 있습니다. 하나는 단순히 웹 서버 파일 시스템에 보관되어 있는 html 문서를 그대로 보내주는 것입니다. 이런 정적인(static) 컨텐츠는 특별한 처리가 필요없으므로 무척 빨리 전송할 수 있지요.

다른 하나는 웹 서버가 요청받은 문서를 실시간으로 만들어서 전송하는 것입니다. 이와 같은 동적인(dynamic) 컨텐츠는 일반적으로 PHP, JSP, ASP 등의 스크립트 언어를 이용해서 만들어지는데 이 과정에서 불가피하게 브라우저의 요청에 대한 전송이 지연되는 결과가 발생합니다. 웹 서버에 관한 정보를 담고 있는 위키피디아 문서에 따르면 정적인 컨텐츠에 비해서 적게는 두 배에서 많게는 백 배 이상의 시간이 소요된다고 하네요.

블로그를 운영하는데 사용되는 대부분의 블로깅 툴은 데이타베이스와 스크립트 언어를 이용해서 동적으로 페이지를 만들어줍니다. 기본적으로는 동일한 방식이지만 구현상의 차이 때문에 실제로 페이지가 완성되기까지 걸리는 시간에는 차이가 생깁니다. 앞서 태터툴즈워드프레스, 텍스트패턴체감 속도에 관해 언급한 적이 있었는데 이 글에서는 보다 객관적인 방법으로 세 블로깅 툴의 실행 속도 차이를 비교해보고 실행 속도에 영향을 미치는 요인에는 어떤 것들이 있는지 알아보겠습니다.

시작하기 전에

블로깅 툴의 실행 속도를 정확히 측정하기는 어렵습니다. 전문적인 툴을 사용하면 정확성을 높일 수 있겠지만 대부분이 상용 프로그램이더군요. 간단한 방법을 사용했기 때문에 이 비교 테스트에는 많은 오차가 있을 수 있습니다. 그러니 절대적인 비교가 아닌 참고 자료로 생각해주시기 바랍니다.

또한 위에 소개한 웹 서버의 동작 원리와 앞으로 설명할 기술적인 내용은 속도 비교를 위한 자료를 모으면서 얻은 나름대로의 이해를 바탕으로 합니다. 웹 서버에 관한 전문적인 지식이 없기 때문에 정확하지 않은 부분이 있을 수 있음을 감안하세요. 잘못된 점에 대한 지적은 언제든지 환영합니다.

테스트 환경

비교할 세 블로깅 툴은 모두 비누넷 호스팅 서버에 설치했습니다. 이 블로그가 운영되고 있는 계정과는 별개이며 Apache 1.3.27, PHP 4.4.2, MySQL 4.0.22 버전을 사용하고 있습니다. 각각의 블로그 주소는 다음과 같습니다.

† 2010년 3월 20일: 아래 링크는 더 이상 유효하지 않습니다. ^^;

블로깅 툴 버전 블로그 주소
태터툴즈 1.1.3 코어 www.wystan.net/blog/tt/
워드프레스 2.2.1 www.wystan.net/blog/wp/
텍스트패턴 2.0.5 www.wystan.net/blog/txp/

세 블로그 모두 기본 스킨(테마)을 적용했으며 CSS와 이미지 파일은 불러들이지 않도록 했습니다. 파이어폭스 브라우저를 이용한 테스트는 캐시(cache)의 영향을 배제하기 위해서 아래와 같이 설정한 상태로 진행했습니다.

network.http.use-cache "false"
browser.cache.disk.enable "false"
browser.cache.memory.enable "false"

OctaGate SiteTimer 테스트

많이 알려진 웹 페이지 로딩 속도 테스트 방법입니다. 서버가 스웨덴에 있기 때문에 측정 결과가 일반적인 국내 웹 환경과는 차이가 있고, 브라우저가 실제로는 요청하지 않는 자원까지도 테스트에 포함시키기 때문에 현실성은 떨어집니다. 하지만 느린 전송 속도로 인해서 시험 오차가 적기 때문에 상대적인 속도 비교에는 상당히 유용합니다.

테스트 결과

아래 그래프는 순서대로 각각 태터툴즈, 워드프레스, 텍스트패턴의 속도 측정 결과입니다. 반복 측정한 다음 평균적인 값이라 생각되는 결과를 골랐습니다. 직접 측정해보려면 OctaGate SiteTimer 페이지를 이용하세요.

태터툴즈 페이지 로딩 속도

워드프레스 페이지 로딩 속도

텍스트패턴 페이지 로딩 속도

그래프에서 각각의 막대는 다음과 같은 의미를 갖습니다.

  • 노란색 막대 웹 서버에 연결되기까지 걸리는 시간 (Connect Time)
  • 녹색 막대 요청한 자원을 처음 보내는데 걸리는 시간 (Time To First Byte)
  • 파란색 막대 요청한 자원을 전송받는 시간 (Page Download Time)

결과 분석

태터툴즈

브라우저가 웹 서버에 연결되는데 0.3초 정도가 소요됩니다(노란색 막대). 서버와 연결되면 브라우저가 웹 서버에 필요한 자원을 요청하게 되고 이때부터 웹 서버가 PHP 언어와 MySQL 데이타베이스를 이용해서 브라우저가 요청한 문서를 실시간으로 작성한 후 브라우저에게 보낼 준비를 합니다. 이 과정은 약 1초 정도가 걸리는데 소켓 연결이나 자원 요청이 느린 해외 통신망을 통해 이루어지므로 실제 문서 작성 시간은 1초보다 훨씬 짧을 것입니다(녹색 막대). 전송 준비가 끝나면 브라우저가 요청한 자원을 웹 서버가 전송하게 되는데 약 1.3초 정도 걸리는 것을 확인할 수 있습니다(파란색 막대).

전체 소요 시간은 이 세 과정에 걸리는 시간을 합한 약 2.6초가 됩니다.

워드프레스

워드프레스는 태터툴즈에 비해서 녹색 막대로 표현되는 TTFB가 0.3초 정도 더 길게 측정됩니다. 여러 번 측정해봐도 항상 0.2~0.3초 정도 느린 것을 볼 수 있는데 특별히 속도에 영향을 미칠만한 다른 요인이 없으므로 워드프레스가 페이지를 만드는 시간이 다른 블로깅 툴보다 느리기 때문이라고 판단됩니다.

우리가 어떤 링크를 클릭한 후 화면이 갱신되는 시점은 TTFB 이후가 되므로 이 시간이 짧으면 짧을수록 페이지가 빨리 로딩된다고 볼 수 있습니다. 앞서 언급했듯이 브라우저는 html 문서를 전송받으면서 동시에 전송된 결과를 해석하고 화면에 출력하기 때문에 페이지의 크기보다는 얼마나 빨리 전송이 시작되느냐가 중요합니다. 태터툴즈는 파란 막대의 길이로 알 수 있듯이 만들어내는 html 문서의 양이 워드프레스보다 많지만 빨리 만들기 때문에 체감 속도는 태터툴즈가 더 빠르게 느껴집니다.

텍스트패턴

태터툴즈와 녹색 막대의 길이가 거의 비슷합니다. 즉, TTFB에 별 차이가 없음을 알 수 있습니다. 반복해서 테스트해보면 텍스트패턴이 근소하게 빠르지만 태터툴즈가 더 많은 기능(트랙백, 태그)을 기본적으로 제공하므로 우열을 가리기는 어렵습니다.

텍스트패턴은 워드프레스와 마찬가지로 간결한 html 문서를 작성합니다.

로딩 속도와 문서 크기의 영향

OctaGate SiteTimer 테스트에서는 전체 소요 시간에서 파란색 막대로 표시되는 전송 시간이 큰 비중을 차지합니다. 하지만 일반적인 국내 웹 환경을 고려하면 실제 체감 시간과 문서 크기와는 큰 관련이 없다고 할 수 있습니다. 예를 들기 위해서 테스트한 페이지의 크기와 예상되는 전송 시간을 Website Optimization 사이트의 분석 서비스을 이용해서 표로 만들어봤습니다.

블로깅 툴 문서 크기 전송 시간 (56K) 전송 시간 (T1)
태터툴즈 19908 바이트 4.17초 0.31초
워드프레스 4415 바이트 1.08초 0.22초
텍스트패턴 3346 바이트 0.87초 0.22초

56K 모뎀으로 접속하면 텍스트패턴이 태터툴즈 블로그보다 3초 이상 빨리 열릴 것입니다. 하지만 T1(1.544Mbps) 회선에서는 0.1초 미만의 차이가 나는 것을 알 수 있습니다. 일반적으로 실제 전송 속도는 T1보다 훨씬 빠른데 예를 들어서 테스트에 사용한 19908 바이트의 태터툴즈 페이지는 제 컴퓨터로 약 30ms(0.03초) 이내에 전송이 완료됩니다. 즉, 수십 킬로바이트(KB) 정도의 크기는 로딩 속도에 거의 영향을 미치지 않습니다.

하지만 웹 서버에 과도한 트래픽이 몰릴 경우에는 태터툴즈로 운영되는 블로그에 가장 큰 속도 저하가 생깁니다. 기본적으로 워드프레스나 텍스트패턴 블로그보다 매번 10KB 이상을 더 전송해야 하기 때문입니다.

마치며

OctaGate SiteTimer와 함께 구글이 만든 파이어폭스 확장 기능인 Load Time Analyzer를 이용해서 테스트를 했는데 내용이 너무 많아서 한 번에 다 쓰려니 힘드네요. Load Time Analyzer는 제가 사용하는 회선에서 페이지가 얼마나 빨리 전송되는지 알려주는데 보통 0.5초 이내에 완료되기 때문에 시간이나 서버 상태에 따라서 오차가 크게 나타납니다. 하지만 이 테스트에서도 워드프레스는 태터툴즈나 텍스트패턴보다 TTFB가 평균적으로 약 0.2초 늦습니다. 결국 워드프레스가 느리다는 결과가 나옵니다.

구글을 검색해보면 워드프레스의 속도를 향상시키는 방법에 관한 글이 많습니다. 그중에서 많이 알려지고 효과도 좋은 방법이 페이지를 정적으로 보관(caching)하는 WP-Cache 플러그인을 사용하는 것입니다. 과연 얼마나 빨라질까 싶어서 적용해봤는데 정말 놀라운 결과를 보여주더군요. 정적인 페이지와 동적인 페이지의 속도 차이를 분명히 볼 수 있었습니다.

다음 글에서 Load Time Analyzer와 WP-Cache 적용 결과와 나름대로 알게된 블로그의 속도 향상 방법에 대해서도 얘기해보지요.

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

  1. luztain | 2007-07-14 23:22

    Tool간의 속도차이가 있군요.
    (이 블로그가 태터툴즈인줄 알았습니다 ;;)

  2. wystan | 2007-07-14 23:47

    수치적인 속도 차이는 많아야 0.3초 정도입니다.
    워낙 늦게 열리는 블로그가 많은 요즘 추세를 생각하면 불편함을 줄 만큼은 아니지요.

    블로깅 툴은 사용자가 많은 순서대로 나열했습니다. ^^;

  3. 꼬마얀 | 2007-07-15 00:19

    헤... wp가 tt보다 빠르다는건 처음 알았네요. 그런데 이것도 56k에서의 차이이고 t1급으로 넘어가니까 체감할 수 없을만큼 엇비슷해지는군요. ^^

    좋은 자료 잘 보고 갑니다. 조사하시느라 수고많으셨어요 ^ㅡ^

  4. wystan | 2007-07-15 00:44

    태터툴즈는 회선 속도가 올라갈수록, 워드프레스는 서버 사양이 좋아질수록 속도 향상에 유리하다고 생각합니다.
    물론 회선이나 서버 사양이 어느 정도 이상이면 실제 체감 속도는 차이가 거의 없으리라 예상되네요.

    칭찬해주셔서 고맙습니다. ^^

  5. S2day | 2007-07-15 03:05

    오옷... 저런 차이가 나는군요. 제가 쓰는 개인 서버가 좋지 못하지만^^;
    이거원 조금더 빨라질려면 업그레이드를 고려해봐야겠군요. 좋은 정보 감사합니다.

  6. wystan | 2007-07-15 10:02

    내용을 다 마무리한 다음 알려드릴려고 했는데... 조금 빨리 오셨네요. ^^;

    속도 차이가 있다고는 하지만 실제로는 극히 짧은 시간입니다. 현실적으로는 서버 업그레이드보다 블로그 스킨이나 플러그인, 외부 스크립트, 이미지 사용 등을 최적화하는 방법이 속도 향상에는 더 큰 도움을 줄 것입니다.

    또한, Wp-Cache 플러그인 사용도 검토해보세요. 엄청나게 빨라지거든요. 관련 글을 조만간 올리겠습니다.

댓글이 닫혔습니다.