그 동안 Yahoo 에서 내부적으로 사용하던 웹 페이지 성능 분석 도구인
Yslow 가 공개 되었습니다.

http://developer.yahoo.com/yslow/ 

Yslow 는 Firefox add-on 웹 개발 도구인 Firebug 와
연동되어 동작하며, 웹 페이지 최적화를 위한
13가지 규칙(Rules for High Performance Web Sites)에 따라
어느 곳을 튜닝 할지 알려 주는 툴입니다.



사용 방법을 간략히 살펴 보겠습니다.

▷ 설치하기

0. 브라우저는 당연히 Firefox를 이용해야 합니다.

1. Firebug 설치
http://www.getfirebug.com/ 에서 아래 버튼을 눌러 Firebug를 인스톨 합니다.

2. Yslow 설치

http://developer.yahoo.com/yslow/ 에서
[Download Now] 버튼을 눌러 Yslow를 설치 합니다.

3. Firefox를 다시 시작합니다.


4. Firefox 의 오른편 아래에 있는 회색 동그라미를 눌러
Firebug를 Enable 시킵니다.


5. 모든 준비가 끝나면 다음과 같은 아이콘이 브라우저 하단에 보입니다.


▷  사용하기

사용 방법은 매우 직관적이고 간단합니다.

분석하고자 하는 페이지로 이동한 뒤에
Yslow 탭의 Performance, Stats, Components를 보시면 됩니다.

1. Performance
해당 웹 페이지의 Performance Grade를 보여 주고
최적화를 위한13가지 규칙에 맞게 최적화 방법을 안내 해 줍니다.
(물로 영어 입니다. ㅠㅠ)

2. Stats
Empty Cache, Full Cache, Cookies 정보를 보여 줍니다.


3. Components

현재 페이지를 구성하고 있는 구성요소들의
Type, URL, Expires, Size 등의 정보를 보여줍니다.

4. 기타
Tools -> Printable View를 선택하면
아래와 같이 Performance, Stats, Components를 한 페이지에 보여 줍니다.
보고용으로 사용하기 적합하겠군요.



어찌 보면 Yslow 는 Firebug 에게 힘을 실어 주는 도구인 것 같습니다.
Yslow 와 함께 Firebug 의 인기가 더욱 상승할 것으로 예상됩니다.

참고로 IE 용으로 만들어진 Firebug Lite 버전에서는 동작하지 않습니다.

웹 페이지 성능 최적화에 관심이 있는 분은
아래 Exceptional Performance를 읽어 보시면 도움이 될 것 같습니다.
아쉽게도 영어 입니다. ^^
http://developer.yahoo.com/performance/

참고 URL
1. Firebug: http://www.getfirebug.com/
2. Yslow: http://developer.yahoo.com/yslow/
3. Rules for High Performance Web Sites:
http://developer.yahoo.com/performance/

신고
Posted by 정진호 일상예술가

댓글을 달아 주세요

  1. BlogIcon 짱가 2007.07.31 16:53 신고 Address Modify/Delete Reply

    매우 좋은 포스트네요.

  2. 쿨워터 2007.08.01 17:06 신고 Address Modify/Delete Reply

    원츄~! ^^ b