1 / 29

H igh performance for Web sites

Based on @media 2007 Conference (London, 6.8~9) by Nate Koechley. H igh performance for Web sites. Presentation by UI-Development Team Chan-Hyun Roh. Web 2.0. 참여 , 공유 , 개방. 플랫폼으로서의 웹 집단 지성의 활용 데이터는 차세대 “Intel Inside” 소프트웨어 릴리즈 주기의 종말 가벼운 프로그래밍 모델 단일 디바이스를 넘어선 소프트웨어

verda
Download Presentation

H igh performance for Web sites

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Based on @media 2007 Conference (London, 6.8~9) by Nate Koechley High performance for Web sites Presentation by UI-Development Team Chan-Hyun Roh

  2. Web 2.0 참여, 공유, 개방

  3. 플랫폼으로서의 웹 집단 지성의 활용 데이터는 차세대 “Intel Inside” 소프트웨어 릴리즈 주기의 종말 가벼운 프로그래밍 모델 단일 디바이스를 넘어선 소프트웨어 풍부한 사용자 인터페이스 가벼운 프로그래밍 모델

  4. ‘가벼운 프로그래밍 모델’ 웹표준HTML페이지개발 접근 방향 Web 2.0 Web Standard Development High Performance Technique

  5. More Faster! High Performance!

  6. Response Time & System Efficiency

  7. Our Focus is Response Time of Web Products

  8. Back-end 5% Front-end 95% Importance of Front-end Performance 사용자 체감속도 저하

  9. One of solution With Cache!

  10. Empty Cache & First Loading Example:http://corp.nate.com 1.38 MB, 2.99 s Full Cache & Reloading 0.15 MB, 0.9 s 90% Fewer Bytes70% fewer Time

  11. Sadly, the Cache doesn’t work as well as we wish it did!

  12. 얼마나 많은 사람들이 캐시의 효과를 경험할 수 있을까요? Q1. 몇%의 사용자가 Empty Cache 상태에서 웹페이지를 열게 되는가? Q2. 전체 페이지뷰 중 몇%가 Empty Cache 상태에서요청이 될까?

  13. }1 px • 웹페이지에Blank이미지 추가 • <imgsrc="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 Yahoo! Browser Cache Experiment

  14. 2 Possible Response Code Yahoo! Browser Cache Experiment 200 OK 요청 성공 메시지 클라이언트에서 파일을 가지고 있지 않으므로 파일을 다운로드 304 Not Modified 요청이 성공하였지만 클라이언트의 캐시에 해당 파일을 가지고 있음 따라서 서버로부터 파일을 다운로드 하지 않고, 캐시를 사용한다.

  15. 전체 순수 사용자 중 한번이라도 200 code를 받은 사용자의 수 전체 순수 사용자 Yahoo! Browser Cache Experiment Q1. 몇%의 사용자가 Empty Cache 상태에서 웹페이지를 열게 되는가? 200code를 보낸 수 200 code와 304 code를 보낸 수 Q2. 전체 페이지뷰 중 몇%가 Empty Cache 상태에서요청이 될까? 그 결과는?

  16. users withempty cache page views withempty cache Yahoo! Browser Cache Experiment 40-60% ~20%

  17. Simple RulesFor Performance Fewer HTTP Request More Cache Hit

  18. CaseStudy

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

  20. <span style=" background-image: url('sprites.gif'); background-position: -260px -90px;"> </span> 1. CSS Sprites Fewer HTTP Request!!! Fewer Bytes!!! http://www.google.co.kr http://alistapart.com/articles/sprites http://sodumarvin.tistory.com/41

  21. 2. Combine JS, Combine CSS Fewer HTTP Request!!

  22. 콘텐츠 전송 네트워크 : Contents Delivery Network 3. Use CDN http://www.terms.co.kr/CDN.htm http://itviewpoint.com/tt/index.php?pl=2027

  23. CSS나 JS파일, XML 파일을 Gzip을 사용하여 압축하여 전송하면 다운로드 시간을 절약할 수 있다. 4. Gzip Components 대부분의 웹 브라우저는 이 기능을 지원한다. (90%+) http://www.pureye4u.com/ctest.html http://www.pureye4u.com/ctest2.html

  24. 5. CSS on the Top 2 Problems! Blank white screen Flash of unstyled contents 스타일시트 CSS파일은 HEAD태그 안에서 링크한다. (on the Top) 컨텐츠는 되도록 스타일을 사용한다. <LINK> 태그를 사용한다. (@import 사용은 지양)

  25. 자바스크립트가 다운로드 되는 동안 하부 컨텐츠가 다운로드 되지 않는다. 자바스크립트는 완전히 다운로드 될 때까지 실행되지 않는다. 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>

  26. 7. Avoid CSS Expressions • Internet Explorer 전용 속성으로, 동적으로 CSS를 적용한다. 하지만, width: expression( document.body.clientWidth < 600 ? “600px” : “auto” ); • 위와같은 코드에서는 expressionevent 가 계속 일어남 • (mouse move, key press, resize, scroll 등의 이벤트에 반응함) • cf. Javascript Event Handler • cf2. PNG in IE6 싸이월드에서 사용하는 .png24 클래스, 팝업의 그림자 등은 이것으로 대체할 수 있을까? http://home.tiscali.nl/developerscorner/transparency/transparent-dropshadow.htm

  27. Inline: HTML의 크기는 커지지만 HTTP Request 수는 줄어든다 External: CSS나 JS 파일이 캐시되지만HTTP Request 가 늘어난다 Factor : 각 사용자의 페이지뷰 Empty Cache VS Full Cache 상태 비교 코드 재사용성. * Conclusion : 대체로 External방식이 유리. 8. Make CSS & JS to External

  28. 9. Minify JavaScript, AJAX 자바스크립트 압축 프로그램 : http://crockford.com/javascript/jsmin http://dean.edwards.name/packer/

  29. Thank you!

More Related