High performance websites v1.0

956 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
956
On SlideShare
0
From Embeds
0
Number of Embeds
73
Actions
Shares
0
Downloads
22
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

High performance websites v1.0

  1. 1. Best Practices for Speeding Up Your Web Site <br />디자인실UI Dev 이선실, 김수성<br />
  2. 2. The important of Front-end Performance<br />
  3. 3. Downloading (http://www.yahoo.com) in IE : empty cache<br />Back-end =5%<br />Front-end = 95%<br />
  4. 4. Downloading (http://www.yahoo.com) in IE : primed cache<br />Even here, front-end= 95%<br />
  5. 5. Downloading percentage<br />* Percentage of time spent downloading the HTML document for 10 top web site<br />
  6. 6. Downloading percentage<br />보통 웹사이트에서 Html 문서를 웹 서버로부터 다운(Back-end) 받는데 <br />소요되는 시간은 10~20%이다.<br />그 외 80~90%는 Html에서 사용되는 components를 다운(Front-end)받는데 소요된다.<br />*단, cache된 상태의 Google은 제외된다. <br /> Google은 오직 6개의 components만 가지고 있기 때문에 front-end에 소요되는 시간이 길지 않다.<br />
  7. 7. How can response time be reduced?<br />첫 번째,<br />Front-end에 Focus 하면 response time을 줄이는데 더욱 효과적<br /><ul><li>Back-end 를 50% 줄일 경우 : 전체의 5~10% 감소
  8. 8. Front-end를 50% 줄일 경우 : 전체의 40~45% 감소</li></ul>두 번째,<br />Front-end에서 작업할 경우, Back-end에서 작업할 때 보다더 적은 시간과 더 적은 resource가 <br />필요.<br />세 번째,<br />여러 프로젝트 경험을 바탕으로, 보통 25% or 그 이상의 response time을 줄일 수 있다.<br />
  9. 9. Rule 1. Make Fewer HTTP Requests <br />
  10. 10. Minimize HTTP Requests<br />End-userresponse time의 80%를 front-end단에서 차지한다.<br />이 response time의 대부분은 페이지내에서 사용되어지는 components -Images, Stylesheets, Scripts, <br />Flash 등- 를 다운로드 하는데 소요된다.<br />여기서 component의 수를 줄이는 것이 HTTP request를 줄이는 하나의방법이며,<br />빠른 웹 페이지 만들기의 중요 포인트라고 할 수 있다.<br />Component의 수를 줄이기 위해 페이지 설계를 간단하게 할 수도 있지만 사용자가 필요로 하는 <br />많은 양의 contents를 보여주면서 response time을 줄일 수 있는 방법을 사용하는 것이 더 <br />효과적이라고 할 수 있다.<br />여기서 HTTP request 수를 줄이는 몇 가지 방법을 알아보자.<br />
  11. 11. Combined files<br />HTTP request 수를 줄이기 위해서사용되어진 모든 Script를 하나의 Script로 통합하고, <br />이와 같이 CSS도 하나의 Stylesheet로 통합한다.<br />이러한 방법은 각 페이지 마다 다르게 사용해야 할 때 문제가 될 수도 있겠지만 작업 시 하나의 과정으로 <br />포함시킨다면 response time을 줄일 수 있을 것이다.<br />ex)<br /><link rel="stylesheet" type="text/css“ ref="http://i.kthimg.com/search/css/sch_layout.css"><br /><link rel="stylesheet" type="text/css“ ref="http://i.kthimg.com/search/css/sch_result.css"> <br /><link rel="stylesheet" ype="text/css“ ref="http://i.kthimg.com/search/css/sch_prn.css"><br /><link rel="stylesheet" ype="text/css“ ref="http://i.kthimg.com/search/css/sch_1.0.css"><br />
  12. 12. CSS Sprites<br />페이지 내에 사용된 Background image의 request 를 줄이기 위해 쓰이는 방법이다.<br />작고 간단하고 반복 되어 지지 않는 Background image들을 하나의 이미지로 합치고 css의background-image와 background-position 속성으로 필요한 부분만 보여준다.<br />ex)<br />.mre a{background:url(http://i.kthimg.com/search/img/bg_ic.gif) 0 1px no-repeat;}<br />
  13. 13. Image Maps<br />여러 개의 연속적인 이미지에 링크를 걸어야 할 때 사용한다.<br />이미지의 전체 사이즈는 거의 같지만 HTTP request가 줄어들어 페이지 로딩 속도는 빨라지나좌표 지정이 <br />쉽지 않고 에러를 유발하기 쉽다.<br />그리고 이미지맵은접근성이 부족하기 때문에 navigation bar에는 사용하지 않는 것이 좋다.<br />ex)<br />Example 1 - No Image Map이미지맵을 사용하지 않았을 때 <br />Example 2 - Image Map이미지맵을 사용했을 때<br />
  14. 14. Inline image (data:URL scheme)<br />data:URL scheme를 이용해서 실제 페이지에 이미지를 넣는다.<br />이것은 HTML 문서의 크기를 증가시킬 수 있지만 HTTP request를 감소시키고 페이지 사이즈 증가를 <br />막을 수 있다. <br />data:[<mediatype>][;base64],<data><br />단, 이 방법은 글자수 제한이 있고 모든 브라우저에서 지원되지 않는다.<br />ex)<br /><IMG BORDER=1 SRC="data:image/gif;base64, R0lGODdhMQAiAPcAAP////f39+/………."><br />
  15. 15. Rule 2. Use a CDN(Content Delivery Network) <br />
  16. 16. Use a CDN<br />일종의 캐시 역할을 할 수 있도록 전체 network 상에 동일한 contents 내용을 복제하여, 대규모 인트라넷 <br />또는 인터넷상에 분산시켜 놓은 시스템.<br />인터넷 이용자의 증가와 멀티미디어 등 대용량 contents에 대한 수요의 증가로 인해 데이터 트래픽은 <br />기하급수적으로 늘어나는 데 비해 Middle-Mile이라 불리는 네트워크간 연결구간에 대한 투자는 이에 미치지 <br />못해 결과적으로 인터넷은 트래픽의 정체현상, 즉 병목현상이 발생하게 되었다.<br />이러한 현상을 해결하기 위한 방법이 Content Delivery Network이다.<br />CDN은 기간망과 가입자망간의 연결을 물리적인 망의 증설을 통해 개선하는 것이 아니라 병목현상의 대상인 <br />데이터 트래픽, 즉 Contents를 인터넷 네트워크의 주요지점으로 분산시킴으로써 해결하는 것이다.<br />CDN은 사용자의 콘텐츠 요구에 가장 빠르게 연결이 가능한 네트워크를 중계해 주고 contents를 전송해 준다.<br />Contents가 복제되어 특정 국가 또는 전세계에 걸쳐 분산 배치되면, 사용자들은 그것이 하나의 웹사이트에 <br />있을 때보다 훨씬 더 빠르게 액세스할 수 있게 된다.<br />Akamai와 같은 contents 전달 조직, 전국의 커버할 수 있는 대규모 ISP, 또는 대기업 등에 의해 제공 된다<br />
  17. 17. Use a CDN<br /><ul><li> 신속성</li></ul>분산 노드와GLB를 통한 최적의 전송경로 제공<br />인터넷 사용자를 위한 최고의 전송속도 보장 <br /><ul><li> 안정성</li></ul>트래픽 폭주로 인한 성능 저하 방지<br />동기화를 통해 최신 콘텐츠를 안전하게 전송 <br /><ul><li> 비용절감</li></ul>사용량을 기준으로 한 종량제 요금체계<br />초기 인프라 투자비용 및 IT 운영비용 절감 <br /><ul><li>확장성</li></ul>예상치 못한 트래픽 증가 해결 <br />전세계 40개 Server Farm, 300Gbps의 네트워크 인프라활용 (2007년 9월 기준) <br />
  18. 18. Rule 3. Add an Expires or a Cache-Control Header <br />
  19. 19. Add an Expires or a Cache-Control Header <br />브라우저 캐시를 위해 Expires Date 와 Cache Control 추가<br />
  20. 20. Rule 4. Gzip Components <br />
  21. 21. Gzip Components<br />Gzip은 국제 표준으로 등록된 무료 압축 포맷이다. <br />브라우저는 자신이 압축을 해제할 수 있는 압축 포맷을 HTTP 헤더 Accept-Encoding의 속성을 이용해서 <br />전달하는데이 때 서버는 이 속성을 확인하여 본문을 압축할 수 있다. <br />(RFC1952) 이 기술은 현재 가장 많이 사용하고 있고 그만큼 성능도 좋다.<br />이미지 등 이미 압축처리가 된 파일에는 효과가 없으므로 html, js, css같은 텍스트 파일에만 Gzip을 적용한다.<br />또한 용량이 적은 파일을 압축하면 전달되는 속도보다 압축을 적용하고 푸는 시간이 더 걸릴 수 있고<br />압축 적용 시 서버와 클라이언트의 CPU 리소스를 불필요하게 소비하게 된다.<br />기본적으로 웹 IIS서버는Gzip이나 deflate 압축을 지원하지 않으므로 따로 처리한다.<br />
  22. 22. Rule 5. Put Stylesheets at the Top<br />
  23. 23. Put Stylesheets at the Top <br />1 / 2<br />Stylesheet는 항상 head에 넣는다.<br />그렇게 되면 페이지 랜더링이 더 빨라지기 때문에 로딩속도가 향상 된다.<br />웹 페이지 내용에 상관없이 가능한 한 빨리 로딩이 되기를 원하기 때문에 많은 내용의 contents를 가진 <br />페이지와 느린 인터넷을 사용하는 사용자에게 특히 중요하다.<br />문서의 아래에 stylesheet를 넣게 되면 요소를 다 불러온 후에 다시 위에서부터 style을 입히게 된다.<br />그 과정에서 IE등의 브라우저에서는 마지막 style이 로딩 될 때까지 랜더링을 멈추고 있다가 style이 로드 된 후<br />랜더링을 한다. 이 과정에서 사용자들은 아무것도 없는흰 페이지를 보게 되는 문제가 발생하게 된다.<br />html 표준에서도 stylesheet를 페이지의 head에 넣기를 권장하고 있다.<br />
  24. 24. Rule 6. Move Scripts to the Bottom<br />
  25. 25. Move Scripts to the Bottom<br />1 / 2<br />스크립트 실행에 지연이 걸려 페이지가 늦게 오픈 되는 걸 방지하기 위해 하단에 두어야 한다.<br />
  26. 26. Rule 7. Avoid CSS Expression<br />
  27. 27. Avoid CSS Expression<br />1 / 2<br />CSS expression은 다이나믹한 css속성을 지원하는 것으로 강력하지만 위험한 방법이다.<br />예를 들어 CSS expression을 사용하여 background color를 매 시간 별로 번갈아 가며 보여지게 설정할 수 있다.<br />background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );<br />여기서 보다시피, expression method로 JavaScript expression에 접근할 수 있다. <br />CSS 속성은 JavaScript expression의 계산 결과로 설정된다. <br />Expression method는 IE -IE5부터 지원된다- 외 다른 브라우저에선 작동이 안되므로 IE에서 다른 브라우저와 <br />일관된 기능을 지원하기 위해 사용한다.<br />이 expression의 문제는 예상보다 훨씬 자주 실행된다는 데 있다. <br />페이지가 rendering 되고 resize 될 때에만 실행되는 것이 아니라 스크롤을 움직일 때나 페이지 위에서 마우스를 움직일 때에도 실행 된다.<br />
  28. 28. Avoid CSS Expression<br />1 / 2<br />Expression 카운터 http://stevesouders.com/hpws/expression-counter.php<br />(CSS Expression이 동작 할 때마다 카운트 계산)<br />그 방법을 해결 하기 위한 방법 중 하나는 expression이 한번만 실행되게 제한하는 것이다.<br />만약 유동적인 페이지에 expresstion을 줘야 한다면 event handler로 대체하는 것도 좋은 방법이다.<br />CSS expresstion을 사용해야 할때에는 이러한 문제들을 충분히 생각한 후에 꼭 필요한 경우에만 <br />적용하도록 한다.<br />
  29. 29. Rule 8. Make JS and CSS external<br />
  30. 30. Make JS and CSS external<br />1 / 2<br />JavaScript와 CSS를 외부 파일로 불러오게 되면 browser에 의해 캐싱이 되기 때문에 일반적으로 더 빠르게 <br />페이지를 출력한다.<br />HTML 문서에 inline 형식으로 존재하는 JavaScript와 CSS는 HTML 문서가 요청될 때마다 매번 다운로드 하는데 그렇게 되면 HTTP request 수는 감소할지 모르겠지만 HTML 문서의 크기는 늘어나게 된다.<br />반면에, JavaScript와 CSS가 브라우저에 의해 외부 파일로 캐싱이 된다면 HTML 문서의 크기는 request 수를 <br />증가시키지 않으면서 감소하게 된다.<br />여기서 중요한 점은 HTML 문서의 수와 외부 JavaScript, CSS의 요청 빈도이다.<br />어느 웹사이트에서 사용자들이 여러 페이지를 방문하고 그 페이지들이 동일한 JavaScript와 CSS를 사용하고 <br />있다면 외부 파일로 캐싱 되게 하는 것이 좋다.<br />만약 페이지 뷰가 적거나 한정된 곳에만 적용이 되어야 하는 경우라면 JavaScript나 CSS를 inline화하는 것이 <br />응답 속도가 더 빠르다.<br />
  31. 31. Make JS and CSS external<br />1 / 2<br />많은 페이지로 연결되는 front page 같은 경우는 외부파일 캐싱 이라는 장점과 inline의 HTTP request 감소를 <br />같이 사용할 수 있다. <br />Front page에서 사용할 JavaScript와 CSS는 inline으로 넣어 놓고 페이지가 로딩을 마친 후에 동적으로 <br />외부 파일을 다운로드 한다. <br />그러면 그 후의 페이지들은 캐싱 되어 있는 외부 파일을 참조하게 되어 로딩 속도가 빨라질 것이다.<br />
  32. 32. Rule 9. Reduce DNS Lookups<br />
  33. 33. Reduce DNS Lookups<br />1 / 2<br />일반적으로 해당 호스트에 대한 IP 주소를 조회하려면 DNS에 20-120 micro sec 정도 걸리므로 <br />Image/JS/CSS 링크의 Domain 수를 최소화해야 한다.<br />
  34. 34. Rule 10. Minify JavaScript and CSS<br />
  35. 35. Minify JavaScript and CSS<br />1 / 2<br />JavaScript와 CSS의 최소화는 모든 주석을 제거하고 불필요한 공백(space, newline, and tab)을 제거 함으로써 <br />코드의 사이즈를 줄여 로딩 속도가 빨라지게 한다. <br />그렇게 되면 JavaScript의 경우 다운로드 되는 파일의 사이즈가 감소 하기 때문에 속도가 향상된다.<br />자바스크립트를 최소화 해주는 툴 중 잘 알려진 프로그램에는 JSMin와 YUI Compressor가 있는데, <br />그 중 YUI compressor로는 CSS 파일도 최소화 할 수 있다.<br />Obfuscation(난독화,암호와)는 코드 압축에 최적화 된 대체 기술로써 소스 코드 중에서 가장 중요한 멤버나 <br />메소드의 이름을 짧고 무의미한 것으로 대체해 다른 사람이 도용하거나 가져다 쓰는걸 막아준다. <br />미국 Top10 웹사이트 조사 결과를 보면 최소화 한 파일은 크기가 21% 감소한것에 비해 Obfuscation 한 파일은 25%가 감소하여 보다 뛰어난 성능을 보여주고 있다.<br />그러나 방법이 훨씬 복잡하고 압축도중 스크립트 오류를 발생시킬 위험이 있으며 사실상 응답속도에 별 영향을 미치지 못하므로 단순히 최소화 시키는 것이 더 효과적이라고 볼 수 있다.<br />ex) varpserson; -> var AB<br />
  36. 36. Minify JavaScript and CSS<br />1 / 2<br />외부 Script와 CSS파일과 마찬가지로 inline으로 들어가 있는 Script와 CSS도 최소화가 가능하다.<br />Gzip (웹 서버에서 사용자 브라우저로 갈 때만 html파일을 압축해주는 서버모듈)을 통해서 압축한 후라도 <br />Script와 CSS를 최소화를 하게 되면 적어도 5%이상 사이즈를 더 감소 시킬 수 있다.<br />
  37. 37. Rule 11. Avoid Redirects<br />
  38. 38. Avoid Redirects<br />1 / 2<br />Redirect 동안에는 다른 작업을 시작할 수 없다<br />http://www.paran.com/test ( 301 redirect 됨)<br />http://www.paran.com/test/ 디렉토리일경우/ 까지 기입<br />
  39. 39. Rule 12. Remove Duplicates Scripts<br />
  40. 40. Remove Duplicates Scripts<br />1 / 2<br />request 를 줄이기 위해 개발자의 실수로 인한 중복 기술된 스크립트 줄인다.<br />실제 같은 external js를 여러번 호출하면 호출한 만큼 request 된다.<br />
  41. 41. Rule 13. Configure ETag<br />
  42. 42. Configure ETag<br />Compare<br />1 / 2<br />웹서버와 브라우저가 캐시 된 구성요소들의 유효성을 확인하기 위해서 사용하는 메커니즘.<br />브라우저의 캐시된 파일의 유효하면 [304 Not Modified] 발생시킨다.<br />유효하지 않으면 서버에서 파일을 받아 [200 OK] 발생한다.<br />HTTP Request<br />Server<br />Browser<br />Disk<br />Read Cache<br />Download<br />200 OK<br />304 Not Modified<br />Last-Modified<br />ETag<br />
  43. 43. Configure ETag<br />1 / 2<br /> GET /i/yahoo.gif HTTP/1.1<br /> Host: us.yimg.com<br /> -------------------------------------------------------><br /> HTTP/1.1 200 OK<br />Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT<br />ETag: "10c24bc-4ab-457e1c1f"<br /> Content-Length: 12195<br /> -------------------------------------------------------><br /> GET /i/yahoo.gif HTTP/1.1<br /> Host: us.yimg.com<br />If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT<br />If-None-Match: "10c24bc-4ab-457e1c1f"<br /> -------------------------------------------------------><br /> HTTP/1.1 304 Not Modified<br />Request<br />Response<br />Request<br />Response<br />
  44. 44. Configure ETag<br />1 / 2<br />출처<br />http://support.microsoft.com/kb/922703/<br />http://www.apacheweek.com/issues/02-01-18<br />http://firejune.com/1151<br />
  45. 45. Rule 14. Make Ajax Cacheable<br />
  46. 46. Make Ajax Cacheable<br />1 / 2<br />Ajax 통신시 캐쉬 기능을 구현<br />
  47. 47. Rule 15. Flush the Buffer Early<br />
  48. 48. Flush the Buffer Early<br />1 / 2<br />버퍼링을 사용함으로써 완료된 html 이 아닌 사용자가 원하는시점에 출력을 지정할 수 있으므로 브라우저의 <br />대기 시간이 줄어든다.<br />
  49. 49. Rule 16. Use Get for Ajax Requests<br />
  50. 50. Use Get for Ajax Requests<br />1 / 2<br />Ajax 사용할때는GET Method 가 빠르다.<br />POST 는 XMLHttpRequest사용시 header 를 보낸 후 data 를 보내는 두 가지 step 으로 되어있어서 GET 보다 <br />느리다.<br />
  51. 51. Rule 17. Post-load Components, Preload Components<br />
  52. 52. Post-load Components, Preload Components<br />1 / 2<br />페이지가 열릴 때 필요한 구성요소와 onload후에 필요한 구성요소를 구분하여 페이지 렌더링을 빠르게 <br />구현하기 위해 구조화 작업이 필요.<br />
  53. 53. Rule 18. Reduce the Number of DOM Elements<br />
  54. 54. Reduce the Number of DOM Elements<br />1 / 2<br />Dom 구조를 간략하게 해야 한다.<br />
  55. 55. Rule 19. Split Components Across Domains<br />
  56. 56. Split Components Across Domains<br />1 / 2<br />web페이지를 구성하는 요소들의 호스트를 분산하면 빨라질 수 있다.<br />ex) css/js/img<br />
  57. 57. Rule 20. Minimize the Number of Iframes<br />
  58. 58. Minimize the Number of Iframes<br />1 / 2<br />Iframe은 html 문서를 다른 html문서에 삽입 하는 기능이다.<br />Iframe은 광고나 배너등 외부 컨텐츠를 불러오거나, doc type등이 다른 html 문서를 한 화면에서 보여줘야 <br />할 때 유용하다.<br />그러나 아무 내용이 없어도 트래픽이 발생하고 request가 증가하게 되므로 꼭 필요할 때만 사용하는 것이 좋다.<br />iframe안에 css/js등이 parent 와 같이 있어도 다시 request 됨으로 주의해야 한다.<br />
  59. 59. Rule 21. No 404s<br />
  60. 60. No 404s<br />1 / 2<br />불필요한 404 not found 페이지를 제거한다.<br />
  61. 61. Rule 22. Reduce Cookie Size<br />
  62. 62. Reduce Cookie Size<br />1 / 2<br />불필요한 쿠키를 제거.<br />해당 도메인순<br />Expire 날짜 지정<br />
  63. 63. Rule 23. Use Cookie-free Domains for Components<br />
  64. 64. Rule 24. Minimize Dom Access<br />
  65. 65. Minimize Dom Access<br />1 / 2<br />Javascript로 Dom요소에 접근하는 것은 페이지 응답속도를 느리게 한다.<br />그러므로 Dom Element 구조를 Cache 하여 사용하는 것이 좋다.<br />접근 할 때마다 Dom syntax 로 쓰지 말고 변수에 할당해서 쓰도록 한다.<br />
  66. 66. Rule 25. Develop Smart Event Handlers<br />
  67. 67. Develop Smart Event Handlers<br />1 / 2<br />각각의 Dom element 에 이벤트를 거는것 보다는 상위 Element 이벤트를 걸어 하나의 이벤트로 처리하고 <br />하위 element 속성으로 처리 하는 게 좋다.<br />
  68. 68. Rule 26. Choose <link> over @import<br />
  69. 69. Choose <link> over @import<br />1 / 2<br /><link>는 하위 브라우저까지 모두 지원되고 @import는 최신 브라우저만 지원하기때문에 구 버전의 CSS 버그를 피하기 위해서 @import를 쓰기도 한다.<br />하지만 @import를 쓰면 <link>를 bottom에 둔 것과 같은 결과를 초래하기 때문에 사용하지 않는 것이 좋다.<br />또한 @import는 이미지보다 CSS를 늦게 불러오기 때문에 속도 향상에 좋지 않은 영향을 끼친다.<br />더 자세한 내용<br />http://seye2.egloos.com/2319809<br />
  70. 70. Rule 27. Avoid Filters<br />
  71. 71. Avoid Filters<br />1 / 2<br />IE 전용 filter인 AlphaImageLoader는 ie7 이하 버전에서 png반투명 이미지를 쓸 수 있도록 해준다.<br />그러나 이 filter를 사용하면 랜더링 되는 동안 이미지를 다운로드 하는 동안 브라우저가 멈추게 되고, 메모리를 증가시키는 등 여러 가지 단점이 있다.<br />가장 좋은 접근 방법은 AlphaImageLoader를 지양하고 좀 질이 떨어지더라도 png8로 지원하는 것이다.<br />그렇지만 만약 AlphaImageLoader를 정말 사용해야 한다면 ie6 전용 핵인 “_”을 사용하여 다른 브라우저 <br />사용자들에게 피해가 가지 않게 한다.<br />ex)<br />div {_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘test.png', sizingMethod='image');}<br />
  72. 72. Rule 28. Optimize Images<br />
  73. 73. Optimize Images<br />1 / 2<br />웹사이트에 넣을 이미지를 웹 서버로 올리기 전에 이미지를 최적화 시켜주도록 한다.<br />먼저 Imagemagick을 이용하여 gif 이미지를 컬러 수에 맞게 사이즈를 조정해 주는 방법이 있다.<br />그리고 gif 파일을 png파일로 변환하여 저장하는 방법이 있는데 이렇게 되면 보통은 사이즈가 줄어든다.<br />개발자들은 보통 브라우저의 제한 때문에 png사용을 꺼려하지만 이렇게 사용하면 훨씬 빨라진다.<br />한가지 문제가 있다면 true color png이미지의 alpha-transparency 지원 문제인데 gif이미지는 사실 true color가 아니며 그 어떤 다양한 투명이미지도 지원하지 않는다.<br />그러므로 gif animation이 아닌 이상은 PNG-8로 저장하여 최적화 시키는 것이 좋다.<br />그 외에도pngcrush(PNG optimizer tool), jpegtran 등을 이용하여 최적화 할 수 있다.<br />
  74. 74. Rule 29. Optimize CSS Sprites<br />
  75. 75. Optimize CSS Sprites<br />1 / 2<br />Image Sprites 기법을 쓸 때 background image를 수직으로 나열하지 않고 수평으로 나열하면 파일 사이즈를 <br />줄일 수 있다.<br />그리고 비슷한 색상의 image를 조합하면 컬러 수가 줄어 256 색상 미만의 PNG8 파일로 만들기에 좋다.<br />모바일 에 서비스 될 것도 고려해야 하며 각 이미지 사이에 큰 여백을 남기지 않도록 한다.<br />여백이 파일 용량에 크게 영향을 미치지는 않지만 사용자들이 이미지를 픽셀 맵으로 압축 푸는데<br />적은 메모리만을 필요로 하게 됩니다. 100x100 이미지는 10000개 픽셀, <br />
  76. 76. Rule 30. Don’t Scale Images in HTML<br />
  77. 77. Don’t Scale Image in HTML<br />1 / 2<br />Image에 지정된 width, height와 같은 크기의 image를 사용한다.<br />만약 <img width="100" height="100" src="mycat.jpg" alt="My Cat" />가 필요하다면 500x500px를 강제로<br />줄여 사용하는 것보다 100x100px의 이미지를 사용하는 것이 좋다.<br />
  78. 78. Rule 31. Make favicon.ico Small and Cacheable<br />
  79. 79. Make favicon.ico Small and Cacheable<br />1 / 2<br />favicon.ico(short for favorites icon)은 서버 루트에 있는 이미지 이다.<br />IE에서는 Onload시 다른 component를 요청할 때 먼저 로딩됨으로써 해당 component 로딩 시 방해가 된다.<br />그러므로 favicon.ico를 만들 때는 1K로 이하로 작게 만들고, Expires header를 설정하여 사용하는 것이 좋다.<br />
  80. 80. Rule 32. Keep Components under 25K<br />
  81. 81. Keep Components under 25K<br />1 / 2<br />iPhone에서 25K보다 큰 크기의 component를 cache하지 못하기 때문에 생긴 제한이다.<br />압축전의 용량이며 Gzip으로는 충분치 압축이 되지 않을 수 있기 때문에처음부터 이미지 25K가 넘지 않도록<br />제작 하는 것이 좋다.<br />더 자세한 내용이 알고 싶다면 Wayne Shea & TenniTheurer의 "Performance Research, Part 5: iPhoneCacheability - Making it Stick“를 참조 할 것.<br />
  82. 82. Rule 33. Pack Components into a Multipart Document<br />
  83. 83. Pack Components into a Multipart Document<br />1 / 2<br />Email의 첨부파일과 같이 multipart(Content-Type 중 하나로 여러 개의 독립된 섹션으로 구성된 데이터를 <br />하나의 메시지로 조합하여 전송) 문서로 component들을 묶는 것이 여러 개의 component를 하나의 HTTP request로 전송하는데 도움을 준다.<br />이 기술을 사용할 때는 먼저사용자 agent가 이 기술을 지원하는 지를 확인 하도록 한다.<br />(iPhone은 지원하지 않는다.)<br />
  84. 84. Reference<br />1 / 2<br />원문<br />http://developer.yahoo.com/performance/rules.html<br />참고문서<br />http://static.slideshare.net/swf/ssplayer2.swf?doc=high-performance-web-pages-20-new-best-practices-120577522992998-3<br />

×