[#2 Http1.1 vs Http2.0] Chrome + Img 10, 50, 100/ TTFB(firtst&last)

러닝 http2 서적 성능 평가 부분

1. 시각적 표시 완료(Visually Complete) : 마지막 사진 기준

2. 마지막 시각적변경(Last Visual Change) : 마지막 사진 기준

3. 로딩시간(onLoad) : 로딩 시작 부터 끝까지 차이 시간

4. 로딩시간(전체 로딩 완료): 로딩이 완료 된 시간

5. DOM 콘텐츠 로딩 완료(Dom Content Loaded) 

6. 속도 지수(Speed index)  

7. 첫번째 바이트 수신기간 TTFB(Time to first Byte) : 첫번째 이미지 TTFB 기준

8. 타이틀 수신시간(Time to Title) 

9. 렌더링 시작 시간(Time to start Render) 

10. CPU 사용시간(Cpu busy Time) - performance에서

1

 

 

2

3

 

 

4

 

5

 

7

 

9

---

Http 1.1 이미지 10개 (5번 시행)

1	2	3	4	5	6	7	8	9	10
21.29ms	21.21ms	2ms	339 ~334.0ms	1745.9ms		5.21ms		308.9 ~309.1 ms
25.17 ms	23.42 ms	3ms	475.59 ~475.64	2119.6 ms		3.50ms		334.34 ~334.39
29.67ms	28.50ms	2ms	373.92 ~373.97	2792.5 ms		3.33ms		319.87 ~319.92
30.92ms	30.83ms	3ms	128.72 ~128.77	1814.1 ms		4.75 ms		89.57 ~89.62
30.92ms	30.50ms	2ms	228.8 ~228.85	1492.1 ms		5.08ms		77.75 ~77.7

 

Http 1.1 이미지 50개(5번 시행)

1	2	3	4	5	6	7	8	9	10
182.75ms	182.04ms	7ms	502.04ms ~502.09	1479.8 ms		4.13ms		325.54ms ~325.59ms
183.37ms	173.21ms	9ms	1538.12ms ~1538.17	1812.6 ms		3.38ms		353.87~ 353.92
185.13ms	184.00ms	10ms	1426.36~ 1426.41	1236.8 ms		7.00ms		231.21~ 231.26
157.29ms	155.17ms	10ms	2512.38~ 2512.43	1777.3 ms		3.58ms		274.32~ 274.38
171.25ms	171.04ms	10ms	1969.76~ 1969.81	1504.3 ms		4.25ms		366.16~ 366.21

 

Http 1.1 이미지 100개(5번 시행)

1	2	3	4	5	6	7	8	9	10
386.71ms	380.71ms	16ms	1728.82~ 1728.87	1618.3 ms		4.75ms		325.42~ 325.47
346.58ms	346.21ms	21ms	1412.73~ 1412.78	1683.3 ms		3.92ms		179.83~ 179.93
423.75ms	416.38ms	22ms	1603.63~ 1603.68	1911.2 ms		5.79ms		106.88~ 106.93
388.67ms	382.37ms	24ms	1422.33	1428.3 ms		3.71ms		251.13~ 251.18
354.88ms	354.38ms	12ms	1553.70~ 1553.75	1275.5 ms		6.96ms		239.05~ 239.10

 

Http 2.0 이미지 10개 (5번 시행)

1	2	3	4	5	6	7	8	9	10
140.29ms	140.21ms	2ms	152.55~ 152.60	1462.5 ms		97.54ms		150.05ms~ 150.10ms
257.58ms	257.46ms	2ms	269.81~ 269.86	1320.1 ms		7.67ms		267.26~ 267.31
405.17ms	405.08ms	2ms	416.14~ 416.19	1616.1 ms		6.25ms		415.34~ 415.39
165.0ms	164.88ms	3ms	179.08ms	1764.2 ms		6.08ms		175.83~ 175.88
118.58ms	118.46ms	2ms	132.63~ 132.68	1408.3 ms		8.42ms		129.78~ 129.83

Http 2.0 이미지 50개 (5번 시행)

1	2	3	4	5	6	7	8	9	10
419.79ms	419.42ms	13ms	490.46ms	1856.3 ms		8.92ms		418.36~ 418.41
201.42ms	201.33ms	8ms	219.25ms~ 219.30ms	1493.5 ms		10.96ms		216.10~ 216.15
243.36ms	243.38ms	7ms	261.41ms~ 261.46ms	4056.7 ms		195.42 ms		257.01~ 257.06
99.37ms	99.33ms	4ms	108.46ms	2064.0 ms		77.63 ms		106.06~ 106.11
341.71ms	341.63ns	9ms	359.19ms~ 359.24ms	1878.4 ms		286.96 ms		355.94~ 355.99

Http 2.0 이미지 100개 (5번 시행)

1	2	3	4	5	6	7	8	9	10
251.33ms	251.25ms	15ms	272.98~ 273.03	1566.9 ms		196.96ms		268.68~ 268.73
66.71ms	66.62ms	15ms	94.82ms~ 94.87	1087.6 ms		20.75ms		85.67ms
226.13ms	226.04ms	16ms	251.73ms~ 251.78ms	1144.6 ms		171.33ms		245.63ms
70.71ms	70.58ms	14ms	99.52~99.57ms	1112.3 ms		24.46ms		88.67ms
405.29ms	405.21ms	14ms	428.67~ 428.72	2323.1 ms		9.79ms		422.77~ 422.82

---

 

한눈에 비교

이미지 10개 1.1 vs 2

 

이미지 50개 1.1 vs 2

 

이미지 100개 1.1 vs 2

 

참고

junwoo45.github.io/2020-07-28-chrome_devtools/

developer.chrome.com/docs/devtools/evaluate-performance/reference/