나를 찾는 아이 - Simple is the best, Go to basic

원문 : http://www.webmonkey.com/blog/The_Five_Best_Firebug_Extensions



파이어버그(firebug)와 관련된 5가지 익스텐션을 소개해드립니다.


1. YSlow (다운로드)

가장 잘 알려져있는 firebug 익스텐션인 YSlow입니다.

yahoo에서 발표한 웹사이트 최적화 항목들에 대해서

해당 홈페이지가 어떤 등급을 나타내는지 보여줍니다.

이를 통해서 자신의 웹사이트가 어떤 부분에서 성능개선이 요구되는지 확인할 수 있습니다.



2. firecookie (다운로드)




firebug에는 왜 이런기능이 없나 항상 생각했는데 좋은 익스텐션이 있군요.

저는 ncookie 라는 익스텐션을 그간 사용하고 있었는데 firecookie로 갈아타야겠습니다.

이 익스텐션의 기능은 내 컴퓨터에 설치되어있는 모든 쿠키들을 볼수 있습니다.

쿠키 값은 물론 수정가능합니다.



3. firephp (다운로드)

http://www.firephp.org/

php와 연동해서 firebug의 콘솔 탭에서 php버그를 확인할수 있습니다.

이 익스텐션은 워낙에 설명해야할 부분이 많으니 이쯤에서 소개 마치도록 하고

정확한 사용법에 대해서는 홈페이지를 참고하세요.

참고로 php5 이상에서 사용가능합니다.



4. Pixel Perfect (다운로드)

캡쳐 사진을 보면 알수 있듯이

실제 웹페이지와 비교해서 정확한 픽셀을 맞추도록 도와주는 익스텐션입니다.



5. Rainbow (다운로드)


firebug의 자바스크립트에 색상을 입혀줍니다.

그간 너무 심심하게 검정색으로만 나왔는데 좀더 자바스크립트 코드보기가 한결 쉬워지겠군요.

3, 4, 5번 익스텐션은 아직 테스트단계로 모질라에서 다운로드를 시도할 경우

로그인을 필요로 합니다. 참고해두시기 바랍니다.

또한 3, 4, 5 익스텐션은 이왕이면 파이어폭스 및 파이어버그 최신버전에서 사용하시는게

안정성이 있는것 같아보입니다.


파이어버그 만세!

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

얼마전 YSlow 플러그인을 소개하면서

야후의 웹사이트성능향상을 위한 스킬 내용을 번역하려고 했는데

이미 좋은 번역해주셔서 링크 소개합니다.


웹사이트 속도를 높이는 방법1
웹사이트 속도를 높이는 방법2
웹사이트 속도를 높이는 방법3
웹사이트 속도를 높이는 방법4
웹사이트 속도를 높이는 방법5
웹사이트 속도를 높이는 방법6

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

YSlow는 야후의  웹사이트의 high performance 룰에 의거해 웹페이지 분석을 해준다.

firefox의 초강력 애드온인 firebug와 통합된 개발툴이다.

firefox addon YSlow 다운로드

YSlow는

퍼포먼스 리포트
HTTP/HTML 요약
페이지에 사용된 컴포넌트 리스트
JSLint를 포함한 툴

을 제공한다.

1. Make Fewer HTTP Requests
2. Use a Content Delivery Network
3. Add an Expires Header
4. Gzip Components
5. Put CSS at the Top
6. Move Scripts to the Bottom
7. Avoid CSS Expressions
8. Make JavaScript and CSS External
9. Reduce DNS Lookups
10. Minify JavaScript
11. Avoid Redirects
12. Remove Duplicate Scripts
13. Configure ETags
14. Make Ajax Cacheable

목차를 보면 알수 있듯이 HTTP request, header, gzip, css, js, dns, etag, cache 등

개발 전반에 걸친 방법론을 제시하고 있다.

바로 YSlow는 이 내용에 기반한 분석툴이다.


이 부분까지 언급하면 내용이 자칫 너무 길어질수 있으니

이 14개 항목에 대해서는 다음기회에 언급하도록 하고


YSlow에 대해서 알아보도록 하겠다.



설치를 완료하면 firebug의 제일 끝자락에 YSlow라는 메뉴가 생긴것을 볼수 있다.

YSlow탭에 들어가면

performance, stats, components, tools, help 메뉴가 있다.

제일 첫번째 메뉴인

performace를 클릭하면

YSlow는 웹페이지를 분석하기 시작한다.

분석이 끝나면 위의 그림과 같이 분석결과를 보여준다.

각 항목별로 A부터 F까지의 등급을 적용해 보여주고

총등급도 보여주고 있다.

위 사진의 결과 F등급은 네이버의 퍼포먼스를 조회해본 결과이다.



그럼 이 툴은 내놓은 야후는 어떨까?

야후코리아의 퍼포먼스를 검색해보니


F등급의 네이버와 달리 B등급이 나왔다.


두번째 메뉴인 stats 에서는 cache정보와 cooke 정보를 보여준다.

(야후에서는 cache를 하여 http request를 줄이는 방법이 를 웹사이트의 퍼포먼스를 높이는 아주 좋은 방법이라고 말하고 있다)


다음은 components 메뉴

js, css, flash, css로 사용된 이미지, 콘텐츠로사용된 image, html, iframe등

해당 페이지내에 사용된 모든 컴포넌트들을 보여주고 있다.

또한 expires와 etag 를 보여줌으로서

역시 cache의 중요성을 강조하고 있으며

gzip 여부도 함께 보여줘 gzip의 중요성도 강조하고 있다.



tools 메뉴는 문법검사라던지 사용된 js와 css를 보여준다.


그중 printable View 메뉴는



위와 같이 보고서 형식으로 웹사이트 분석 결과를 알려주고 있다.


YSlow는 웹사이트의 성능 분석을 하는 보조적인 툴로 아주 유용한 도구임에는 틀림없다.

물론 DB query최적화라던지 효율적인 DB설계, 효율적인 알고리즘 역시 중요한 요소이겠지만

이뿐만 아니라 다른 여러가지 요소도 웹사이트의 퍼포먼스를 결정짓는 중요한 요소이다.


다음 기회에 야후에서 말하는 웹사이트 퍼포먼스 향상 방안 14가지에 대해서 다뤄보도록 하겠다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.