소프트웨어/JavaScript • Dhtml

MySpace's Performance Tracker

falconer 2009. 7. 20. 10:57

최근들어 유명 사이트들 내부에서 자체 사용을 위해 개발한 툴들을 오픈 소스로 전환해 발표하는 경우가 많아졌다.

웹사이트의 퍼포먼스 향상을 위해 페이지 렌더링 또는 병목현상에 대한 부분들을 검사해 대처할 수 있도록 하는 툴들 중에는 대표적으로 Yahoo의 YSlow가 있고, 최근들어 Google이 발표한 Page Speed, AOL의 Page Test, IBM의 Page Detailer, MS의 Visual Round Trip Analyzer 등이 있다. (구글의 경우에는 퍼포먼스 관련 사이트를 별도로 운영하고 있기도 하다.)

이와 비슷한 맥락에서 미국의 대표적인 SNS 사이트인 MySpace에서도 지난 6월 24일 열린 O'Reilly의 대표적인 퍼포먼스 관련 컨퍼런스인 Velocity 에서 퍼포먼스 관련 툴인 MySpace’s Performance Tracker를 발표했다.

Performance Tracker는 IE 플러그인 형태로 실행되며, IE6+ 버전에서 사용이 가능하다. (MS .Net Framework 2.0과 Flash 9가 설치되어 있어야 한다.)

다른 툴들과는 차별화된 기능들을 많이 제공하는데, 단계적으로 페이지가 로딩되는 것을 스크린샷과 코드로 살펴볼 수 있도록 하고 있고 CPU와 메모리 사용량 등도 확인할 수 있다.

사용하려면 IE에서 측정하고자 하는 사이트로 이동한 후에, 도구 > MySpace’s Performance Tracker를 선택해 MSFast를 실행한다.


그리고 나서 Start Test 버튼을 클릭하면 측정이 시작된다.

결과 화면은 크게 2가지로 Page Graph와 Validation Results로 나뉜다.

<Page Graph>


<Validation Results>


 

Page Graph는 전반적인 측정결과를 그래프로 출력해주고, Validation Results는 YSlow 또는 MySpace가 정한 퍼포먼스 향상을 위해 적용할 수 있는 rule 들에 대한 테스트 스코어를 출력해준다.

Page Graph 영역에는 각 요소들이 로딩되는 순서와 로딩에 따라 렌더링 되는 페이지의 스크린 샷을 순차적으로 출력한다. 해당 영역을 더블클릭하면 진행된 페이지 렌더링과 HTML 코드를 확인할 수 있다. 또한 연결속도에 따라 해당 구간의 소요시간 등도 확인할 수 있다.


오픈 소스 프로젝트로 진행되고 있어서 직접 소스를 받아보거나 프로젝트에 참여할 수도 있을것 같다. (아직은 checkout만 가능)

웹 페이지의 퍼포먼스는 서버에서 전달된 data를 렌더링해서 보여주는 front-side 에서의 작업이 서버에서의 작업보다 더 많은 영향을 미친다.

각 브라우저마다의 차이점도 존재하기도 하지만, 페이지의 퍼포먼스 향상을 위해 페이지내의 각 요소들을 어떻게 배치하고 로딩의 순서를 정해야 할지, 웹서버의 설정을 바꾸어 적용 한다던지(HTTP Compression, Cache, etc) 등등 신경써야할 것이 많다.

유명 사이트들 또는 SW 벤더들이 자체적으로 이러한 툴들을 개발하고 사용하는 것만 봐도 퍼포먼스의 중요성이 어느 정도인지를 잘 나타내고 있는 증거이기도 하다.


출처 : http://jaures.egloos.com/2361536