박상혁 웹표준개발2팀/UIT센터 2012.02
목차 1 꼭 빠르게 해야되나요? 1-1 속도의 심리학 1-2 사용자 환경 1-3 네트워크와 성능 2 Front-End 성능 최적화 2-1 Front-End 성능 최적화 2-2 파일 크기 최소화 2-3 파일 요청 최소화 2-4 브라우저 렌더링을 고려한 개발 방법 3 점검, 분석, 측정도구 그리고 사례 3-1 점검, 분석, 측정 도구 3-2 사례
1-1 일반적인 UI 디자인 가이드라인 대화형 시스템에서 응답을 기다려주는 한계는 5초 10초가 넘어가면 다른 작업으로 관심이 이행함 구분 응답시간 SW 디자인 가이드라인 Instantaneous (순간적) 0.2초 버튼 입력에 대한 반응 : 5~100ms 메뉴 펼치기 : 200ms Immediate (즉시) 0.5초 ~ 1초 책 페이지를 넘기는 시간 웹 브라우저의 페이지 업/다운에 대한 기대시간 Continuous (연속적) 2~5초 시스템이 멈추지 않았음을 주기적으로 알려줄 필요가 있음 5초가 넘어가는 경우 반드시 feedback 해야 함 Captive (참고 기다림) 7~10초 웹 페이지에서 사용자들이 떠남 자료 : designing and engineering Time, Steven Seow 2008 / Velocity 2010 / NHN, FE 성능 Awareness 교육 재인용 네이버 속도 만족도 실험 웹 페이지 캡쳐 후 다양한 속도로 화면을 재생하면서 체감속도와 만족도를 설문 2초가 넘어가면 실제 소요시간과 관계없이 느리고 답답하다 고 인지 4~5초 정도부터 만족비율 50% 이하로 하락 모바일이라고 해서 느린 것을 이해하고 기다리지 않음 단순한 서핑형 서비스(뉴스, 카페, 블로그, 웹툰, 영화)와 목적형 서비스(통합검색, 이미지 검색, 메일, 캘린더, 사전, 날씨등)의 경우 비슷한 만족도를 나타냈으나 목적형 서비스에서 보다 빠른 응답속도가 요구됨
1-2 초고속 인터넷 가입 유형 50M~100M 급 광랜이 60%에 육박하지만 아직도 HFC 나 ADSL 등의 저속망 사용자도 30%이상이다. 물리적인 여건 때문에 저속망 사용자가 쉽게 줄어들지 않을 전망 29% 14% 22% FTTH LAN xdsl HFC 35% 자료 : 방통위(초고속 인터넷 가입 유형 2011.9월 기준)
1-2 OS/인터넷 브라우저 구형 PC, 구형 브라우저 사용자가 아직도 많은 비중을 차지하고 있으므로 배려해야 한다. IE의 점유율이 상당히 높은 반면 IE 의 성능은 모바일 수준으로 낮다. No OS % Browser % 1 Win XP 61.39% Internet Explorer 8 51.6% 2 Win 7 31.82% Internet Explorer 7 16.2% 3 Win Vista 4.76% Internet Explorer 9 15.1% 4 ios 0.83% Internet Explorer 6 10.2% 5 Mac OS 0.70% Chrome 4.30% 6 Safari 1.57% 7 Firefox 0.69% 기준 : 2012.02.23 네이버 메인 접속 평균
1-2 국내 이동전화 및 스마트폰 가입자 수 데스크톱 컴퓨터를 타겟으로 제작한 웹 서비스를 무선망을 이용하여 노트북, 스마트폰, 태블릿 PC등 다양한 디바이스로 사용하고 있음. 기존 데스크톱 하드웨어에 비해 성능이 떨어지는 디바이스와 인터넷 망 사용자가 늘어나고 있음 2010.3 2010.6 2010.9 2010.12 2011.1 2011.2 이동전화 가입자(A) 4,898 4,961 5,021 5,077 5,098 5,116 스마트폰 가입자(B) 152 247 442 722 826 926 비중(B/A) 3.1 5.0 8.8 14.2 16.2 18.1 자료 : NIA 2011 국가 정보화 백서
1-3 네트웍이 빨라진만큼 웹 서비스도 빨라졌다? 네트웍이 빨라진만큼 웹 서비스도 빨라지지 않는다. 네트웍이 빨라진다는 의미는 회선 대역폭(bandwidth)이 증가했다는 것이다. 유선망의 전달지연은 물리적 한계에 도달하여 더 줄이기 어렵다 회선 대역폭이 증가하더라도 HTTP의 유효 대역폭은 크게 높아지기 어렵다. 웹 서핑 이외의 용도로 가용 대역폭이 좁아질 수도 있다. 30% 이상이 10M급 인터넷을 사용하고 있으며, 실제 대역폭은 이보다 낮다. 대역폭 보다는 latency가 더 중요하다. 10Mbps -> 100Mbps 증가 HTTP 대역폭은 많이 늘어나지 않고 유휴대역폭만 증가한다. latency는 그대로 자료 : NHN, FE 성능 Awareness 교육
1-3 무선망은? (모바일) 대역폭이나 latency면에서 해외 인터넷 수준이다. 단말기 칩셋에 따라 uplink가 느림 패킷 1회 왕복에 0.1~0.5초 소요되는 등 편차가 매우 큼 Warm up 이 덜 되었거나 채널이 부족한 경우 15kbps 까지 저하됨 HTTP GET 1건 = 0.6초, Redirect는 무조건 0.5초 손실 3G망 사용자는 해외 인터넷 사용자 수준의 지연이 발생
3-1 웹 페이지의 로딩 과정 Waterfall Chart로 보는 웹 페이지 로딩 과정 Block : 해당 리소의 로딩이 필요하다고 판단하고 로딩 시작전까지 대기 시간 (동시 연결수, 다른작업) DNS : DNS Lookup에 소요된 시간 Connect : 로딩 시작 이후 TCP 연결 생성에 소요된 시간 Send : HTTP 요청 전송에 걸린 시간 (긴 쿠키, 업로드할 데이터 양, 대역폭) Wait : HTTP 응답 시작까지 기다린 시간 Receive : 콘텐츠 수신에 소요된 시간 (대역폭) Cache read : 브라우저 캐시에서 콘텐츠를 읽어오는 시간) 대역폭 확장에 관계 되는 것은 Receive 구간이고 나머지 구간은 latency에 의해 결정된다. 또한 단말과 서버의 성능에 의해서도 크게 좌우된다.
3-1 Front-End 구간의 비중이 90% 이상 서비스에 따라 다를 수 있지만 사용자가 웹 페이지를 내려 받는데 까지 걸리는 시 간은 그리 오래 걸리지 않는다. 문서를 구성하는 추가 콘텐츠와 스타일등을 요청하고 받는 것이 대부분이다. Back End 0.047s Front-End 2.338s 자료 : NHN, FE 성능 Awareness 교육, Steve Souders, Velocity 2009 www.aol.com 97% www.ebay.com 95% www.facebook.com 95% www.yahoo.com 98%
3-1 최적화를 위한 3가지 요소 파일 크기 최소화 CSS & Javascript minification Image optimization File compression Cookies Free Domain 요청 최소화(Reduce HTTP request) Merge file Image Data URI CSS Sprites No Redirect Multi Domain 브라우저 렌더링을 고려한 개발 방법 Markup Complexity Short CSS Selector Reduce Reflow & Repaint ETC
3-2 파일 크기 최소화 HTML&CSS minification 주석,공백,빈줄 제거, 문법 특성을 이용한 축약 NHN 마크업 코딩 컨벤션을 토대로 한 CSS Formatter Image optimization http://html.nhndesign.com/markup_tools/imgoptimizer
3-2 파일 크기 최소화 File compression 브라우저가 요청한 파일을 서버에서 압축 전송하고 브라우저 압 축해제하여 보여주는 방법 일반적으로 모든 브라우저가 지원하는 gzip, deflate 방식 사용 http://www.whatsmyip.org/http-compression-test/ 중복되는 문자열(속성, 셀렉터, 속성값)이 많은 CSS의 경우 압축 률이 우수함 (80% 정도)
3-2 파일 크기 최소화 Cookies Free Domain Cookie가 필요 없는 이미지 파일은 도메인설정을 변경하여 Cookie 정보를 보내지 않도록 처리 page_uid=toukduql34gsscmikogcussssuh-221009; _naver_usersession_=tl5lzzfkyewaabj4b24; nid_inf=fb3a60de4e4d814ffe256ea715a1552f79ea5a4b10f6ffcd0fb49c272f6ebda617f6f8a4dd856bb4dfdcdef2a68e2cf079a3476b2bec 66a28db9b9f3896765c13f437265724681c0ec4ce7152f7188fd01babbd130110be3558b78891b49c892; nid_pwa=2; NID_AUT=/uT36s+7QTkgwlpoaHYPSBFubVwBa/g1LB37DSu56bN224rgODnMtaH7Mc2h5nbTtLBx4pf2YDdNQNA5oktLKezK Z91u4TpXEzdnt2XIZobxSGkduYqmHlsXriDTxE0E77uEprN3qFO5S6G3N6Po9INX1yeRnmx0ZkbtV2r0Waq2W+DbX+xX/yQa RY8evR1hBEavIWpJ1+nkj6xtvzqIu0dA7jJ9R/Ylcr5nVopPOZUG+TAjI+FFV9aulPQnnUIZ+badeORoqYQtwPwNgEKz/aev2zHto Kwagf9ytTJd1+UyCQZeowippFLt8T/p7AMjDUJeLLhBFt00fMJsydNwI/I77HWBT3WvERDF5kUXTBfw8zOa0FbvXsK1QmTM/j BTZi1nC2OPFN9WNj7FUFEeT5U1TuJJwIdLNa8ABBXeYsi3OaGtHs3m1lRxotS5xrwZzF9woydl5Kj/z4Zeph6s71DlESnRH5AsVs Ul42z/u+S4yAUrKYK5mXgysXwNmWfxE/fzlRPbjEzXhCV24mrK+A==; NID_MATCH_M=1; NID_DH_UI=1; NID_SES=LkNyeGAXjZ5uSOor5Wq36QRAIF7ZTxttsazPACSQOgi9rugcTntBlmPQ1cPBsfI4ctz2D4gwm8X3KFZJF4F/1uNmdug+ FJNFPaCykolJqxVIr/NYL+wRWoafSjo9qL3df65xdd7M42266Sh5dnoEL3P05BTnAAPRqfne/moa3No=; cc_menu=me2day; NIPD=1; NB=HE3TEMRYGYYTKMRX; NNB=ANYO4FMJAS6EY; npic=uk+ijlhyvc6ygvlykrrixln5edpzpxjzzczidiobpglwiuwecz6ztzm2qnmlrmohca==; DA_HC=LZ41135580,LB; NVSERV=appstore@ndrive@appfactory@contact; NNF=on; pwe_menu_type=list; nsr_acl=1; utma=163452323.450796262.1287541011.1287541011.1287541011.1; utmb=163452323.1.10.1287541011; utmc=163452323; utmz=163452323.1287541011.1.1.utmcsr=(direct) utmccn=(direct) utmcmd=(none); _naver_usersession_=tl5lzzfkyewaabj4b24; JSESSIONID=E2DF2BED82737391A2D933D6C58F428C; map_bicycle_warning_cookie=no; map_inaccurate_poi_cookie=no
3-3 파일 요청 최소화 (Reduce HTTP Request) Merge file 문서 구성에 필요한 CSS, Javascript 파일을 합친다. Image Data URI 이미지는 바이너리 데이터이므로 브라우저가 인식할 수 있도록 base64로 인코딩해서 문서에 직접 넣을 수 있다. <img src= data:image/png;base64; width= height= alt= > IE7이하에서는 불가, 별도 인코딩 프로세스가 필요, cache가 안됨 CSS Sprites 문서를 구성하는 요소 중 제일 많은 요청이 발생한다. 이미지 파일을 합친다.
3-3 파일 요청 최소화 (Reduce HTTP Request) No Redirect 문서내의 연결된 문서의 URL 뒤에는 파일을 제외하고 모두 후행 슬래시를 넣거나 서버에서 설정해 주어야 한다. 1회 요청으로 응답이 오지 않고 502가 반환되어 후행슬래시를 넣 어 재 요청한다.
3-3 파일 요청 최소화 (Reduce HTTP Request) Multi Domain 과도한 트래픽을 막기 위해 도메인 단위로 동시 접속수를 제한 요청이 많은 서비스일수록 Bottle Neck 발생 브라우저 HTTP/1.1 HTTP/1.0 IE 6,7 2 4 반면에 요청이 많지 않은 서비스는 DNS Lookup Time이 지연에 원인이 되기도 하므로 도메인을 통합하는 것이 성능을 향상 시킬 수도 있다. 하나의 도메인에서 너무 많은 리소스를 서브하면 wait 시간이 늘어남으로 도메인 분리하여 서브해야 함 하나의 도메인에서 극히 적은 리소스를 서브하면 DNS look up time 낭비
3-4 브라우저 렌더링을 고려한 개발 방법 Markup Complexity HTML의 DOM Node는 깊게 중첩될 수록 성능에 악영향을 끼친다. Short CSS Selector DOM Tree에 CSS를 파싱한 결과를 더해 렌더 트리를 만든다. 이때 브라우저는 CSS Selector를 이용하여 DOM Tree를 탐색한다. 브라우저는 제일 오른쪽 선택자를 기준으로 왼쪽으로 하나씩 옮겨가며 선택자와 정확히 일치하는지 탐색한다. <style type= text/css > div ul li a span{color:red} </style> <div> <h3>사람들<span>전체<span>(404)</span></span></h3> <ul> <li><a href= # >사람1<span>(101)</span></a></li> <li><a href= # >사람2<span>(101)</span></a></li> </ul> </div> 페이지 내에서 처음 span을 찾고 그 다음 a > span 를 찾고 다음에는 li > a > span을 찾고 그 다음 ul > li > a > span 을 찾고 그 다음에는 div > ul > li > a > span을 찾는다. 더 이상 왼쪽에 셀렉터가 없기 때문에 div > ul > li > a > span에 CSS로 선언 한 color 정보를 저장한다.
3-4 브라우저 렌더링을 고려한 개발 방법 Short CSS Selector 제일 오른쪽 셀렉터를 엘리먼트로 선언하는것보다 class나 ID로 선언하는 것이 렌더링 속도가 더 빠르다. 자식 선택자 선언 방식은 렌더링 시간은 차이가 없지만 반복 사용으로 코드 량이 늘어나므로 가급적 사용하지 않는다. :hover 사용시에는 IE7 에서 성능이슈가 있으므로 반드시 앞에 엘리먼트를 선언한다. 모든 요소에 매칭되는 *(universal key)는 사용하지 않는다. <style type= text/css >.man_lst ul li a.num{color:red} /* (X) */.man_lst a.num{color:red} /* ( ) */.num{color:red} /* (O) */ a.num:hover{color:blue} /* (O) */ </style> <div class= man_lst > <h3>사람들<span>전체<span class= num >(404)</span></span></h3> <ul> <li><a href= # >사람1<span class= num >(101)</span></a></li> <li><a href= # >사람2<span class= num >(101)</span></a></li> </ul> </div>
3-4 브라우저 렌더링을 고려한 개발 방법 Reduce Reflow 페이지 레이아웃에 관련한 요소들의 위치,순서, 배치, 간격등을 계산하는 것으로 반복되는 과정이다. http://www.youtube.com/watch?v=ztnixia5kgw
3-4 브라우저 렌더링을 고려한 개발 방법 Reduce Reflow 주로 동적으로 요소를 숨기거나 크기변경, 추가, 삭제등의 작업을 하면 브라 우저는 일부 혹은 페이지 전체를 다시 배치한다. 이러한 reflow를 최소화 하 는 것이 좋다. 보이지 않는 것은 화면 구성과 관계없으므로 화면 구성에 영향이 없다면 보 이지 않게 한 후 스타일을 변경하고, 다시 보이도록 설정한다. var el = document.getelementbyid("container"); el.style.display = "none"; for(var i=0; i < 1000; i++) { el.style.left += value+i; } el.style.display = "block"; 요소에 스타일을 설정함과 동시에 스타일 정보를 얻는 반복 구문은 피해야 한다. for(var i=0; i < object.length; i++) { object[i].style.left = object[i].offsetleft + 10 + "px"; }
3-4 브라우저 렌더링을 고려한 개발 방법 그 밖의 방법 자바스크립트가 필요할 때 로딩하는 Lazy Loading을 쓴다. 사용자 체감 속도를 향상시키기 위해 화면을 구성에 필요하지 않은 자바스 크립트는 onload 발생 이후에 로딩한다. DOM에 접근하는 자체만으로도 지연이 발생할 수 있으므로 DOM Caching을 사용한다. for (var i = 0; i < document.forms[0].elements.length; i++) { document.forms[0].elements[i].value; } var aelements = document.forms[0].elements; for (var i = 0, nlen = aelements.length; i < nlen; i++) { aelements[i].value; } 자료 : 자바스크립트 최적화 교육 자료 일부 발췌, Ajax UI 랩
4-1 점검 Yslow FF, Chrome, Opera, Safari, bookmarklet등 지원 Ruleset에서 원하는 항목만 체크할 수 있음 결과에서 리소스별 크기, 압축, 쿠키, 헤더, 만료일등을 점검할 수 있음 Page Speed FF, Chrome, online, apache 모듈등 지원 분석범위를 지정하고 JSON형식으로 저장하거나 외부로 전송가능 결과는 yslow와 비슷
4-1 분석 Dynatrace IE, FF 지원 렌더링 과정 (CSS Parsing, Reflow(layout), Painting) 추적 가능 Timeline에서 로딩, 렌더링 한눈에 파악이 가능하며 마우스, 키보드 이벤트 시점 표시 가능 Caching, Network, Server Side 의 상세한 분석이 가능하고, 측정 시간도 OLT가 아닌 rendering, On Server, On Client등으로 세분화된 것으로 볼 수 있다. http://ajax.dynatrace.com/ajax/en/download/download.aspx
4-1 측정 WebpageTest 다양한 위치, 환경의 agent에서 측정 가능 Pagespeed, Dynatrace와 연동 Filmstrip, Video Compare 지원 http://www.webpagetest.org http://www.webpagetest.org/result/120207_nx_34z1d/ http://www.webpagetest.org/video/compare.php?tests=120208_ct_ 357GH,120208_A2_357GJ
4-1 측정 NSpeed Web page Test의 Client PC Agent를 활용하고 내부 서버를 개발하여 사 내에서 사용할 수 있도록 함 Waterfall, filmstrip 지원
4-2 사례 압축 전송, 헤더 만료일 설정 필요, JS 병합
4-2 사례 IE6에서 CSS 에 AlphaImageLoader 사용시 블로킹
4-2 사례 78px * 60px 이미지가 30k 그 중 약 20k가 불필요한 메타데이터 (xmp, exif, ICC profile)
34