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

http://stevesouders.com/examples/rules.php

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!