[C1]웹서비스, 빠를수록 좋다
Transcript of [C1]웹서비스, 빠를수록 좋다
![Page 1: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/1.jpg)
웹서비스, 빠를수록 좋다
![Page 2: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/2.jpg)
성능엔지니어링랩 @NHN
성능에 대한 A-to-Z
Performance-as-a- feature
Thruput, Scalability, Latency,
Availability…
Back-end
서버, 네트워크, noSQL
Front-end
브라우저, 네트워크, UI
김일환
분산처리, OS, TCP/IP
NHN
인프라 아키텍처랩장
IT서비스 기획실장
front-end 성능 아키텍트
웹 / 모바일 서비스 성능
브라우저 / 네트워크 성능
![Page 3: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/3.jpg)
0.66sec
![Page 4: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/4.jpg)
1sec
![Page 5: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/5.jpg)
![Page 6: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/6.jpg)
![Page 7: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/7.jpg)
![Page 9: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/9.jpg)
Steven C. Seow
심리학 박사
Microsoft
![Page 10: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/10.jpg)
순간적 <0.2초 (200ms)
눈 깜짝할 사이
클릭 메뉴 펼쳐지는 시간
액션게임 반응시간: 타겟 인식 발사
![Page 11: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/11.jpg)
즉시 <1초
Flow = 몰입 상태의 지속
책장을 넘기는 시간
PageDn, Wheel Scroll
![Page 12: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/12.jpg)
연속적 <5초
일시적으로 몰입상태를 벗어남
몰입상태로 쉽게 되돌아갈 수 있음
다른 창을 띄우거나 딴 짓은 못하는 시간
![Page 13: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/13.jpg)
참고 기다림 <10초
짜증나지만 참고 기다릴 수 있음
사용자가 다른 작업으로 switching하기 시작
![Page 14: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/14.jpg)
Satisfaction =
Perception - Expectation
http://davidmaister.com/articles/5/52/
![Page 15: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/15.jpg)
웹 서비스에 대한
사용자들의 기대수준과 만족도
![Page 16: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/16.jpg)
2-3초를 넘어가면 만족률 < 50%
목적형 서비스 (검색, 슬라이드쇼, 메일, 사전, 날씨)
85.3
73.8
60.3
44.5 41.7
13.8
89.4 78.9
61.1
45.6
25.0 11.1
0.5 1 2 3 4 5 10
모바일 웹
PC 웹
만족률 = 50%
Source: NHN UX랩
5점 만점 4-5점 응답자 비율
![Page 17: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/17.jpg)
과반수는 4-5초까지 기다릴 수 있음
서핑형 서비스 (뉴스, 카페, 블로그, 웹툰, 영화)
93.6 85.6
68.8
63.2 55.2
20.8
94.3
80.5 79.5
69.0
41.0
17.6
0.5 1 2 3 4 5 10
모바일 웹
PC 웹
만족률 = 50%
Source: NHN UX랩
5점 만점 4-5점 응답자 비율
![Page 18: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/18.jpg)
1. 체감시간은 성능 + 디자인에 좌우
색상, progress bar, progressive rendering, 마우스 버벅임 등
기다리는 동안 즐길거리가 제공되는가?
2. 만족도는 기대수준에 반비례
목적형 서비스: 2-3초 이내
서핑형 서비스: 4-5초 이내
![Page 20: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/20.jpg)
Source: NHN 데이터정보센터
0
50
100
150
200
250
300
1 2 3 4 5 6 7 8 9 10
로딩속도 (초)
1인당 PV vs. 로딩속도 High End
High Mid
Low Mid
Low End
High Mid: Dual core 2.4G 급 Low Mid: Pentium 4 3G 급
![Page 21: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/21.jpg)
Source : Performance Related Changes and their User Impact (Eric Schurman, Principal Development Lead, Bing; Jake Brutlag Decision Support Engineering Analyst, Google)
실험: 고의적인 서버 딜레이 주입
- 1.0%
- 0.8%
- 0.6%
- 0.4%
- 0.2%
0%
0.2%
3주 4주 5주 6주 7주 8주 9주 10주 11주
대조군
대비 1
인당
검색량
저하율
서버 딜레이 주입 딜레이 제거 후에도 회복 안됨
-0.36%
-0.74%
-0.08%
-0.21%
: 0.2s
: 0.4s
![Page 22: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/22.jpg)
Source : Performance Related Changes and their User Impact (Eric Schurman, Principal Development Lead, Bing; Jake Brutlag Decision Support Engineering Analyst, Google)
1인당 QC 1인당 재검색 수
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%
1초 딜레이 = 매출 ⇩ 3%
![Page 23: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/23.jpg)
왜 그럴까?
![Page 24: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/24.jpg)
나쁜 사용자경험
만족도 저하
재방문 기피
PV 하락
매출 저하
![Page 26: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/26.jpg)
로딩 = 수천만 사용자가 멍때리는 낭비하는 시간
로딩 검색결과
열람 검색 로딩
랜딩페이지 열람
![Page 27: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/27.jpg)
로딩 검색결과
열람 검색 로딩
페이지 열람
로딩
검색결과 열람
검색 로딩
페이지 열람
로딩
로딩
![Page 29: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/29.jpg)
1. 로딩시간을 줄이면
전체 사용자의 총 가처분 시간이 늘어난다
2. 가처분 시간이 늘어나면 결국
사용자와 웹 생태계 모두의 이득
∴ 단 0.1초라도 빠를수록 좋다!
0.1초는 체감하기 힘든 짧은 시간, 하지만……
![Page 30: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/30.jpg)
![Page 31: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/31.jpg)
Navigation Timing API
window.performance.timing
지원: IE 9+, FF7+, Chrome 6+
Web Performance WG: http://www.w3.org/2010/webperf/
![Page 32: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/32.jpg)
Web Performance WG: http://www.w3.org/2010/webperf/
로딩시작 onunload() onclick()
로딩끝 onload()
![Page 33: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/33.jpg)
장점
가장 정확한 현실
전체 PV 샘플링
실제 사용자의 매 PV별 속도 집계
단점
출시 사후에만 측정 가능
상세 원인분석 불가
구현체
nav timing API, boomerang.js
$$$: torbit.com, CorrelSense, Google Analytics…
DIY: piwik.org, stathat.com, StatD, Graphite…
![Page 34: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/34.jpg)
IDC 또는 가정집에 설치한 agent에서 측정
변수통제: 네트워크/PC 배경부하, 캐시
상세분석: TTFB, Waterfall, 시각성능(RST, AFT)
모니터링
구현체
$$$: Gomez, Keynote
DIY: WebPageTest
인위적으로 구성된 네트워크 + Agent로 랩 테스트
![Page 35: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/35.jpg)
인위적으로 구성된 네트워크 + Agent로 랩 테스트
과연 내 서비스 사용자 환경과 같을까?
대표성이 있을까?
![Page 36: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/36.jpg)
Synthetic Measurement tool
네이버 사용자 환경 재현 테스트
Calibrated test network & agent
Desktop and mobile support
Waterfall, filmstrip, regression
Track F / 16:30~17:10 http://me2.do/50rkntO
![Page 38: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/38.jpg)
웹 개발자 입장에서 보면…
DataCenter
단순 투자로는 개선 불가
노력하면 효율화 가능 NW, HW, OS, Browser
사용자 콘텐츠 마크업 UI코드
공급자 콘텐츠 디자인
서버 성능
![Page 39: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/39.jpg)
Peak 대비 200% 이상의 headroom 용량 확보
장애에 대응하기 위한 이중화 및 overprovisioning
DataCenter
![Page 40: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/40.jpg)
사용자 환경
NW, HW, OS, Browser
사용자 콘텐츠
![Page 41: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/41.jpg)
가입자당 최대속도: 평균 50Mbps, 그러나…
“The State of the Internet”, 2012Q1, Akamai
![Page 42: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/42.jpg)
“The State of the Internet”, 2012Q1, Akamai
4Mbps 이하 가입자가 14%
53% 33%
14%
한국 가입자 속도분포
>10Mb
4~10Mb
<4Mb
![Page 43: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/43.jpg)
대역폭이 5M 있어도 2.5M 밖에 쓰지 못함
http://www.belshe.com/2010/05/24/more-bandwidth-doesnt-matter-much/
실제로 웹브라우저가 쓰는
유효대역폭은 RTT에 반비례
왜 다 쓰지를 못하니?
TCP handshake
TCP slowstart
Browser blocking
![Page 44: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/44.jpg)
웹/앱 개발자 입장에서 궁금한
모바일 네트워크의 속사정
3G 네트워크의 latency 문제
TCP/HTTP 성능저하의 이유
RRC state transition
Track C / 15:40~16:20
http://me2.do/FzTGenF
![Page 45: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/45.jpg)
28%
43%
21%
8%
CPU 등급 분포
High end
High mid
Low mid
Low end
0.0
1.0
2.0
3.0
4.0
5.0
6.0
High
End
High
Mid
Low
Mid
Low
End
네이버 전체 평균 (초)
저사양 사용자 30%, 2.5배까지 느려짐
High mid: dualcore 2.4GHz 급 Low mid: P4 3GHz 급
![Page 46: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/46.jpg)
47%
29%
11%
8%
4% 1%
브라우저별 PV 점유율
IE8
IE9
IE7
chrome
IE6
기타
0.0
0.5
1.0
1.5
2.0
2.5
3.0
3.5
4.0
IE 9 IE 8 IE 7 IE 6
네이버 전체 평균(초)
IE6,7 PV 비중은 15%, 1.7배 느려짐
![Page 47: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/47.jpg)
노력하면 효율화 가능
마크업 UI코드
공급자 콘텐츠 디자인
서버 성능
![Page 48: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/48.jpg)
0.73
0.65 0.63 0.59
0.42
0
0.1
0.2
0.3
0.4
0.5
0.6
0.7
0.8
총용량 이미지용량 총 건수 이미지 건수 js 용량
로딩시간과의 상관관계 (Correlation)
2012/9, http://httparchive.org
![Page 49: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/49.jpg)
※ 사용자 환경과 콘텐츠가 크게 다르기 때문에 로딩속도 상대비교는 배제
2012/9 랭키닷컴 상위 100 사이트
http://httparchive.org
3.2
1.1 1
0.6
0
0.5
1
1.5
2
2.5
3
3.5
웹페이지 총 용량 (MB)
국내T100
국내포털
해외전체
해외T100
![Page 50: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/50.jpg)
0
100
200
300
400
0 500 1,000 1,500 2,000 2,500 3,000 3,500
총 1.5MB 이하, 리소스 200개 이하, 웹 폰트 사용배제
Request (단위: 개)
Size (단위: KB)
(4.9s)
(2.8s)
(5.1s)
(1.8s)
(3.5s)
(3.3s)
(1.7s)
(3.0s)
(3.1s) (3.8s)
(4.1s)
(1.5s)
(1.7s)
(2.4s) (3.5s)
3s~
2~3s
~2s
네이버 서비스별 리소스 현황
![Page 51: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/51.jpg)
![Page 52: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/52.jpg)
1. 갑, 기획자, 디자이너, 개발자의 의기투합
Speed = PV = $$$
“사용자에게 꼭 필요한 것만 넣자”
2. 실사용자 속도 측정
RUM 또는 calibrated test
개발자 PC는 일반적으로 실사용자 PC보다 훨씬 빠르므로 *주의*
3. 웹 최적화에 시간 할애하기
프로젝트, 유지보수 공수에 산입
기초적인 WPO 적용
4. Goto 1.
![Page 53: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/53.jpg)
Steve Souders “바이블”
쉽다
얇다
한글판도 있다
자동 진단 도구
Yslow, Pagespeed
자동 최적화 도구
mod_pagespeed
![Page 54: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/54.jpg)
미사용 이미지, 중복 이미지
미사용 css, js 코드
웹폰트 – 2MB나 되므로 효율성 제고
주석문, 공백, 너무 긴 변수명
“Minify” built in build machine
gzip 압축 전송 적용
압축-해제 비용보다 이득이 훨씬 많음
불필요한 정보 제거
btn_moviepage_left_on.gif btn_prev2.gif
미사용 css 이미지 중복 이미지
![Page 55: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/55.jpg)
크기에 맞게 서버에서 리사이즈한 후 내려주기
<img width=xxx height=yyy> 태그 리사이즈 금지
이미지 최적화
불필요한 메타정보 삭제 (Exif, embedded thumbnail)
적절한 포맷(PNG/GIF/JPG) 및 압축률 선택
Tools: Image optimizer, Smush.it, Kraken, …
이미지 용량 낭비 = 네트워크 비용 낭비
![Page 57: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/57.jpg)
Expires, Cache-control: max-age 헤더
생략하면 불필요한 conditional GET(304) 요청 유발
Last-modified 헤더
생략하면 GET If-Modified-Since 대신 무조건 GET(200) 요청
Etag 헤더
동일 URL에 대해 서로 다른 Etag가 붙어오지 않는지 확인
권장 사항
Etag 미사용, Last-Modified + Expires 필수
![Page 58: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/58.jpg)
CSS는 렌더링에 필수적이므로 html 가장 위에 배치
JS는 브라우저를 block 시키므로 가급적 아래쪽에 배치
CSS는 위로, JS는 아래로
Js 로딩 파싱
blocking으로 인한 이미지 로딩 지연
![Page 60: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/60.jpg)
Nspeed 데모
웹 페이지 최적화
네트워크 성능
브라우저 성능
Off-the-record 수다떨기
2층 소회의실18:30-19:30
![Page 61: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/61.jpg)
![Page 62: [C1]웹서비스, 빠를수록 좋다](https://reader034.fdocuments.net/reader034/viewer/2022042700/557d3329d8b42a585f8b478b/html5/thumbnails/62.jpg)