박상혁 | 웹표준개발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

파일 요청 최소화 (Reduce HTTP Request)

• No Redirect

• 문서내의 연결된 문서의 URL 뒤에는 파일을 제외하고 모두 후행

슬래시를 넣거나 서버에서 설정해 주어야 한다.

• 1회 요청으로 응답이 오지 않고 502가 반환되어 후행슬래시를 넣

어 재 요청한다.

3-3

파일 요청 최소화 (Reduce HTTP Request)

• 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는 깊게 중첩될 수록 성능에 악영향을 끼친다.

• Short CSS Selector

• 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

브라우저 렌더링을 고려한 개발 방법

• 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