walkerholic(Springboot + React) 프로젝트 ④ 성능 개선 결과 확인

 

 

이제 단계별 성능개선을 통해나온 값을 가지고 어느정도 성능이 개선되었는지 비교해보자. 

 

 

 

 

성능개선 단계별 변화

성능 개선	개선 전	Progressive Images	Redis Cache	gzip, cache, http2	DB replication 및 부하분산
First Byte	1.239S	1.060S	1.239S	1.124S	1.062S
First View	19.320S	9.421S	8.898S	5.514S	5.492S
First Contentful Paint	3.557S	3.366S	3.557S	2.713S	2.555S
Speed Index	7.766S	7.542S	7.666S	5.130S	5.009S
Largest Contentful Paint	9.887S	9.578S	9.867S	5.722S	5.595S
Cumulative Layout Shift	.186	.186	.186	.186	.186
Total Blocking Time	0.00S	0.00S	.001S	.006S	.000
Total Byte	9,153KB	3,669KB	3,669KB	1,824KB	1,824KB
HTTP_REQ_DURATION (smoke)		10.79ms	13.65ms	10.18ms	7.26ms
HTTP_REQ_DURATION (load)		1.03s	1.04s	1.12s	903.35ms
HTTP_REQ_DURATION (stress)		2.13s	2.11s	2.33s	1.38s

 

 

 

 

개선 전 개선 후 변화

최종적으로 성능 개선 전과 후의 결과비교는 다음과 같다. 

성능 개선	개선 전	성능 개선 후
성능 점수	76	89
First Byte	1.239S	1.062S
First View	19.320S	5.492S
First Contentful Paint	3.557S	2.555S
Speed Index	7.766S	5.009S
Largest Contentful Paint	9.887S	5.595S
Cumulative Layout Shift	.186	.186
Total Blocking Time	0.00S	.000
Total Byte	9,153KB	1,824KB
HTTP_REQ_DURATION (smoke)	10.79ms	7.26ms
HTTP_REQ_DURATION (load)	1.03s	903.35ms
HTTP_REQ_DURATION (stress)	2.13s	1.38s
Time To Interactive	1.12S	0.9S

 

 

 

목표치 달성 검토

성능개선 전 설정했던 목표치에 어느정도 달성해보자. 

 

✔️ 성능 점수 (67+82+88)/3 = 79    89

✔️ FCP = (2.270 + 3.443 + 3.324) /3 = 3.012 ->3.615    2.555S

✔️ SI = (3.3 + 4.467 + 4.999) /3 = 4.255 -> 5.106   5.009S 

✔️ LCP = (3.9 + 4.520 + 5.930 ) /3 = 4.783 -> 5.74    5.595S

✔️ CLS = (0.31 + 093 + 0.001) /3 = 0.414 ->0.496    0.186

✔️ TBT = (0.86 + 0.522 + 0.31 ) /3 = 0.564 ->0.677    .000

 

 

모든 목표치에 달성한 결과를 확인할 수 있었다! 또한 부하분산을 통해 부하가 가해지는 load 및 stress 테스트에서 http_req_duration부분이 개선된 것을 확인할 수 있었다.