웹 사이트의 성능 높이기 part1
DESCRIPTION
훈스닷넷에서 받은 문서이다. 내용이 정말 알차다.TRANSCRIPT
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
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
정리
www.hoons.kr
정리
UI단의 성능튜닝은 작은노력으로 사이트의 높은성능을 올릴 수 있다.
www.hoons.kr
참조http://developer.yahoo.com/performance/rules.html
Steve Souders([email protected]) 의 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
이미지 참조(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/