High performance websites v1.0

ⓒ 2009 KT Hitel Corporation

Best Practices for Speeding Up Your Web

Site

디자인실 UI Dev 이선실 , 김수성

2디자인실 / UI Lab ⓒ 2009 KT Hitel Corporation

The important of Front-end Performance


Downloading (http://www.yahoo.com) in IE : empty cache

Back-end =5% Front-end =

95%

http://www.yahoo.com/


Downloading (http://www.yahoo.com) in IE : primed cache

Even here, front-end = 95%

http://www.yahoo.com/


Downloading percentage

Empty Cache Primed Cache

aol.com 6% 14%

amazon.com 18% 14%

cnn.com 19% 8%

ebay.com 2% 8%

google.com 14% 36%

msn.com 3% 5%

myspace.com 4% 14%

wikipedia.org 20% 12%

yahoo.com 5% 12%

youtube.com 3% 5%

* Percentage of time spent downloading the HTML document for 10 top web site


Downloading percentage

보통 웹사이트에서 Html 문서를 웹 서버로부터 다운 (Back-end) 받는데 소요되는 시간은 10~20% 이다 .

그 외 80~90% 는 Html 에서 사용되는 components 를 다운 (Front-end) 받는데 소요된다 .

* 단 , cache 된 상태의 Google 은 제외된다 . Google 은 오직 6 개의 components 만 가지고 있기 때문에 front-end 에 소요되는 시간이 길지 않다 .


How can response time be reduced?

첫 번째 ,

Front-end 에 Focus 하면 response time 을 줄이는데 더욱 효과적 Back-end 를 50% 줄일 경우 : 전체의 5~10% 감소

Front-end 를 50% 줄일 경우 : 전체의 40~45% 감소

두 번째 ,Front-end 에서 작업할 경우 , Back-end 에서 작업할 때 보다 더 적은 시간과 더 적은 resource 가 필요 .

세 번째 ,여러 프로젝트 경험을 바탕으로 , 보통 25% or 그 이상의 response time 을 줄일 수 있다 .


Rule 1. Make Fewer HTTP Requests


Minimize HTTP Requests

End-user response time 의 80% 를 front-end 단에서 차지한다 .

이 response time 의 대부분은 페이지내에서 사용되어지는 components -Images, Stylesheets,

Scripts,

Flash 등 - 를 다운로드 하는데 소요된다 .

여기서 component 의 수를 줄이는 것이 HTTP request 를 줄이는 하나의 방법이며 ,

빠른 웹 페이지 만들기의 중요 포인트라고 할 수 있다 .

Component 의 수를 줄이기 위해 페이지 설계를 간단하게 할 수도 있지만 사용자가 필요로 하는

많은 양의 contents 를 보여주면서 response time 을 줄일 수 있는 방법을 사용하는 것이 더

효과적이라고 할 수 있다 .

여기서 HTTP request 수를 줄이는 몇 가지 방법을 알아보자 .


Combined files

HTTP request 수를 줄이기 위해서 사용되어진 모든 Script 를 하나의 Script 로 통합하고 ,

이와 같이 CSS 도 하나의 Stylesheet 로 통합한다 .

이러한 방법은 각 페이지 마다 다르게 사용해야 할 때 문제가 될 수도 있겠지만 작업 시 하나의 과정으로

포함시킨다면 response time 을 줄일 수 있을 것이다 .

ex

)<link rel="stylesheet" type="text/css“ ref="http://i.kthimg.com/search/css/sch_layout.css"><link rel="stylesheet" type="text/css“ ref="http://i.kthimg.com/search/css/sch_result.css"> <link rel="stylesheet" ype="text/css“ ref="http://i.kthimg.com/search/css/sch_prn.css">

<link rel="stylesheet" ype="text/css“ ref="http://i.kthimg.com/search/css/sch_1.0.css">


CSS Sprites

페이지 내에 사용된 Background image 의 request 를 줄이기 위해 쓰이는 방법이다 .

작고 간단하고 반복 되어 지지 않는 Background image 들을 하나의 이미지로 합치고 css 의 background-

image 와 background-position 속성으로 필요한 부분만 보여준다 .

ex

).mre a{background:url(http://i.kthimg.com/search/img/bg_ic.gif) 0 1px no-repeat;}


Image Maps

여러 개의 연속적인 이미지에 링크를 걸어야 할 때 사용한다 .

이미지의 전체 사이즈는 거의 같지만 HTTP request 가 줄어들어 페이지 로딩 속도는 빨라지나 좌표 지정이

쉽지 않고 에러를 유발하기 쉽다 .

그리고 이미지맵은 접근성이 부족하기 때문에 navigation bar 에는 사용하지 않는 것이 좋다 .

ex

)Example 1 - No Image Map 이미지맵을 사용하지 않았을 때

Example 2 - Image Map 이미지맵을 사용했을 때

http://stevesouders.com/hpws/imagemap-no.php

http://stevesouders.com/hpws/imagemap.php


Inline image (data:URL scheme)

data:URL scheme 를 이용해서 실제 페이지에 이미지를 넣는다 .

이것은 HTML 문서의 크기를 증가시킬 수 있지만 HTTP request 를 감소시키고 페이지 사이즈 증가를

막을 수 있다 .

data:[<mediatype>][;base64],<data>

단 , 이 방법은 글자수 제한이 있고 모든 브라우저에서 지원되지 않는다 .

ex

)<IMG BORDER=1 SRC="data:image/gif;base64, R0lGODdhMQAiAPcAAP////f39+/……….">


Rule 2. Use a CDN(Content Delivery Net-work)


Use a CDN

일종의 캐시 역할을 할 수 있도록 전체 network 상에 동일한 contents 내용을 복제하여 , 대규모 인트라넷

또는 인터넷상에 분산시켜 놓은 시스템 .

인터넷 이용자의 증가와 멀티미디어 등 대용량 contents 에 대한 수요의 증가로 인해 데이터 트래픽은

기하급수적으로 늘어나는 데 비해 Middle-Mile 이라 불리는 네트워크간 연결구간에 대한 투자는 이에 미치지

못해 결과적으로 인터넷은 트래픽의 정체현상 , 즉 병목현상이 발생하게 되었다 .

이러한 현상을 해결하기 위한 방법이 Content Delivery Network 이다 .

CDN 은 기간망과 가입자망간의 연결을 물리적인 망의 증설을 통해 개선하는 것이 아니라 병목현상의 대상인

데이터 트래픽 , 즉 Contents 를 인터넷 네트워크의 주요지점으로 분산시킴으로써 해결하는 것이다 .

CDN 은 사용자의 콘텐츠 요구에 가장 빠르게 연결이 가능한 네트워크를 중계해 주고 contents 를 전송해 준다 .

Contents 가 복제되어 특정 국가 또는 전세계에 걸쳐 분산 배치되면 , 사용자들은 그것이 하나의 웹사이트에

있을 때보다 훨씬 더 빠르게 액세스할 수 있게 된다 .

Akamai 와 같은 contents 전달 조직 , 전국의 커버할 수 있는 대규모 ISP, 또는 대기업 등에 의해 제공 된다


Use a CDN

신속성

분산 노드와 GLB 를 통한 최적의 전송경로 제공

인터넷 사용자를 위한 최고의 전송속도 보장

안정성

트래픽 폭주로 인한 성능 저하 방지

동기화를 통해 최신 콘텐츠를 안전하게 전송

비용절감

사용량을 기준으로 한 종량제 요금체계

초기 인프라 투자비용 및 IT 운영비용 절감

확장성

예상치 못한 트래픽 증가 해결

전세계 40 개 Server Farm, 300Gbps 의 네트워크 인프라활용 (2007 년 9 월 기준 )


Rule 3. Add an Expires or a Cache-Control Header


Add an Expires or a Cache-Control Header

브라우저 캐시를 위해 Expires Date 와 Cache Control 추가


Rule 4. Gzip Components


Gzip Components

Gzip 은 국제 표준으로 등록된 무료 압축 포맷이다 .

브라우저는 자신이 압축을 해제할 수 있는 압축 포맷을 HTTP 헤더 Accept-Encoding 의 속성을 이용해서

전달하는데 이 때 서버는 이 속성을 확인하여 본문을 압축할 수 있다 .

(RFC1952) 이 기술은 현재 가장 많이 사용하고 있고 그만큼 성능도 좋다 .

이미지 등 이미 압축처리가 된 파일에는 효과가 없으므로 html, js, css 같은 텍스트 파일에만 Gzip 을

적용한다 .

또한 용량이 적은 파일을 압축하면 전달되는 속도보다 압축을 적용하고 푸는 시간이 더 걸릴 수 있고

압축 적용 시 서버와 클라이언트의 CPU 리소스를 불필요하게 소비하게 된다 .

기본적으로 웹 IIS 서버는 Gzip 이나 deflate 압축을 지원하지 않으므로 따로 처리한다 .


Rule 5. Put Stylesheets at the Top


Put Stylesheets at the Top 1 / 2

Stylesheet 는 항상 head 에 넣는다 .

그렇게 되면 페이지 랜더링이 더 빨라지기 때문에 로딩속도가 향상 된다 .

웹 페이지 내용에 상관없이 가능한 한 빨리 로딩이 되기를 원하기 때문에 많은 내용의 contents 를 가진

페이지와 느린 인터넷을 사용하는 사용자에게 특히 중요하다 .

문서의 아래에 stylesheet 를 넣게 되면 요소를 다 불러온 후에 다시 위에서부터 style 을 입히게 된다 .

그 과정에서 IE 등의 브라우저에서는 마지막 style 이 로딩 될 때까지 랜더링을 멈추고 있다가 style 이 로드 된

후

랜더링을 한다 . 이 과정에서 사용자들은 아무것도 없는 흰 페이지를 보게 되는 문제가 발생하게 된다 .

html 표준에서도 stylesheet 를 페이지의 head 에 넣기를 권장하고 있다 .


Rule 6. Move Scripts to the Bottom


Move Scripts to the Bottom 1 / 2

스크립트 실행에 지연이 걸려 페이지가 늦게 오픈 되는 걸 방지하기 위해 하단에 두어야 한다 .


Rule 7. Avoid CSS Expression


Avoid CSS Expression 1 / 2

CSS expression 은 다이나믹한 css 속성을 지원하는 것으로 강력하지만 위험한 방법이다 .

예를 들어 CSS expression 을 사용하여 background color 를 매 시간 별로 번갈아 가며 보여지게 설정할 수

있다 .

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

여기서 보다시피 , expression method 로 JavaScript expression 에 접근할 수 있다 .

CSS 속성은 JavaScript expression 의 계산 결과로 설정된다 .

Expression method 는 IE -IE5 부터 지원된다 - 외 다른 브라우저에선 작동이 안되므로 IE 에서 다른 브라우저와

일관된 기능을 지원하기 위해 사용한다 .

이 expression 의 문제는 예상보다 훨씬 자주 실행된다는 데 있다 .

페이지가 rendering 되고 resize 될 때에만 실행되는 것이 아니라 스크롤을 움직일 때나 페이지 위에서

마우스를 움직일 때에도 실행 된다 .


Avoid CSS Expression 1 / 2

Expression 카운터 http://stevesouders.com/hpws/expression-counter.php (CSS Expression 이 동작 할 때마다 카운트 계산 )

그 방법을 해결 하기 위한 방법 중 하나는 expression 이 한번만 실행되게 제한하는 것이다 .

만약 유동적인 페이지에 expresstion 을 줘야 한다면 event handler 로 대체하는 것도 좋은 방법이다 .

CSS expresstion 을 사용해야 할때에는 이러한 문제들을 충분히 생각한 후에 꼭 필요한 경우에만

적용하도록 한다 .

http://stevesouders.com/hpws/expression-counter.php


Rule 8. Make JS and CSS external


Make JS and CSS external 1 / 2

JavaScript 와 CSS 를 외부 파일로 불러오게 되면 browser 에 의해 캐싱이 되기 때문에 일반적으로 더 빠르게

페이지를 출력한다 .

HTML 문서에 inline 형식으로 존재하는 JavaScript 와 CSS 는 HTML 문서가 요청될 때마다 매번 다운로드

하는데 그렇게 되면 HTTP request 수는 감소할지 모르겠지만 HTML 문서의 크기는 늘어나게 된다 .

반면에 , JavaScript 와 CSS 가 브라우저에 의해 외부 파일로 캐싱이 된다면 HTML 문서의 크기는 request

수를

증가시키지 않으면서 감소하게 된다 .

여기서 중요한 점은 HTML 문서의 수와 외부 JavaScript, CSS 의 요청 빈도이다 .

어느 웹사이트에서 사용자들이 여러 페이지를 방문하고 그 페이지들이 동일한 JavaScript 와 CSS 를 사용하고

있다면 외부 파일로 캐싱 되게 하는 것이 좋다 .

만약 페이지 뷰가 적거나 한정된 곳에만 적용이 되어야 하는 경우라면 JavaScript 나 CSS 를 inline 화하는 것이

응답 속도가 더 빠르다 .


Make JS and CSS external 1 / 2

많은 페이지로 연결되는 front page 같은 경우는 외부파일 캐싱 이라는 장점과 inline 의 HTTP request

감소를

같이 사용할 수 있다 .

Front page 에서 사용할 JavaScript 와 CSS 는 inline 으로 넣어 놓고 페이지가 로딩을 마친 후에 동적으로

외부 파일을 다운로드 한다 .

그러면 그 후의 페이지들은 캐싱 되어 있는 외부 파일을 참조하게 되어 로딩 속도가 빨라질 것이다 .


Rule 9. Reduce DNS Lookups


Reduce DNS Lookups 1 / 2

일반적으로 해당 호스트에 대한 IP 주소를 조회하려면 DNS 에 20-120 micro sec 정도 걸리므로

Image/JS/CSS 링크의 Domain 수를 최소화해야 한다 .


Rule 10. Minify JavaScript and CSS


Minify JavaScript and CSS 1 / 2

JavaScript 와 CSS 의 최소화는 모든 주석을 제거하고 불필요한 공백 (space, newline, and tab) 을 제거

함으로써

코드의 사이즈를 줄여 로딩 속도가 빨라지게 한다 .

그렇게 되면 JavaScript 의 경우 다운로드 되는 파일의 사이즈가 감소 하기 때문에 속도가 향상된다 .

자바스크립트를 최소화 해주는 툴 중 잘 알려진 프로그램에는 JSMin 와 YUI Compressor 가 있는데 ,

그 중 YUI compressor 로는 CSS 파일도 최소화 할 수 있다 .

Obfuscation(난독화 ,암호와 ) 는 코드 압축에 최적화 된 대체 기술로써 소스 코드 중에서 가장 중요한 멤버나

메소드의 이름을 짧고 무의미한 것으로 대체해 다른 사람이 도용하거나 가져다 쓰는걸 막아준다 .

미국 Top10 웹사이트 조사 결과를 보면 최소화 한 파일은 크기가 21% 감소한 것에 비해 Obfuscation 한

파일은 25% 가 감소하여 보다 뛰어난 성능을 보여주고 있다 .

그러나 방법이 훨씬 복잡하고 압축도중 스크립트 오류를 발생시킬 위험이 있으며 사실상 응답속도에 별 영향을

미치지 못하므로 단순히 최소화 시키는 것이 더 효과적이라고 볼 수 있다 .

ex) var pserson; -> var AB


Minify JavaScript and CSS 1 / 2

외부 Script 와 CSS파일과 마찬가지로 inline 으로 들어가 있는 Script 와 CSS 도 최소화가 가능하다 .

Gzip ( 웹 서버에서 사용자 브라우저로 갈 때만 html파일을 압축해주는 서버모듈 ) 을 통해서 압축한 후라도

Script 와 CSS 를 최소화를 하게 되면 적어도 5% 이상 사이즈를 더 감소 시킬 수 있다 .


Rule 11. Avoid Redirects


Avoid Redirects 1 / 2

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

http://www.paran.com/test ( 301 redirect 됨 )

http://www.paran.com/test/ 디렉토리 일경우 / 까지 기입


Rule 12. Remove Duplicates Scripts


Remove Duplicates Scripts 1 / 2

request 를 줄이기 위해 개발자의 실수로 인한 중복 기술된 스크립트 줄인다 .

실제 같은 external js 를 여러번 호출하면 호출한 만큼 request 된다 .


Rule 13. Configure ETag


Configure ETag 1 / 2

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

브라우저의 캐시된 파일의 유효하면 [304 Not Modified] 발생시킨다 .

유효하지 않으면 서버에서 파일을 받아 [200 OK] 발생한다 .

Server Browser

HTTP Request

Compare

Disk

Read Cache

Last-Modified

ETag

Download

200 OK 304 Not Modified



GET /i/yahoo.gif HTTP/1.1

Host: us.yimg.com

------------------------------------------------------->

HTTP/1.1 200 OK

Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT

ETag: "10c24bc-4ab-457e1c1f"

Content-Length: 12195

------------------------------------------------------->

GET /i/yahoo.gif HTTP/1.1

Host: us.yimg.com

If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT

If-None-Match: "10c24bc-4ab-457e1c1f"

------------------------------------------------------->

HTTP/1.1 304 Not Modified

Request

Request

Response

Response



출처

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

http://www.apacheweek.com/issues/02-01-18

http://firejune.com/1151

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

http://www.apacheweek.com/issues/02-01-18

http://firejune.com/1151


Rule 14. Make Ajax Cacheable


Make Ajax Cacheable 1 / 2

Ajax 통신시 캐쉬 기능을 구현


Rule 15. Flush the Buffer Early


Flush the Buffer Early 1 / 2

버퍼링을 사용함으로써 완료된 html 이 아닌 사용자가 원하는시점에 출력을 지정할 수 있으므로 브라우저의

대기 시간이 줄어든다 .


Rule 16. Use Get for Ajax Requests


Use Get for Ajax Requests 1 / 2

Ajax 사용할때는 GET Method 가 빠르다 .

POST 는 XMLHttpRequest 사용시 header 를 보낸 후 data 를 보내는 두 가지 step 으로 되어있어서 GET

보다

느리다 .


Rule 17. Post-load Components, Preload Com-ponents


Post-load Components, Preload Components 1 / 2

페이지가 열릴 때 필요한 구성요소와 onload 후에 필요한 구성요소를 구분하여 페이지 렌더링을 빠르게

구현하기 위해 구조화 작업이 필요 .


Rule 18. Reduce the Number of DOM Elements


Reduce the Number of DOM Elements 1 / 2

Dom 구조를 간략하게 해야 한다 .


Rule 19. Split Components Across Domains


Split Components Across Domains 1 / 2

web 페이지를 구성하는 요소들의 호스트를 분산하면 빨라질 수 있다 .

ex) css/js/img


Rule 20. Minimize the Number of Iframes


Minimize the Number of Iframes 1 / 2

Iframe 은 html 문서를 다른 html 문서에 삽입 하는 기능이다 .

Iframe 은 광고나 배너등 외부 컨텐츠를 불러오거나 , doc type 등이 다른 html 문서를 한 화면에서 보여줘야

할 때 유용하다 .

그러나 아무 내용이 없어도 트래픽이 발생하고 request 가 증가하게 되므로 꼭 필요할 때만 사용하는 것이 좋

다 .

iframe 안에 css/js 등이 parent 와 같이 있어도 다시 request 됨으로 주의해야 한다 .


Rule 21. No 404s


No 404s 1 / 2

불필요한 404 not found 페이지를 제거한다 .


Rule 22. Reduce Cookie Size


Reduce Cookie Size 1 / 2

불필요한 쿠키를 제거 .

해당 도메인순

Expire 날짜 지정


Rule 23. Use Cookie-free Domains for Compo-nents


Rule 24. Minimize Dom Access


Minimize Dom Access 1 / 2

Javascript 로 Dom 요소에 접근하는 것은 페이지 응답속도를 느리게 한다 .

그러므로 Dom Element 구조를 Cache 하여 사용하는 것이 좋다 .

접근 할 때마다 Dom syntax 로 쓰지 말고 변수에 할당해서 쓰도록 한다 .


Rule 25. Develop Smart Event Handlers


Develop Smart Event Handlers 1 / 2

각각의 Dom element 에 이벤트를 거는것 보다는 상위 Element 이벤트를 걸어 하나의 이벤트로 처리하고

하위 element 속성으로 처리 하는 게 좋다 .


Rule 26. Choose <link> over @import


Choose <link> over @import 1 / 2

<link> 는 하위 브라우저까지 모두 지원되고 @import 는 최신 브라우저만 지원하기때문에 구 버전의 CSS

버그를 피하기 위해서 @import 를 쓰기도 한다 .

하지만 @import 를 쓰면 <link> 를 bottom 에 둔 것과 같은 결과를 초래하기 때문에 사용하지 않는 것이 좋

다 .

또한 @import 는 이미지보다 CSS 를 늦게 불러오기 때문에 속도 향상에 좋지 않은 영향을 끼친다 .

더 자세한 내용

http://seye2.egloos.com/2319809

http://seye2.egloos.com/2319809


Rule 27. Avoid Filters


Avoid Filters 1 / 2

IE 전용 filter 인 AlphaImageLoader 는 ie7 이하 버전에서 png 반투명 이미지를 쓸 수 있도록 해준다 .

그러나 이 filter 를 사용하면 랜더링 되는 동안 이미지를 다운로드 하는 동안 브라우저가 멈추게 되고 , 메모리를

증가시키는 등 여러 가지 단점이 있다 .

가장 좋은 접근 방법은 AlphaImageLoader 를 지양하고 좀 질이 떨어지더라도 png8 로 지원하는 것이다 .

그렇지만 만약 AlphaImageLoader 를 정말 사용해야 한다면 ie6 전용 핵인 “ _” 을 사용하여 다른 브라우저

사용자들에게 피해가 가지 않게 한다 .

div {_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘test.png', sizingMethod='image');}

ex

)


Rule 28. Optimize Images


Optimize Images 1 / 2

웹사이트에 넣을 이미지를 웹 서버로 올리기 전에 이미지를 최적화 시켜주도록 한다 .

먼저 Imagemagick 을 이용하여 gif 이미지를 컬러 수에 맞게 사이즈를 조정해 주는 방법이 있다 .

그리고 gif 파일을 png 파일로 변환하여 저장하는 방법이 있는데 이렇게 되면 보통은 사이즈가 줄어든다 .

개발자들은 보통 브라우저의 제한 때문에 png 사용을 꺼려하지만 이렇게 사용하면 훨씬 빨라진다 .

한가지 문제가 있다면 true color png 이미지의 alpha-transparency 지원 문제인데 gif 이미지는 사실 true

color 가 아니며 그 어떤 다양한 투명이미지도 지원하지 않는다 .

그러므로 gif animation 이 아닌 이상은 PNG-8 로 저장하여 최적화 시키는 것이 좋다 .

그 외에도 pngcrush(PNG optimizer tool), jpegtran 등을 이용하여 최적화 할 수 있다 .

http://en.wikipedia.org/wiki/Pngcrush

http://en.wikipedia.org/wiki/Libjpeg


Rule 29. Optimize CSS Sprites


Optimize CSS Sprites 1 / 2

Image Sprites 기법을 쓸 때 background image 를 수직으로 나열하지 않고 수평으로 나열하면 파일

사이즈를

줄일 수 있다 .

그리고 비슷한 색상의 image 를 조합하면 컬러 수가 줄어 256 색상 미만의 PNG8 파일로 만들기에 좋다 .

모바일 에 서비스 될 것도 고려해야 하며 각 이미지 사이에 큰 여백을 남기지 않도록 한다 .

여백이 파일 용량에 크게 영향을 미치지는 않지만 사용자들이 이미지를 픽셀 맵으로 압축 푸는데

적은 메모리만을 필요로 하게 됩니다 . 100x100 이미지는 10000 개 픽셀 ,


Rule 30. Don’t Scale Images in HTML


Don’t Scale Image in HTML 1 / 2

Image 에 지정된 width, height 와 같은 크기의 image 를 사용한다 .

만약 <img width="100" height="100" src="mycat.jpg" alt="My Cat" /> 가 필요하다면 500x500px 를

강제로

줄여 사용하는 것보다 100x100px 의 이미지를 사용하는 것이 좋다 .


Rule 31. Make favicon.ico Small and Cacheable


Make favicon.ico Small and Cacheable 1 / 2

favicon.ico(short for favorites icon) 은 서버 루트에 있는 이미지 이다 .

IE 에서는 Onload 시 다른 component 를 요청할 때 먼저 로딩됨으로써 해당 component 로딩 시 방해가

된다 .

그러므로 favicon.ico 를 만들 때는 1K 로 이하로 작게 만들고 , Expires header 를 설정하여 사용하는 것이

좋다 .


Rule 32. Keep Components under 25K


Keep Components under 25K 1 / 2

iPhone 에서 25K 보다 큰 크기의 component 를 cache 하지 못하기 때문에 생긴 제한이다 .

압축전의 용량이며 Gzip 으로는 충분치 압축이 되지 않을 수 있기 때문에 처음부터 이미지 25K 가 넘지 않도록

제작 하는 것이 좋다 .

더 자세한 내용이 알고 싶다면 Wayne Shea & Tenni Theurer 의 "Performance Research, Part 5: iPhone

Cacheability - Making it Stick“ 를 참조 할 것 .


Rule 33. Pack Components into a Multipart Doc-ument


Pack Components into a Multipart Document 1 / 2

Email 의 첨부파일과 같이 multipart(Content-Type 중 하나로 여러 개의 독립된 섹션으로 구성된 데이터를

하나의 메시지로 조합하여 전송 ) 문서로 component 들을 묶는 것이 여러 개의 component 를 하나의 HTTP

request 로 전송하는데 도움을 준다 .

이 기술을 사용할 때는 먼저사용자 agent 가 이 기술을 지원하는 지를 확인 하도록 한다 .

(iPhone 은 지원하지 않는다 .)


Reference 1 / 2

원문

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

참고문서

http://static.slideshare.net/swf/ssplayer2.swf?doc=high-performance-web-pages-20-new-best-practi

ces-120577522992998-3

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

http://static.slideshare.net/swf/ssplayer2.swf?doc=high-performance-web-pages-20-new-best-practices-120577522992998-3

http://static.slideshare.net/swf/ssplayer2.swf?doc=high-performance-web-pages-20-new-best-practices-120577522992998-3

Documents

High performance websites v1.0