2. 성능엔지니어링랩 @NHN
 All about performance, 성능 고도화
 Guide, Methodology, Measuring, Profiling, Tuning..
전반부 : F/E 속도측정 방법론 후반부 : NSPEED 이야기
발표자 : 경규성 대리 발표자 : 강동민 대리
 Naver QA  F/E Performance engineer
 F/E Performance engineer  NSPEED 담당
 NSPEED 담당

4. 측정

5. 결과,

6. 신뢰할

7. 수

8. 있을까요?

11. Performance

12. Test
Back

13. End

14. Front

15. End

16.
How Fast ? Why Slow ?

17. How Fast ?
Real

18. User

20. Synthetic

22.
Monitoring

23. Measurement

27. Real

28. User

29. Monitoring

30.
사용자 접근과 동시에 속도 측정되고, 그 결과는 즉시 수집 서버로 전송됩니다.

31. Example - Google Analytics

32. 와~

33. RUM으로

34. 측정하고

35. 오픈

36. 하면

37. 되겠다~

39. 꼭

40. 그렇지만은

41. 않습니다

42.
Real

43. User

44. Monitoring

45.
•

46. 서비스

47. 페이지에

48. 측정

49. 코드

50. 삽입

51. à

52. 자사/자신의

53. 서비스만

54. 측정

55. 가능

57.
•

58. 측정

59. 가능한

60. 지표가

61. 적다

62. à

63. 속도

64. 측정만

65. 가능,

66. 느린

67. 원인

68. 알

69. 수

70. 없음

71.
•

72. 오픈

73. 후

74. 측정

75. 가능

76. à

77. 오픈

78. 전

79. 성능

80. 측정이

81. 곤란함

83. Synthetic

84. Measurement

85.
수

86. 천만의

87. 사용자

88. 환경을

89. 대표할

90. 몇

91. 개의

92. 단말에서

93. 측정

94.
VS

95.
Real

96. User

97. Agent

99. Synthetic

100. Measurement

101. ­–

102. 간단하지

103. 않아요

105.
Reliability

106. Convenience

107.
Metric

108. Automation

109.
Context

110. Reporting

111.
Correction

112.
Timer

114. Metric

115. ­–

116. 얼마나

117. 빠른지

118. 보는

119. 지표

120.


121. TTFB

122. =

123. Time

124. To

125. First

126. Byte

127.


128. TTFR

129. =

130. Time

131. To

132. First

133. Render

134. (=Render

135. Start)

136.


137. OLT

138. =

139. On

140. Load

141. Time

142.


143. FLT

144. =

145. Fully

146. Loaded

147. Time,

148. Full

149. Load

150. Time

151.


152. AFT

153. =

154. Above

155. the

156. Fold

157. Time

160. Metric

161. ­–

162. 얼마나

163. 빠른지

164. 보는

165. 지표

166.
TTFB

167. OLT

168.
⋮

169.
FLT

170.
TTFR

171. AFT

172.
…⋯

173.
0.5s 0.6s 1.3s 1.4s

174. Context

175. ­–

176. 측정

177. 결과에

178. 영향을

179. 주는

180. 요소

181.


182. Network

185.


186. network

187. shaping

188. (latency,

189. b/w..)

190.


191. Device

192. /

193. OS

194. /

195. Browser

196.


197. 점유율,

198. 공존성

199.


200. Cache

201.


202. file,

203. memory,

204. local

205. storage

206.


207. empty

208. /

209. primed

214. Correction

215. ­–

216. 제어

217. 불가능한

218. 정황은

219. 보정

220.
왜

221. 반복

222. 테스트

223. 하는가,

224. 얼마나

225. 반복해야

226. 하는가,

227. 왜

228. Median인가

229.
OO

230. 서비스

231. 반복

232. 측정

233. 시

234. 체감

235. 속도

236. 변화

237.
msec
측정 회차

238. Timer

239. ­–

240. 어떤

241. 계측

242. 방법이

243. 정확한가

244.
Javascript

245. Browser

246.
sniff

247. sniff

248. Browser

249. Plugin

250.
Navigation

251. Timing

252.
user-space sniff

253. HTTP

254. Proxy

255.
kernel
TCP/UDP

256.
IP

257.
sniff

258. Packet

259. Sniffer

260. (logical)

261.
Interface

262.
Network

263. interface

264. card

265.
network wireless
sniff

266. Tap

267.
Packet

268. Sniffer

269. (physical)

270. AP

271.
wired

272. Automation,

273. Reporting

275.
•

276. 반복/평균,

277. 캐시/쿠키

278. 제어,

279. 로그인,

280. 호스트

281. 설정

282.
•

283. 결과

284. 리포트

285. 작성

287.
à

288. 손으로

289. 하면

290. 2~3일,

291. 자동으로

292. 하면

293. 커피

294. 한잔

296. Example - WebPageTest

297. Synthetic

298. 속도

299. 측정

300. 도구,

301. 쓰려고

302. 보니..

303.
•

304. 유료는

305. 비싸고,

306. 무료는

307. 국내

308. Agent

309. X

310.
•

311. 국내

312. 대표

313. 정황을

314. 반영

315. X

316.
•

317. 오픈

318. 소스/설치,

319. Agent

320. 구매

321. 필요

322.
•

323. Mobile

324. Agent

325. 신뢰도

326. 떨어짐

327.
•

328. URL단위

329. UI로

330. 불편한

331. 입력,

332. 결과

333. 조회

334.
국내에서

335. Synthetic

336. 속도

337. 측정

338. 어렵다

340. 그래서

341. 만들었습니다

343. NSPEED

344.
NHN

345. Front-End

346. 성능

347. 측정

348. 도구

349. 개발

350. 프로젝트

352. 충분한

353. 국내

354. Agent

355. 제공

356.
더

357. 이상

358. 다른

359. 나라에

360. 있는

361. Agent로

362. 측정하지

363. 않아도

364. 됨

365.
국내

366. 사용자

367. 대표

368. 정황

369. 반영

370.
국내

371. 사용자

372. Network

373. 환경,

374. Device사양,

375. Browser

376. 점유율

377. 반영

378.
몇

379. 대의

380. Agent로

381. 한국

382. 사용자

383. 대표

384. 환경

385. 재현

386.
개발자에게

387. 편한

388. UI

389.
프로젝트

390. 단위로

391. 속도

392. 측정

393. 관리

394.
프로필

395. 단위로

396. 여러

397. URL을

398. 측정하고

399. 결과를

400. 열람/공유

402. 본격적인

403. NSPEED

404. 이야기가

405. 이어집니다

408. NSPEED

409. 이야기

411. 그런데…⋯

412.
Nspeed가

413. 뭐지?

420. :

421. RUM으로

422. 얻은

423. OLT

424. 평균값

425.
:

426. 툴에서

427. 측정한

428. OLT

429. 값

430.
네이버

431. 전체

432. 서비스의

433. OLT(2011년

434. 8월)

436. Nspeed

437. 실제

438. 모습은

439. 이렇게

440. 생겼습니다.

442. P4_XP_IE7

443.
P4_XP_IE8

444.
i5_XP_IE8

445.
i5_Win7_IE8

446.
i5_Win7_IE9

447.
Nspeed의

448. PC

449. Agents

451. Nspeed의

452. Mobile

453. Agents

455. Nspeed의

456. Mobile

457. Agents

459. 어떻게

460. 만들어진

461. 것인가?

463. PC용

464. Agents!!!

466. Web

467. Browser

479. 캐시

481. 통

482. 제(Plug-in)

497.
URL

498. Blast

499.
패킷

500. 캡쳐(WinPcap)

501.
네트워크

503. 에

504. 뮬레이터

530.
(dummy

531. net)

532.
NSPEED

533. Server

535. Web

536. Browser

548. 캐시

550. 통

551. 제(Plug-in)

566.
URL

567. Blast

568.
패킷

569. 캡쳐(WinPcap)

570.
네트워크

572. 에

573. 뮬레이터

599.
(dummy

600. net)

601.
NSPEED

602. Server

604. Web

605. Browser

617. 캐시

619. 통

620. 제(Plug-in)

635.
URL

636. Blast

637.
패킷

638. 캡쳐(WinPcap)

639.
네트워크

641. 에

642. 뮬레이터

668.
(dummy

669. net)

670.
NSPEED

671. Server

673. Web

674. Browser

686. 캐시

688. 통

689. 제(Plug-in)

704.
URL

705. Blast

706.
패킷

707. 캡쳐(WinPcap)

708.
네트워크

710. 에

711. 뮬레이터

737.
(dummy

738. net)

739.
NSPEED

740. Server

742. Web

743. Browser

755. 캐시

757. 통

758. 제(Plug-in)

773.
URL

774. Blast

775.
패킷

776. 캡쳐(WinPcap)

777.
네트워크

779. 에

780. 뮬레이터

806.
(dummy

807. net)

808.
NSPEED

809. Server

811. Web

812. Browser

824. 캐시

826. 통

827. 제(Plug-in)

842.
URL

843. Blast

844.
패킷

845. 캡쳐(WinPcap)

846.
네트워크

848. 에

849. 뮬레이터

875.
(dummy

876. net)

877.
NSPEED

878. Server

880. Mobile용

881. Agents!!!

883. 그까이꺼

884. 뭐

885. 대충~

886.
Webview를

887. 사용한

888. 측정용

889. App을

891.
개발해서

892. 측정하면

893. 되는

894. 거

895. 아닌가?

897. Android

898.
(void)clearCache(boolean

899. includeDiskFiles);

900.
(void)loadUrl(String

901. url);

902.
(void)onPageStarted(WebView

903. view,

904. String

905. url,

906. Bitmap

907. favicon);

908.
(void)onPageFinished(WebView

909. view,

910. String

911. url);

912.
iOS

913.
-

914. (void)removeAllCachedResponses;

915.
-

916. (void)loadRequest:(NSURLRequest

917. *)request;

918.
-

919. (void)webViewDidFinishLoad:(UIWebView

920. *)webView;

921.
-

922. (void)webViewDidStartLoad:(UIWebView

923. *)webView;

925. 그러나…⋯

927. WebView

928.
Native

929. Bro
wser

930.
출처

931. :

932. 2011년

933. 4월

934. Nspeed

935. Agent

936. 신뢰성

937. 검증

938. 데이터(Android는

939. Froyo,

940. iOS는

941. 4.2)

943. Galaxy

944. S(Froyo)

945. iPhone4(iOS

946. 4.2)

948. webview

949. 성

950. 능

951. ≠

952. Native

953. Browser

954. 성능

967.
100

968. 180

969. 200

970. 100

971. 95

972. 104

973.
Native

974. Browser

975. OLT

976. WebView

977. OLT

978. WebView

979. API

980.
출처

981. :

982. 2011년

983. 4월

984. Nspeed

985. Agent

986. 신뢰성

987. 검증

988. 데이터

990. Webview

991. 버젼

994. JavaScript와

995. iframe을

996. 사용해서

997.
Native

998. Browser

999. 위에서

1001.
바로

1002. 측정하면

1003. 되지

1004. 않나?

1006. iframe

1007. id=nspeed_web_inner“/

1008.
iframe

1009.
script

1010. type=“text/javascript”

1011.
//onload

1012. 이벤트핸들러에서

1013. 로딩시간을

1014. AJAX로

1015. 전송

1016.
nspeed_web_inner.contentWindow.onload

1017. =

1018. function()

1019. {

1022. var

1023. olt

1024. =

1025. new

1026. Date().getTime()

1027. -

1028. t_start;

1031. //olt값

1032. AJAX로

1033. 수집서버

1034. 전송

1035.
}

1036.
var

1037. t_start

1038. =

1039. new

1040. Date().getTime();

1041.
nspeed_web_inner.location.href

1042. =

1043. url;

1044.
/script

1045.
HTML

1047. iframe

1048. id=nspeed_web_inner“/

1049.
iframe

1050.
script

1051. type=“text/javascript”

1052.
//onload

1053. 이벤트핸들러에서

1054. 로딩시간을

1055. AJAX로

1056. 전송

1057.
nspeed_web_inner.contentWindow.onload

1058. =

1059. function()

1060. {

1063. var

1064. olt

1065. =

1066. new

1067. Date().getTime()

1068. -

1069. t_start;

1072. //olt값

1073. AJAX로

1074. 수집서버

1075. 전송

1076.
}

1077.
var

1078. t_start

1079. =

1080. new

1081. Date().getTime();

1082.
nspeed_web_inner.location.href

1083. =

1084. url;

1085.
/script

1086.
HTML

1088. 그러나…⋯

1090. 원

1091. 본

1092. iframe

1093. 사용시

1095. iframe

1096. 버젼

1099. 안되겠다…⋯

1101.
App에서

1102. 기본

1103. 브라우저를

1104. 띄워서

1105. 측정하자.

1107. Intent

1108. browser

1109. =

1110. new

1111. Intent(Intent.ACTION_VIEW,

1112.
Uri.parse(http://m.naver.com));

1113.
startActivity(browser);

1114.
kill

1115. `pgrep

1116. com.android.browser`

1118. 그러나…⋯

1121. 1년

1122. 반

1123. 사이에…⋯

1124.
출처

1125. :

1126. 2012년

1127. 8월

1128. 모바일

1129. OS별

1130. PV

1131. 점유율(NHN

1132. 사내

1133. 데이터)

1135. 모바일

1136. 환경에서

1138.
Network

1139. Shaping은

1140. 어떻게

1141. 하지?

1142.
HAR

1143. 로깅은

1144. 어떻게…⋯?

1146. • IPTABLES

1147. +

1148. TC

1149. 네트워크

1150. 환경

1151. 통제

1152.
• TCPDUMP

1153. +

1154. PCAP2HAR

1155. HAR

1156. 로깅

1157.
인터넷

1158.
유무선

1160. Gateway

1161.
공유기

1162. (Nspeed

1163. EM)

1164.
Hot

1165. Spot