1. 웹서비스, 빠를수록 좋다

2. 성능엔지니어링랩 @NHN 김일환
 성능에 대한 A-to-Z  분산처리, OS, TCP/IP
 Performance-as-a- feature  NHN
Thruput, Scalability, Latency, 인프라 아키텍처랩장
Availability… IT서비스 기획실장
 Back-end  front-end 성능 아키텍트
서버, 네트워크, noSQL 웹 / 모바일 서비스 성능
 Front-end 브라우저 / 네트워크 성능
브라우저, 네트워크, UI

3. 0.66sec

4. 1sec

9. Steven C. Seow
심리학 박사
Microsoft

10. 순간적 <0.2초 (200ms)
 눈 깜짝할 사이
 클릭  메뉴 펼쳐지는 시간
 액션게임 반응시간: 타겟 인식  발사

11. 즉시 <1초
 Flow = 몰입 상태의 지속
 책장을 넘기는 시간
 PageDn, Wheel Scroll

12. 연속적 <5초
 일시적으로 몰입상태를 벗어남
 몰입상태로 쉽게 되돌아갈 수 있음
 다른 창을 띄우거나 딴 짓은 못하는 시간

13. 참고 기다림 <10초
 짜증나지만 참고 기다릴 수 있음
 사용자가 다른 작업으로 switching하기 시작

14. Satisfaction =
Perception - Expectation
http://davidmaister.com/articles/5/52/

15. 웹 서비스에 대한
사용자들의 기대수준과 만족도

16. 목적형 서비스 (검색, 슬라이드쇼, 메일, 사전, 날씨)
2-3초를 넘어가면 만족률 < 50%
모바일 웹
85.3 PC 웹
73.8
89.4 60.3
78.9
만족률 = 50% 44.5
61.1 41.7
5점 만점
4-5점 응답자 비율 45.6
13.8
25.0
11.1
0.5 1 2 3 4 5 10
Source: NHN UX랩

17. 서핑형 서비스 (뉴스, 카페, 블로그, 웹툰, 영화)
과반수는 4-5초까지 기다릴 수 있음
모바일 웹
94.3 93.6
85.6 PC 웹
69.0 63.2
80.5 55.2
79.5
만족률 = 50% 68.8
5점 만점
4-5점 응답자 비율 41.0 20.8
17.6
0.5 1 2 3 4 5 10
Source: NHN UX랩

18. 1. 체감시간은 성능 + 디자인에 좌우
 색상, progress bar, progressive rendering, 마우스 버벅임 등
 기다리는 동안 즐길거리가 제공되는가?
2. 만족도는 기대수준에 반비례
 목적형 서비스: 2-3초 이내
 서핑형 서비스: 4-5초 이내

20. 1인당 PV vs. 로딩속도 High End
300 High Mid
Low Mid
250
Low End
200
150
100
50
0
1 2 3 4 5 6 7 8 9 10
로딩속도 (초)
High Mid: Dual core 2.4G 급
Source: NHN 데이터정보센터 Low Mid: Pentium 4 3G 급

21. 실험: 고의적인 서버 딜레이 주입
서버 딜레이 주입 딜레이 제거 후에도 회복 안됨
0.2%
대
조 -0.08%
군 0%
대
비 - 0.2% -0.36%
-0.21%
1
인
당 - 0.4%
검
색 - 0.6%
량
저 - 0.8% : 0.2s
하 -0.74%
율 - 1.0% : 0.4s
3주 4주 5주 6주 7주 8주 9주 10주 11주
Source : Performance Related Changes and their User Impact (Eric Schurman, Principal Development Lead, Bing; Jake Brutlag
Decision Support Engineering Analyst, Google)

22. 1초 딜레이 = 매출 ⇩ 3%
1인당 검색링크
1인당 QC 1인당 매출
재검색 수 클릭 수
0.05s - - - -
0.2s - - - -0.3%
0.5s - -0.6% -1.2% -1.0%
1s -0.7% -0.9% -2.8% -1.9%
2s -1.8% -2.1% -4.3% -4.4%
Source : Performance Related Changes and their User Impact (Eric Schurman, Principal Development Lead, Bing; Jake Brutlag
Decision Support Engineering Analyst, Google)

23. 왜 그럴까?

24. 나쁜 사용자경험
 만족도 저하
 재방문 기피
 PV 하락
 매출 저하

25. 나쁜 사용자경험
 만족도 저하
 재방문 기피
 PV 하락
 매출 저하
당연한 거 아님?
님 바보? ㅋㅋ

26. 로딩 = 수천만 사용자가 멍때리는 낭비하는 시간
검색결과 랜딩페이지
검색 로딩 로딩
열람 열람

27. 검색결과 페이지
검색 로딩 로딩
열람 열람
로 로
딩 딩
로 검색결과 로 페이지 열
검색
딩 열람 딩 람

28. 검색결과 페이지
검색 로딩 로딩
열람 열람
로 로
딩 딩
로 검색결과 로 페이지 열 로 추가 로 추가
검색
딩 열람 딩 람 딩 PV 딩 PV

29. 0.1초는 체감하기 힘든 짧은 시간, 하지만……
1. 로딩시간을 줄이면
전체 사용자의 총 가처분 시간이 늘어난다
2. 가처분 시간이 늘어나면 결국
사용자와 웹 생태계 모두의 이득
∴ 단 0.1초라도 빠를수록 좋다!

31.  Navigation Timing API
 window.performance.timing
 지원: IE 9+, FF7+, Chrome 6+
Web Performance WG: http://www.w3.org/2010/webperf/

32. 로딩끝
onload()
로딩시작
onunload()
onclick()
Web Performance WG: http://www.w3.org/2010/webperf/

33. 실제 사용자의 매 PV별 속도 집계
장점 단점
가장 정확한 현실 출시 사후에만 측정 가능
전체 PV 샘플링 상세 원인분석 불가
 구현체
 nav timing API, boomerang.js
 $$$: torbit.com, CorrelSense, Google Analytics…
 DIY: piwik.org, stathat.com, StatD, Graphite…

34. 인위적으로 구성된 네트워크 + Agent로 랩 테스트
 IDC 또는 가정집에 설치한 agent에서 측정
 변수통제: 네트워크/PC 배경부하, 캐시
 상세분석: TTFB, Waterfall, 시각성능(RST, AFT)
 모니터링
 구현체
 $$$: Gomez, Keynote
 DIY: WebPageTest

35. 인위적으로 구성된 네트워크 + Agent로 랩 테스트
과연 내 서비스 사용자 환경과 같을까?
대표성이 있을까?

36. Track F / 16:30~17:10 http://me2.do/50rkntO
 Synthetic Measurement tool
 네이버 사용자 환경 재현 테스트
 Calibrated test network & agent
 Desktop and mobile support
 Waterfall, filmstrip, regression

38. 웹 개발자 입장에서 보면…
단순 투자로는 개선 불가
DataCenter
노력하면 효율화 가능
NW, HW, OS, Browser
공급자 콘텐츠 마크업 서버
디자인 UI코드 성능
사용자 콘텐츠

39. Peak 대비 200% 이상의 headroom 용량 확보
장애에 대응하기 위한 이중화 및 overprovisioning
DataCenter

40. 사용자 환경
NW, HW, OS, Browser
사용자 콘텐츠

41. 가입자당 최대속도: 평균 50Mbps, 그러나…
“The State of the Internet”, 2012Q1, Akamai

42. 4Mbps 이하 가입자가 14%
한국 가입자 속도분포
14%
>10Mb
53% 4~10Mb
33%
<4Mb
“The State of the Internet”, 2012Q1, Akamai

43. 대역폭이 5M 있어도 2.5M 밖에 쓰지 못함
 실제로 웹브라우저가 쓰는
유효대역폭은 RTT에 반비례
 왜 다 쓰지를 못하니?
 TCP handshake
 TCP slowstart
 Browser blocking
http://www.belshe.com/2010/05/24/more-bandwidth-doesnt-
matter-much/

44. Track C / 15:40~16:20
 웹/앱 개발자 입장에서 궁금한
모바일 네트워크의 속사정
 3G 네트워크의 latency 문제
 TCP/HTTP 성능저하의 이유
 RRC state transition
http://me2.do/FzTGenF

45. 저사양 사용자 30%, 2.5배까지 느려짐
CPU 등급 분포 네이버 전체 평균 (초)
6.0
High end
8% High mid 5.0
Low mid 4.0
28%
21% Low end
3.0
2.0
43%
1.0
0.0
High mid: dualcore 2.4GHz 급 High High Low Low
Low mid: P4 3GHz 급 End Mid Mid End

46. IE6,7 PV 비중은 15%, 1.7배 느려짐
브라우저별 PV 점유율 네이버 전체 평균(초)
4.0
4% 3.5
1%
8% IE8 3.0
IE9 2.5
11% 47% IE7 2.0
chrome 1.5
29%
IE6
1.0
기타
0.5
0.0
IE 9 IE 8 IE 7 IE 6

47. 노력하면 효율화 가능
공급자 콘텐츠 마크업 서버
디자인 UI코드 성능

48. 로딩시간과의 상관관계 (Correlation)
0.8
0.7 0.73
0.6 0.65 0.63
0.59
0.5
0.4
0.42
0.3
0.2
0.1
0
총용량 이미지용량 총 건수 이미지 건수 js 용량
2012/9, http://httparchive.org

49. ※ 사용자 환경과 콘텐츠가 크게 다르기 때문에 로딩속도 상대비교는 배제
웹페이지 총 용량 (MB)
3.5 3.2
3
2.5
국내T100
2 국내포털
1.5 해외전체
1.1 1 해외T100
1
0.6
0.5
0
2012/9
랭키닷컴 상위 100 사이트
http://httparchive.org

50. 총 1.5MB 이하, 리소스 200개 이하, 웹 폰트 사용배제
3s~
네이버 서비스별 리소스 현황 2~3s
Request (단위: 개) ~2s
400
(4.9s)
300 (3.0s)
(1.7s)
200 (3.3s) (5.1s)
(3.8s)
(1.7s) (3.1s)
(4.1s) (1.8s)
100 (3.5s) (2.8s)
(1.5s)
(2.4s) (3.5s)
0
0 500 1,000 1,500 2,000 2,500 3,000 3,500
Size (단위: KB)

52. 1. 갑, 기획자, 디자이너, 개발자의 의기투합
 Speed = PV = $$$
 “사용자에게 꼭 필요한 것만 넣자”
2. 실사용자 속도 측정
 RUM 또는 calibrated test
 개발자 PC는 일반적으로 실사용자 PC보다 훨씬 빠르므로 *주의*
3. 웹 최적화에 시간 할애하기
 프로젝트, 유지보수 공수에 산입
 기초적인 WPO 적용
4. Goto 1.

53.  Steve Souders “바이블”
 쉽다
 얇다
 한글판도 있다
 자동 진단 도구
 Yslow, Pagespeed
 자동 최적화 도구
 mod_pagespeed

54. 불필요한 정보 제거
btn_moviepage_left_on.gif
미사용 이미지, 중복 이미지 btn_prev2.gif
미사용 css 이미지 중복 이미지
미사용 css, js 코드
웹폰트 – 2MB나 되므로 효율성 제고
주석문, 공백, 너무 긴 변수명
 “Minify” built in build machine
gzip 압축 전송 적용
 압축-해제 비용보다 이득이 훨씬 많음

55. 이미지 용량 낭비 = 네트워크 비용 낭비
크기에 맞게 서버에서 리사이즈한 후 내려주기
 <img width=xxx height=yyy> 태그 리사이즈 금지
이미지 최적화
 불필요한 메타정보 삭제 (Exif, embedded thumbnail)
 적절한 포맷(PNG/GIF/JPG) 및 압축률 선택
 Tools: Image optimizer, Smush.it, Kraken, …

56. CSS Sprite
 여러 이미지를 한 개의 sprite로 병합
 공수가 많이 들지만 매우 효과적
 http://spriteme.org/

57. Expires, Cache-control: max-age 헤더
 생략하면 불필요한 conditional GET(304) 요청 유발
Last-modified 헤더
 생략하면 GET If-Modified-Since 대신 무조건 GET(200) 요청
Etag 헤더
 동일 URL에 대해 서로 다른 Etag가 붙어오지 않는지 확인
권장 사항
 Etag 미사용, Last-Modified + Expires 필수

58. CSS는 위로, JS는 아래로
 CSS는 렌더링에 필수적이므로 html 가장 위에 배치
 JS는 브라우저를 block 시키므로 가급적 아래쪽에 배치
Js 로딩
파싱
blocking으로 인한
이미지 로딩 지연

60. 2층 소회의실18:30-19:30
 Nspeed 데모
 웹 페이지 최적화
 네트워크 성능
 브라우저 성능
 Off-the-record 수다떨기