h igh performance for web sites
Post on 22-Feb-2016
57 Views
Preview:
DESCRIPTION
TRANSCRIPT
High performance for Web sites
Based on @media 2007 Conference (London, 6.8~9) by Nate Koechley
Presentation by UI-Development TeamChan-Hyun Roh
Web 2.0참여 , 공유 , 개방
플랫폼으로서의 웹집단 지성의 활용
데이터는 차세대 “ Intel Inside”소프트웨어 릴리즈 주기의 종말
가벼운 프로그래밍 모델단일 디바이스를 넘어선 소프트웨어
풍부한 사용자 인터페이스가벼운 프로그래밍 모델
‘ 가벼운 프로그래밍 모델’ 웹표준 HTML 페이지 개발 접근 방향
Web 2.0Web StandardDevelopment
High PerformanceTechnique
More Faster!High Performance!
Response Time&
System Efficiency
Our Focus isResponse Time
ofWeb Products
Importance of Front-end PerformanceBack-end
5%Front-end
95%
사용자 체감속도
저하
One of solutionWith Cache!
Example: http://corp.nate.com
Empty Cache & First Loading
Full Cache & Reloading
1.38 MB, 2.99 s
0.15 MB, 0.9 s
90% Fewer Bytes 70% fewer Time
Sadly, the Cache doesn’twork as well aswe wish it did!
얼마나 많은 사람들이캐시의 효과를 경험할 수 있을까요 ?
Q1. 몇 % 의 사용자가 Empty Cache 상태에서 웹페이지를 열게 되는가 ?
Q2. 전체 페이지뷰 중 몇 % 가 Empty Cache 상태에서 요청이 될까 ?
Yahoo! Browser Cache Experiment
웹페이지에 Blank 이미지 추가<img src="image/blank.gif" height="1" width="1" />
다음과 같은 헤더 추가
Expires: Thu, 15 Apr 2004 20:00:00 GMT Last-Modified: Wed, 28 Sep 2006 23:49:57 GMT
}1 px
Yahoo! Browser Cache Experiment
200 OK 요청 성공 메시지클라이언트에서 파일을 가지고 있지 않으므로 파일을 다운로드
304 Not Modified 요청이 성공하였지만 클라이언트의 캐시에 해당 파일을 가지고 있음따라서 서버로부터 파일을 다운로드 하지 않고 , 캐시를 사용한다 .
2 Possible Response Code
Yahoo! Browser Cache Experiment
Q1. 몇 % 의 사용자가 Empty Cache 상태에서 웹페이지를 열게 되는가 ?
Q2. 전체 페이지뷰 중 몇 % 가 Empty Cache 상태에서 요청이 될까 ?
전체 순수 사용자 중한번이라도 200 code 를 받은
사용자의 수전체 순수 사용자
200 code 를 보낸 수200 code 와 304 code 를 보낸 수
그 결과는 ?
Yahoo! Browser Cache Experiment
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 200.0%
10.0%
20.0%
30.0%
40.0%
50.0%
60.0%
70.0%
80.0%
90.0%
100.0%
unique users with empty cache
page views with empty cache
day of experiment
perc
enta
gepage views
withempty cache
40-60% ~20%
users withempty cache
Simple Rules For Perfor-manceFewer HTTP Request
More Cache Hit
Case Study
1. CSS Sprites
<span style=" background-image: url('sprites.gif'); background-position: -260px -90px;"></span>
Fewer HTTP Request!!!Fewer Bytes!!!
http://www.google.co.krhttp://alistapart.com/articles/spriteshttp://sodumarvin.tistory.com/41
2. Combine JS, Combine CSSScripts Styleshee
tsamazon.com 3 1aol.com 18 1cnn.com 11 2ebay.com 7 2froogle.google.com 1 1msn.com 9 1myspace.com 2 2wikipedia.org 3 1yahoo.com 4 1youtube.com 7 3
Average 6.5 1.5
Fewer HTTP Request!!
3. Use CDN
http://www.terms.co.kr/CDN.htm http://itviewpoint.com/tt/index.php?pl=2027
amazon.com Akamaiaol.com Akamaicnn.comebay.com Akamai, Mirror Imagegoogle.commsn.com SAVVISmyspace.com Akamai, Limelightwikipedia.orgyahoo.com Akamaiyoutube.com
콘텐츠 전송 네트워크 : Contents Delivery Network
4. Gzip Components
CSS 나 JS 파일 , XML 파일을 Gzip 을 사용하여 압축하여 전송하면다운로드 시간을 절약할 수 있다 .대부분의 웹 브라우저는 이 기능을 지원한다 . (90%+)
http://www.pureye4u.com/ctest.htmlhttp://www.pureye4u.com/ctest2.html
Gzip DeflateSize Size Savings Size Savings
Script 3.3K 1.1K 67% 1.1K 66%
Script 39.7K 14.5K 64% 16.6K 58%
Stylesheet 1.0K 0.4K 56% 0.5K 52%
Stylesheet 14.1K 3.7K 73% 4.7K 67%
5. CSS on the Top
스타일시트 CSS 파일은 HEAD 태그 안에서 링크한다 . (on the Top)컨텐츠는 되도록 스타일을 사용한다 .
<LINK> 태그를 사용한다 . (@import 사용은 지양 )
2 Problems! Blank white screen
Flash of unstyled contents
6. JS on the Bottom
자바스크립트가 다운로드 되는 동안 하부 컨텐츠가 다운로드 되지 않는다 .자바스크립트는 완전히 다운로드 될 때까지 실행되지 않는다 .
<script type=“text/javascript” language=“javascript” src=“…”></script></body></html>
defer attribute페이지가 로딩이 완료된 후에 자바스크립트를 로딩하도록 강제하는 옵션 .IE 전용 속성이며 , 페이지 로딩 중에 element 가 없어서 생기는 에러 방지 .
<script type=“text/javascript” language=“javascript” src=“…” defer=“defer”></script>
7. Avoid CSS Expressions
Internet Explorer 전용 속성으로 , 동적으로 CSS 를 적용한다 . 하지만 ,
width: expression( document.body.clientWidth < 600 ? “600px” : “auto” );
위와 같은 코드에서는 expression event 가 계속 일어남(mouse move, key press, resize, scroll 등의 이벤트에 반응함 )
cf. Javascript Event Handlercf2. PNG in IE6
http://home.tiscali.nl/developerscorner/transparency/transparent-dropshadow.htm 싸이월드에서 사용하는 .png24 클래스 , 팝업의 그림자 등은 이것으로 대체할 수 있을까 ?
8. Make CSS & JS to External
Inline: HTML 의 크기는 커지지만 HTTP Request 수는 줄어든다External: CSS 나 JS 파일이 캐시되지만 HTTP Request 가 늘어난다
Factor : 각 사용자의 페이지뷰Empty Cache VS Full Cache 상태 비교코드 재사용성 .
* Conclusion : 대체로 External 방식이 유리 .
9. Minify JavaScript, AJAX
Original JSMin Savings Dojo Savings
www.amazon.com 204K 31K (15%) 48K (24%)www.aol.com 44K 4K (10%) 4K (10%)www.cnn.com 98K 19K (20%) 24K (25%)www.myspace.com 88K 23K (27%) 24K (28%)www.wikipedia.org 42K 14K (34%) 16K (38%)www.youtube.com 34K 8K (22%) 10K (29%)
Average 85K 17K (21%) 21K (25%)
자바스크립트 압축 프로그램 : http://crockford.com/javascript/jsminhttp://dean.edwards.name/packer/
Thank you!
top related