[2012널리세미나] 오빠~ 네이버 왜 이렇게 늦게 떠?

박상혁 | 웹표준개발2팀/UIT센터 | 2012.02

1-1 속도의 심리학
1-2 사용자 환경
1-3 네트워크와 성능
1 꼭 빠르게 해야되나요?
2 Front-End 성능 최적화
2-1 Front-End 성능 최적화
2-2 파일 크기 최소화
2-3 파일 요청 최소화
2-4 브라우저 렌더링을 고려한 개발 방법
목차
3 점검, 분석, 측정도구 그리고 사례
3-1 점검, 분석, 측정 도구
3-2 사례

1-1
일반적인 UI 디자인 가이드라인
• 대화형 시스템에서 응답을 기다려주는 한계는 5초
• 10초가 넘어가면 다른 작업으로 관심이 이행함
자료 : designing and engineering Time, Steven Seow 2008 / Velocity 2010 / NHN, FE 성능 Awareness 교육 재인용
구분 응답시간 SW 디자인 가이드라인
Instantaneous (순간적) 0.2초
버튼 입력에 대한 반응 : 5~100ms
메뉴 펼치기 : 200ms
Immediate (즉시) 0.5초 ~ 1초
책 페이지를 넘기는 시간
웹 브라우저의 페이지 업/다운에 대한 기대시간
Continuous (연속적) 2~5초
시스템이 멈추지 않았음을 주기적으로 알려줄 필요가 있음
5초가 넘어가는 경우 반드시 feedback 해야 함
Captive (참고 기다림) 7~10초 웹 페이지에서 사용자들이 떠남
네이버 속도 만족도 실험
• 웹 페이지 캡쳐 후 다양한 속도로 화면을 재생하면서 체감속도와 만족도를 설문
• 2초가 넘어가면 실제 소요시간과 관계없이 “느리고 답답하다”고 인지
• 4~5초 정도부터 만족비율 50% 이하로 하락
• 모바일이라고 해서 느린 것을 이해하고 기다리지 않음
• 단순한 서핑형 서비스(뉴스, 카페, 블로그, 웹툰, 영화)와 목적형 서비스(통합검색, 이미지
검색 , 메일, 캘린더, 사전, 날씨등)의 경우 비슷한 만족도를 나타냈으나 목적형 서비스에서
보다 빠른 응답속도가 요구됨

1-2
초고속 인터넷 가입 유형
• 50M~100M 급 광랜이 60%에 육박하지만
아직도 HFC 나 ADSL 등의 저속망 사용자도 30%이상이다.
• 물리적인 여건 때문에 저속망 사용자가 쉽게 줄어들지 않을 전망
22%
35%
14%
29%
FTTH
LAN
xDSL
HFC
자료 : 방통위(초고속 인터넷 가입 유형 2011.9월 기준)

1-2
OS/인터넷 브라우저
• 구형 PC, 구형 브라우저 사용자가 아직도 많은 비중을 차지하고 있으므로 배려해야
한다.
• IE의 점유율이 상당히 높은 반면 IE 의 성능은 모바일 수준으로 낮다.
기준 : 2012.02.23 네이버 메인 접속 평균
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%

1-2
국내 이동전화 및 스마트폰 가입자 수
• 데스크톱 컴퓨터를 타겟으로 제작한 웹 서비스를 무선망을 이용하여
노트북, 스마트폰, 태블릿 PC등 다양한 디바이스로 사용하고 있음.
• 기존 데스크톱 하드웨어에 비해
성능이 떨어지는 디바이스와 인터넷 망 사용자가 늘어나고 있음
자료 : NIA 2011 국가 정보화 백서
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

1-3
네트웍이 빨라진만큼 웹 서비스도 빨라졌다?
• 네트웍이 빨라진만큼 웹 서비스도 빨라지지 않는다.
• 네트웍이 빨라진다는 의미는 회선 대역폭(bandwidth)이 증가했다는 것이다.
• 유선망의 전달지연은 물리적 한계에 도달하여 더 줄이기 어렵다
• 회선 대역폭이 증가하더라도 HTTP의 유효 대역폭은 크게 높아지기 어렵다.
• 웹 서핑 이외의 용도로 가용 대역폭이 좁아질 수도 있다.
10Mbps -> 100Mbps 증가
latency는 그대로 자료 : NHN, FE 성능 Awareness 교육
HTTP 대역폭은 많이 늘어나지
않고 유휴대역폭만 증가한다.
• 30% 이상이 10M급 인터넷을 사용하고 있으며, 실제 대역폭은 이보다 낮다.
• 대역폭 보다는 latency가 더 중요하다.

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
• www.aol.com 97%
• www.ebay.com 95%
• www.facebook.com 95%
• www.yahoo.com 98%
자료 : NHN, FE 성능 Awareness 교육, Steve Souders, Velocity 2009

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
• No Redirect
• 문서내의 연결된 문서의 URL 뒤에는 파일을 제외하고 모두 후행
슬래시를 넣거나 서버에서 설정해 주어야 한다.
• 1회 요청으로 응답이 오지 않고 502가 반환되어 후행슬래시를 넣
어 재 요청한다.

3-3
• Multi Domain
• 과도한 트래픽을 막기 위해 도메인 단위로 동시 접속수를 제한
• 요청이 많은 서비스일수록 Bottle Neck 발생
• 반면에 요청이 많지 않은 서비스는 DNS Lookup Time이 지연에
원인이 되기도 하므로 도메인을 통합하는 것이 성능을 향상 시킬
수도 있다.
• 하나의 도메인에서 너무 많은 리소스를 서브하면 wait 시간이
늘어남으로 도메인 분리하여 서브해야 함
• 하나의 도메인에서 극히 적은 리소스를 서브하면 DNS look up
time 낭비
브라우저 HTTP/1.1 HTTP/1.0
IE 6,7 2 4

3-4
브라우저 렌더링을 고려한 개발 방법
• Markup Complexity
• HTML의 DOM Node는 깊게 중첩될 수록 성능에 악영향을 끼친다.
• DOM Tree에 CSS를 파싱한 결과를 더해 렌더 트리를 만든다.
• 이때 브라우저는 CSS Selector를 이용하여 DOM Tree를 탐색한다.
• 브라우저는 제일 오른쪽 선택자를 기준으로 왼쪽으로 하나씩 옮겨가며 선택자와
정확히 일치하는지 탐색한다.
• 페이지 내에서 처음 span을 찾고 그 다음 a > span 를 찾고 다음에는 li > a >
span을 찾고 그 다음 ul > li > a > span 을 찾고 그 다음에는 div > ul > li >
a > span을 찾는다.
• 더 이상 왼쪽에 셀렉터가 없기 때문에 div > ul > li > a > span에 CSS로 선언
한 color 정보를 저장한다.
<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>

3-4
• 제일 오른쪽 셀렉터를 엘리먼트로 선언하는것보다 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)

[2012널리세미나] 오빠~ 네이버 왜 이렇게 늦게 떠?

More Related Content

What's hot (20)

Viewers also liked (15)

Similar to [2012널리세미나] 오빠~ 네이버 왜 이렇게 늦게 떠? (20)

More from Nts Nuli (14)

[2012널리세미나] 오빠~ 네이버 왜 이렇게 늦게 떠?