http://www.hoons.kr

웹 사이트 성능 튜닝웹웹 사이트사이트 성능성능 튜닝튜닝

박경훈박경훈(HOONS)(HOONS)Microsoft Visual C# MVP(2005~2008)Microsoft Visual C# MVP(2005~2008)HOONSHOONS닷넷닷넷 사이트사이트 운영자운영자 -- www.hoons.krwww.hoons.kr블로그블로그 –– http://blog.hoons.krhttp://blog.hoons.kr

www.hoons.kr

발표발표 순서순서

웹웹 사이트사이트 성능의성능의 오해와오해와 진실진실

웹웹 사이트사이트 최적화최적화 테크닉테크닉

www.hoons.kr

Part1. Part1. 웹웹 사이트사이트성능의성능의 오해와오해와 진실진실

www.hoons.kr

참고자료: http://home.blarg.net/~glinden/StanfordDataMining.2006-11-29.ppt

+500 ms +500 ms --20% traffic20% traffic@ Google@ Google

+100 ms +100 ms --1% sales1% sales@ Amazon@ Amazon

웹웹 사이트사이트 성능이성능이 왜왜 중요할까중요할까??

- 매월/ 2700만 명의 사용자 감소

- 분기/ 약 500억 원의 매출손해

www.hoons.kr

성능을성능을 결정하는결정하는 요소요소

www.hoons.kr

브라우저의브라우저의 동작동작

GET http://www.hoons.kr/ HTTP/1.1

헤더값Accept: */*Accept-Language: koUser-Agent: Mozilla/4.0 (compatible; MSIE 7.0; ..Connection: Keep-Alive… HTTP/1.1 304 Not Modified

Date: Mon, 03 Mar 2008 12:12:44 GMTEtag: "5f655c22d5fc81:6f“…

www.hoons.kr

브라우저의브라우저의 동작동작

www.hoons.kr

웹웹 사이트사이트 성능의성능의 오해와오해와 진실진실

www.hoons.kr

YahooYahoo 사이트사이트 사례사례

서버단:

5%UI단:

95%

캐시를 이용한다 하더라도

UI 단 = 88%

www.hoons.kr

미국미국 TOP 10TOP 10의의 UI UI 단의단의 성능성능 비율비율처음 방문시 재

방문시(캐시이용)

amazon.com 82% 86%

aol.com 94% 86%

cnn.com 81% 92%

ebay.com 98% 92%

google.com 86% 64%

msn.com 97% 95%

myspace.com 96% 86%

wikipedia.org 80% 88%

yahoo.com 95% 88%

youtube.com 97% 95%

www.hoons.kr

성능의성능의 진실진실

성능을성능을 올릴올릴 수수 있는있는 가능성이가능성이 더더 크다크다. .

더더 간단하다간단하다..

개발개발 비용을비용을 줄일줄일 수수 있다있다..

웹 사이트 응답시간의 80-90%는

UI 단의 동작에서 소비된다.

www.hoons.kr

어떻게어떻게성능을성능을높일까높일까??

www.hoons.kr

성능성능 측정측정 도구도구 -- YSlowYSlow

불여우불여우(Firefox) Add (Firefox) Add –– on Toolson Tools

1414가지가지 규칙에규칙에 따라서따라서 A~FA~F까지의까지의 등급을등급을 매김매김

다운로드다운로드http://www.getfirebug.com/http://www.getfirebug.com/

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

www.hoons.kr

Live AnalysisLive Analysis

www.hoons.kr

웹사이트웹사이트 최적화최적화 기법기법

20072007년년 99월월 발매발매::- 아마존 컴퓨터 인터넷 부분 1위

20082008년년 66월월 번역서번역서 발매발매::1. Make fewer HTTP requests2. Use a CDN3. Add an Expires header4. Gzip components5. Put stylesheets at the top6. Move scripts to the bottom7. Avoid CSS expressions8. Make JS and CSS external9. Reduce DNS lookups10. Minify JS11. Avoid redirects12. Remove duplicate scripts13. Configure ETags14. Make AJAX cacheable

www.hoons.kr

RIA (Rich Internet Application)RIA (Rich Internet Application)

1414개의개의 규칙규칙

www.hoons.kr

Part2. Part2. 웹웹 사이트사이트최적화최적화 테크닉테크닉

www.hoons.kr

HTTP HTTP 요청요청 줄이기줄이기

www.hoons.kr

HTTP HTTP 요청요청 줄이기줄이기10K x 1010K x 10개개 < 100K x 1< 100K x 1개개

www.hoons.kr

일반일반 이미지이미지: : http://blog.hoons.kr/NexonExpires/http://blog.hoons.kr/NexonExpires/이미지맵적용전이미지맵적용전.htm.htm이미지맵이미지맵 적용적용: : http://blog.hoons.kr/NexonExpires/http://blog.hoons.kr/NexonExpires/이미지맵적용후이미지맵적용후.htm.htm

이미지이미지 맵의맵의 사용사용

www.hoons.kr

1414개의개의 스크립트스크립트: : http://blog.hoons.kr/NexonExpires/9http://blog.hoons.kr/NexonExpires/9개의스크립트개의스크립트.htm.htm11개로개로 모은모은 스크립트스크립트: : http://blog.hoons.kr/NexonExpires/1http://blog.hoons.kr/NexonExpires/1개의스크립트개의스크립트.htm.htm

2. 2. 스크립트스크립트 CSS CSS 합치기합치기

www.hoons.kr

구글의구글의 수수께끼수수께끼

www.hoons.kr

3. CSS Sprite3. CSS Sprite의의 사용사용

<style>.orangeBG{

background: url( 'sprites.png' ) repeat-x 0 0; }

</style>

www.hoons.kr

귀찮다귀찮다 ??

귀찮게귀찮게 언제언제 저런저런 거를거를 하고하고 앉아앉아 있습니까있습니까??

-- 사용자사용자 경험경험, , 네트워크네트워크 비용비용, , 서버서버 비용비용

www.hoons.kr

캐시의캐시의 활용활용

www.hoons.kr

검색된검색된 웹웹 페이지페이지 정보가정보가 저장된저장된 메모리메모리 또는또는 디스크의디스크의임시임시 기억기억 장소장소

캐시란캐시란 무엇인가무엇인가??

브라우저

서버임시폴더

www.hoons.kr

1.1. HTMLHTML을을 받은받은 후후 임시임시 폴더에폴더에 해당해당 파일이파일이 있는지있는지 확인확인

2.2. 해당해당 파일이파일이 있을있을 경우경우 만료기간이만료기간이 지났는지지났는지 확인확인

브라우저와브라우저와 캐시의캐시의 동작동작

HTML 파일

www.hoons.kr

3. 3. 만료기간이만료기간이 지났다면지났다면 브라우저로브라우저로 요청을요청을 보냄보냄

4. 4. 파일이파일이 변경되지변경되지 않았으면않았으면 304 304 응답만응답만 보냄보냄변경되었으면변경되었으면 200 200 응답과응답과 해당해당 파일을파일을 보냄보냄

브라우저와브라우저와 캐시의캐시의 동작동작

요청요청(Request)(Request)

GET /i/yahoo.gif HTTP/1.1 GET /i/yahoo.gif HTTP/1.1 IfIf--ModifiedModified--SinceSince：：Tue, 12 Dec 2006 03:03:59 GMT Tue, 12 Dec 2006 03:03:59 GMT IfIf--NoneNone--Match: "10c24bcMatch: "10c24bc--4ab4ab--457e1c1f457e1c1f””……생략생략……

응답응답(Reponse)(Reponse) HTTP/1.1 304 Not ModifiedHTTP/1.1 304 Not Modified

www.hoons.kr

304 304 요청을요청을 절약할절약할 경우의경우의 효과효과

www.hoons.kr

ExpiresExpires와와 CacheCache--ControlControl

요청(Request)GET /top/2008/logo_daum2008.gif HTTP/1.1

응답(Reponse)

HTTP/1.1 200 OKCache-Control: max-age=7776000Expires: Mon, 02 Jun 2008 12:09:53 GMT…생략…

-- CacheCache--ControlControl은은 HTTP 1.1HTTP 1.1에서만에서만 사용됨사용됨

-- 우선권은우선권은 CacheCache--ControlControl이이 가짐가짐

www.hoons.kr

만료기간만료기간 설정설정 in IISin IIS

www.hoons.kr

파일이파일이업데이트업데이트된다면된다면??

www.hoons.kr

서버의서버의 파일관리파일관리

파일이파일이 변경될변경될 때때 마다마다 새로운새로운 버전을버전을 붙여주어붙여주어새로운새로운 파일로파일로 간주한다간주한다. (. (한번한번 내려주면내려주면 끝끝! ! 변경변경 없음없음))

EX) http://www.hoons.kr/EX) http://www.hoons.kr/js080801_1.jsjs080801_1.js

www.hoons.kr

스크립트와스크립트와 CSSCSS의의 위치위치

www.hoons.kr

CSS CSS 파일을파일을 위에위에 두어야두어야 하는하는 이유이유

스타일시트아스타일시트아 아래에아래에 있을있을 경우경우 IEIE에서는에서는 HTML HTML 렌더링을렌더링을 시작하지시작하지 못한다못한다..

CSSCSS를를 아래에아래에 넣었을넣었을 경우경우http://stevesouders.com/hpws/csshttp://stevesouders.com/hpws/css--bottom.phpbottom.php

CSSCSS를를 위에위에 넣었을넣었을 경우경우http://stevesouders.com/hpws/csshttp://stevesouders.com/hpws/css--top.phptop.php

www.hoons.kr

스크립트스크립트 파일을파일을 아래에아래에 두어야두어야 하는하는 이유이유

브라우저는브라우저는 기본적으로기본적으로 22개의개의 커넥션을커넥션을 가진다가진다. . (http1.1)(http1.1)스크립트는스크립트는 동시동시 다운로드를다운로드를 막는다막는다..

스크립트가스크립트가 중간에중간에 위치할위치할 때의때의 문제문제http://stevesouders.com/hpws/jshttp://stevesouders.com/hpws/js--middle.phpmiddle.php

www.hoons.kr

멀티멀티 커넥션을커넥션을 이용하려면이용하려면??

여러여러 개의개의 도메인을도메인을 이용한다이용한다..-- 한한 도메인당도메인당 22개의개의 커넥션을커넥션을 가지기가지기 때문때문

www.hoons.kr

news.google.comnews.google.com

http://news.google.com

www.hoons.kr

GzipGzip의의 활용활용

www.hoons.kr

GzipGzip이란이란??

국제국제 표준으로표준으로 등록된등록된 무료무료 압축포맷압축포맷(RFC1952)(RFC1952)

현재현재 가장가장 많이많이 사용하고사용하고 있고있고 성능도성능도 좋음좋음

IISIIS에서는에서는 기본적으로기본적으로 적용하지적용하지 않으므로않으므로 따로따로처리를처리를 해주어야해주어야 함함

www.hoons.kr

GzipGzip 헤더헤더 속성속성

요청(Request)

Accept: */*Accept-Language: koUA-CPU: x86Accept-Encoding: gzip, deflateConnection: Keep-Alive

…생략…

응답(Reponse)

HTTP/1.1 200 OKServer: ApacheVary: Accept-EncodingContent-Encoding: gzip

…생략…

www.hoons.kr

GzipGzip의의 효과효과 –– 넥슨의넥슨의 스크립트스크립트

용량은용량은 ¼¼로로 줄었는데줄었는데

속도는속도는 ½½밖에밖에 줄지줄지않았다않았다??

www.hoons.kr

GzipGzip의의 적용시의적용시의 이슈이슈

텍스트텍스트 파일에만파일에만 GzipGzip을을 적용해야적용해야 한다한다. . -- html, js, css (o)html, js, css (o)-- image(x)image(x)

용량이용량이 적은적은 파일은파일은 오히려오히려 CPU CPU 리소스가리소스가 낭비낭비될될 수수 있다있다..

www.hoons.kr

스크립트의스크립트의 최소화최소화

www.hoons.kr

스크립트스크립트 최소화란최소화란??

코드의코드의 불필요한불필요한 문자를문자를 줄여서줄여서 파일파일 크기를크기를줄여줄여 로딩시간을로딩시간을 개선하는개선하는 것것

최소화최소화 툴툴: : JSMin(JSMin(http://crockford.com/javascript/jsminhttp://crockford.com/javascript/jsmin))

www.hoons.kr

최소화의최소화의 효과효과

Original JSMin Savingswww.amazon.com 204K 31K (15%)www.aol.com 44K 4K (10%)www.cnn.com 98K 19K (20%)www.myspace.com 88K 23K (27%)www.wikipedia.org 42K 14K (34%)www.youtube.com 34K 8K (22%)평균 85K 17K (21%)

www.hoons.kr

Live MinifyLive Minify

www.hoons.kr

EtagEtag의의 설정설정

www.hoons.kr

Etag(Entity Tag)Etag(Entity Tag)란란??

웹서버와웹서버와 브라우저가브라우저가 캐시캐시 된된 구성요소들의구성요소들의유효성을유효성을 확인하기확인하기 위해서위해서 사용하는사용하는 메커니즘메커니즘

GET /i/yahoo.gif HTTP/1.1 Host: us.yimg.com

HTTP/1.1 200 OKLast-Modified: Tue, 12 Dec 2006 03:03:59 GMTETag: "10c24bc-4ab-457e1c1f"Content-Length: 1195

www.hoons.kr

유효성유효성 확인확인 요청요청

GET /i/yahoo.gif HTTP/1.1 …생략…If-Modified-Since：Tue, 12 Dec 2006 03:03:59 GMT If-None-Match: "10c24bc-4ab-457e1c1f”…생략…

HTTP/1.1 304 Not Modified

www.hoons.kr

EtagEtag의의 문제문제

같은같은 파일임에도파일임에도 불구하고불구하고 서버서버 별로별로 EtagEtag가가다르다다르다. .

ETag ETag 문자열의문자열의 포맷포맷-- 아파치아파치: inode: inode--sizesize--timestamptimestamp-- IIS: Filetimestamp:ChangeNumberIIS: Filetimestamp:ChangeNumber

www.hoons.kr

해결해결방법은방법은??

www.hoons.kr

EtagEtag의의 해결해결 in IISin IIS

Filetimestamp:ChangeNumber 포맷의포맷의ChangeNumberChangeNumber를를 수동으로수동으로 설정하거나설정하거나없애버릴없애버릴 수수 있음있음

http://support.microsoft.com/kb/922703/http://support.microsoft.com/kb/922703/

www.hoons.kr

EtagEtag의의 해결해결 in in 아파치아파치

inode-size-timestamp 포맷의포맷의 inodeinode를를 수동으로수동으로설정하거나설정하거나 없애버릴없애버릴 수수 있음있음

http://www.apacheweek.com/issues/02http://www.apacheweek.com/issues/02--0101--1818

www.hoons.kr

리다이렉트리다이렉트 줄이기줄이기

www.hoons.kr

RedirectRedirect를를 줄여야줄여야 하는하는 이유이유

Redirect Redirect 동안에는동안에는 다른다른 작업을작업을 시작할시작할 수수 없다없다..

www.hoons.kr

RedirectRedirect –– 내부내부 트래픽트래픽 추적추적

내부내부 트래픽을트래픽을 조사하기조사하기 위해서위해서 특정특정 URLURL을을경유하는경유하는 경우경우

AA페이지페이지

BB페이지페이지

로그기록로그기록페이지페이지

해결해결: Referer: Referer를를 이용하여이용하여 대처한다대처한다..

www.hoons.kr

RedirectRedirect –– 외부외부 트래픽트래픽

외부외부 트래픽을트래픽을 조사하기조사하기 위해서위해서 특정특정 URLURL을을경유하는경유하는 경우경우

사이트사이트 외부사이트외부사이트

로그기록로그기록페이지페이지

해결해결: : 웹웹 비콘으로비콘으로 대처한다대처한다..

www.hoons.kr

TIP!!! TIP!!! 잘못된잘못된 URL URL 지정지정

301 Moved Permanently 응답

http://www.altools.co.kr/Product http://www.altools.co.kr/Product 주소를주소를 요청할요청할경우경우

--> http://www.altools.co.kr/Product/ > http://www.altools.co.kr/Product/ 주소로주소로요청하라는요청하라는 301 301 응답을응답을 반환함반환함

www.hoons.kr

세션세션 정리정리

www.hoons.kr

1414개의개의 규칙규칙

규칙규칙1 1 –– HTTP HTTP 요청을요청을 줄여라줄여라규칙규칙2 2 –– 컨텐츠컨텐츠 전송전송 네트워크를네트워크를 이용하라이용하라규칙규칙3 3 –– 헤더에헤더에 만료기한을만료기한을 추가하라추가하라규칙규칙4 4 –– Gzip Gzip 컴포넌트를컴포넌트를 이용해라이용해라규칙규칙5 5 –– 스타일시트를스타일시트를 위에위에 넣어라넣어라규칙규칙6 6 –– 스크립트를스크립트를 아래에아래에 넣어라넣어라규칙규칙7 7 –– CSS ExpressionCSS Expression을을 피해라피해라규칙규칙8 8 –– 자바스크립트와자바스크립트와 CSSCSS를를 외부파일에외부파일에 넣어라넣어라규칙규칙9 9 –– DNS DNS 조회를조회를 줄여라줄여라규칙규칙10 10 –– 자바스크립트를자바스크립트를 최소화하라최소화하라규칙규칙11 11 –– 리다이렉트를리다이렉트를 피해라피해라규칙규칙12 12 –– 중복되는중복되는 스크립트를스크립트를 제거하라제거하라규칙규칙13 13 –– ETagETag를를 설정하라설정하라규칙규칙14 14 –– 캐시를캐시를 지원하는지원하는 Ajax Ajax 만들기만들기

www.hoons.kr

ToolsTools

IEWatch: IEWatch: http://www.iewatch.com/

IBM Page Detailer: IBM Page Detailer: http://alphaworks.ibm.com/tech/pagedetailerhttp://alphaworks.ibm.com/tech/pagedetailer

YSlow & Firebug: YSlow & Firebug: http://developer.yahoo.com/yslow/http://developer.yahoo.com/yslow/

JSMin: JSMin: http://crockford.com/javascript/jsminhttp://crockford.com/javascript/jsmin

www.hoons.kr

질문질문블로그블로그 -- HOONSHOONS의의 닷넷닷넷 프로필러프로필러http://blog.hoons.krhttp://blog.hoons.kr

커뮤니티커뮤니티 –– HOONSHOONS닷넷닷넷http://www.hoons.krhttp://www.hoons.kr

www.hoons.kr

박경훈(HOONS)hoonsbara@hotmail.com

www.hoons.kr

참조참조http://developer.yahoo.com/performance/rules.htmlhttp://developer.yahoo.com/performance/rules.html

Steve Souders(Steve Souders(souders@yahoosouders@yahoo--inc.cominc.com) ) 의의 High High Performance Web Sites PPT Performance Web Sites PPT 참조참조

www.hoons.kr

이미지이미지 참조참조(CC)(CC)

"Need for Speed" by Amnemona: "Need for Speed" by Amnemona: http://www.flickr.com/photos/marinacvinhal/379111290/http://www.flickr.com/photos/marinacvinhal/379111290/

"Max speed 15kmh" by xxxtoff: "Max speed 15kmh" by xxxtoff: http://www.flickr.com/photos/xxxtoff/219781763/http://www.flickr.com/photos/xxxtoff/219781763/

"maybe" by Tal Bright: "maybe" by Tal Bright: http://www.flickr.com/photos/bright/118197469/http://www.flickr.com/photos/bright/118197469/

"takeout" by dotpolka: "takeout" by dotpolka: http://www.flickr.com/photos/dotpolka/249129144/http://www.flickr.com/photos/dotpolka/249129144/

"Absolutely Nothing is Allowed Here" by Vicki & Chuck Rogers: "Absolutely Nothing is Allowed Here" by Vicki & Chuck Rogers: http://www.flickr.com/photos/twohttp://www.flickr.com/photos/two--wrongs/205467442/wrongs/205467442/

"Zipper Pocket" by jogales: "Zipper Pocket" by jogales: http://www.flickr.com/photos/jogales/11519576/http://www.flickr.com/photos/jogales/11519576/

"Robert's Legion" by dancharvey: "Robert's Legion" by dancharvey: http://www.flickr.com/photos/dancharvey/2647529/http://www.flickr.com/photos/dancharvey/2647529/

"thank you" by nj dodge: "thank you" by nj dodge: http://flickr.com/photos/nj_dodge/187190601/http://flickr.com/photos/nj_dodge/187190601/

"new briefcase" by dcJohn: "new briefcase" by dcJohn: http://www.flickr.com/photos/dcjohn/85504455/http://www.flickr.com/photos/dcjohn/85504455/