웹 사이트의 성능 높이기 part1

http://www.hoons.kr

웹 사이트의 성능 높이기 Part1. UI단의 튜닝

박경훈(HOONS)

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

www.hoons.kr

웹 사이트의 성능 높이기 세미나

Part1. UI 단의 성능 튜닝(Today)- 웹 사이트의 로딩 속도 향상

Part2. UI 얶어의 성능 튜닝 (Next Seminar)- 웹의 동적 얶어 처리

Part3. 서버 단의 성능 튜닝 (Next Seminar)- DB, Server Code, Architecture

www.hoons.kr

진행 순서

웹과 브라우저

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

HTTP 요청 줄이기

캐시의 활용

스크립트와 CSS의 위치

GZIP의 활용

스크립트의 최소화

Etag의 설정

www.hoons.kr

웹과 브라우저

www.hoons.kr

브라우저의 동작

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

헤더값Accept: */*

Accept-Language: ko

User-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 GMT

Etag: "5f655c22d5fc81:6f“

…

www.hoons.kr

브라우저의 동작

www.hoons.kr

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

www.hoons.kr

Yahoo 사이트 사례

서버단:

5%UI단:

95%

캐시를 이용한다 하더라도

UI 단 = 88%

www.hoons.kr

미국 TOP 10의 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

성능을 결정하는 요소

서버 단 네트워크 단UI단

(브라우저 동작)

www.hoons.kr

성능의 오해와 진실

어떻게성능을높일까?

www.hoons.kr

High Performance Web Sites

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

HOONS 3월 번역완료- 5~6월 번역판 발매 예정

1. Make fewer HTTP requests

2. Use a CDN

3. Add an Expires header

4. Gzip components

5. Put stylesheets at the top

6. Move scripts to the bottom

7. Avoid CSS expressions

8. Make JS and CSS external

9. Reduce DNS lookups

10. Minify JS

11. Avoid redirects

12. Remove duplicate scripts

13. Configure ETags

14. Make AJAX cacheable

www.hoons.kr

성능 측정 도구 - YSlow

다운로드http://www.getfirebug.com/http://developer.yahoo.com/yslow/

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

불여우(Firefox) Add – on Tools

오픈 소스 라이센스

www.hoons.kr

국내 주요 포털의 YSLOW

Page

Weight

Response

Time

YSlow

Grade

www.daum.net 479K 0.5 sec F(58)

www.naver.com 578K 1.1 sec F(36)

www.empas.com 454K 1.2 sec D(61)

www.cyworld.com 701K 4.6 sec F(34)

www.google.co.kr 84K 1.0 sec A(93)

www.yahoo.co.kr 486K 3.7 sec B(84)

www.nate.com 288K 4.2 sec F(39)

www.msn.co.kr 323K 3.4 sec F(59)

www.hoons.kr

Live Analysis

www.hoons.kr

RIA (Rich Internet Application)

14개의 규칙

www.hoons.kr

HTTP 요청 줄이기

www.hoons.kr

HTTP 요청 줄이기

10K x 10개 < 100K x 1개

www.hoons.kr

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

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

이미지 맵의 사용

www.hoons.kr

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

2. 스크립트 CSS 합치기

www.hoons.kr

구글의 수수께끼

www.hoons.kr

3. 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. HTML을 받은 후 임시 폴더에 해당 파일이 있는지 확인

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

브라우저와 캐시의 동작

HTML 파일

www.hoons.kr

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

4. 파일이 변경되지 않았으면 304 응답맊 보냄

변경되었으면 200 응답과 해당 파일을 보냄

브라우저와 캐시의 동작

요청(Request)

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

응답(Reponse) HTTP/1.1 304 Not Modified

www.hoons.kr

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

www.hoons.kr

QUIZ – (소정의 상품: MSN 인형)

www.hoons.kr

Expires와 Cache-Control

요청(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…생략…

- Cache-Control은 HTTP 1.1에서맊 사용됨

- 우선권은 Cache-Control이 가짐

www.hoons.kr

만료기간 설정 in IIS

www.hoons.kr

만료기간 설정 in ASP.NET Code

HOONS 강좌 참고http://www.hoons.kr/Lectureview.aspx?key=Lecture&LECCATE_IDX=42&ref=1&lecture_idx=370

www.hoons.kr

성능의 오해와 진실

파일이

업데이트

되면 어떻게

하라고?

www.hoons.kr

서버의 파일관리

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

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

www.hoons.kr

스크립트와 CSS의 위치

www.hoons.kr

QUIZ – (소정의 상품)

Js 파일 참조 태그는 어디에 두는 것이 좋을까?1. 위에 2. 아래

CSS 파일 참조 태그는 어디에 두는 것이 좋을까?1. 위에 2. 아래

www.hoons.kr

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

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

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

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

www.hoons.kr

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

브라우저는 기본적으로 2개의 커넥션을 가진다. (http1.1)

스크립트는 동시 다운로드를 막는다.

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

www.hoons.kr

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

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

www.hoons.kr

news.google.com

http://news.google.com

www.hoons.kr

Gzip의 활용

www.hoons.kr

Gzip이란?

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

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

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

www.hoons.kr

Gzip 헤더 속성

요청(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

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

용량은 ¼ 로 줄었는데

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

www.hoons.kr

Gzip의 적용시의 이슈

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

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

www.hoons.kr

Gzip 적용 in ASP.NET

HOONS 강좌 참고http://www.hoons.kr/Lectureview.aspx?key=Lecture&LECCATE_IDX=42&ref=1&lecture_idx=372

www.hoons.kr

스크립트의 최소화

www.hoons.kr

스크립트 최소화란?

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

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

www.hoons.kr

최소화의 효과

Original JSMin Savings

www.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 Minify

www.hoons.kr

Etag의 설정

www.hoons.kr

Etag(Entity Tag)란?

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

GET /i/yahoo.gif HTTP/1.1Host: 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 GMTIf-None-Match: "10c24bc-4ab-457e1c1f”…생략…

HTTP/1.1 304 Not Modified

www.hoons.kr

Etag의 문제

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

ETag 문자열의 포맷- 아파치: inode-size-timestamp- IIS: Filetimestamp:ChangeNumber

www.hoons.kr

성능의 오해와 진실

해결방법은?

www.hoons.kr

Etag의 해결 in IIS

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

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

www.hoons.kr

TIP!!! 잘못된 URL 지정

301 Moved Permanently 응답

www.hoons.kr

정리

www.hoons.kr

정리

UI단의 성능튜닝은 작은노력으로 사이트의 높은성능을 올릴 수 있다.

www.hoons.kr

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

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

-> Coming Soon!

www.hoons.kr

Tools

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

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

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

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

www.hoons.kr

Q&A

www.hoons.kr

박경훈(HOONS)hoonsbara@hotmail.com

www.hoons.kr

이미지 참조(CC)

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

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

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

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

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

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

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

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

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