walkerholic(Springboot + React) 프로젝트 ② 서버 진단(+부하테스트)하고 목표정하기

 

 

 

이제 배포된 서버를 진단하고 목표를 정하도록 하자. 

 

 

서버 진단하기

서버진단은 다음의 사이트에서 진행할 수 있다. 

https://www.webpagetest.org/

WebPageTest

https://pagespeed.web.dev/?utm_source=psi&utm_medium=redirect

PageSpeed Insights

 

 

WebPageTest의 요약 결과는 다음과 같았다. 

 

두 사이트에서 진행한 나의 배포 사이트와 경쟁 사이트의 테스트 결과는 다음과 같았다. 

	walkerholic(내 프로젝트)	네이버 블로그	네이버 쇼핑	티스토리
성능	76	67	82	88
First Byte	1.239S	0.888S	1.997S	1.037S
First View	19.320	10	17	13
First Contentful Paint	3.557S	2.270S	3.443S	3.324S
Speed Index	7.766S	3.3S	4.467S	4.999S
Largest Contentful Paint	9.887S	3.9S	4.520S	5.930S
Cumulative Layout Shift	.186	.031	.093	.001
Total Blocking Time	0.00S	.086S	.522S	.031S
Total Byte	9,153KB	4770KB	6830KB	8974KB
Time To Interactive	1.2S	1.9S	1.9S	2.2S

 

해당 테스트 결과로 다음과 같이 목표치를 정하도록 하였다. 여기서 목표치는 경쟁 사이트와의 결과값에서 차이값이 20% 내로 이루어지도록 설정하였다. 

 

📌 성능 점수 (67+82+88)/3 = 79

📌 FCP = (2.270 + 3.443 + 3.324) /3 = 3.012 ->3.615 

📌 SI = (3.3 + 4.467 + 4.999) /3 = 4.255 -> 5.106

📌 LCP = (3.9 + 4.520 + 5.930 ) /3 = 4.783 -> 5.74

📌 CLS = (0.31 + 093 + 0.001) /3 = 0.414 ->0.496

📌 TBT = (0.86 + 0.522 + 0.31 ) /3 = 0.564 ->0.677

 

 

부하테스트 값은 다음과 같이 설정하였다. 사용자 수는 다음을 참고하여 쿠팡 DAU값인 3500000을 참고하여 설정하도록 하였다. 

https://hd.mobileindex.com/report/?s=72&p=2

[앱 사용자 동향] 대한민국 TOP5 쇼핑앱 사용자 분석

📌 DAU (사용자 수) = 3,500,000

📌 R (1일 요청수) = 아침 저녁 2회 

📌 1일 총 접속수 = DAU * R = 7,000,000

📌 1일 평균 rps = 1일 총 접속수 / 86400 = 81.019

📌 1일 최대 rps = 1일 평균 rps * (최대 트래픽 /최소 트래픽). = 10배로가정 

📌 Latency = 여기서 100ms으로 가정 

📌 T = R* (http_req_duration) = R * ((Latency/1000) * 2) = 2 * 0.2 = 0.4

📌 평균 VUser = (1일 평균 rps * T) /R = (81.019 * 0.4) / 2= 16.2037

📌 최대 VUser = (1일 최대 rps * T)/R = (810.19* 0.4)/2 = 162.037

📌 테스트 대상= 접속수가 가장 많은 main 페이지 

 

 

테스트 스크립트는 다음과 같다. 

// smoke.js
import http from 'k6/http';
import { check, group, sleep, fail } from 'k6';

export let options = {
  vus: 1, // 1 user looping for 1 minute
  duration: '10s',

  thresholds: {
    http_req_duration: ['p(99)<200'], // 99% of requests must complete below 0.1s
  },
};

const BASE_URL = 'https://walkerholic.n-e.kr'

export default function ()  {

  http.get(`${BASE_URL}`);

  sleep(1);
}

// load.js
import http from 'k6/http';
import { check, group, sleep, fail } from 'k6';

export let options = {
  stages: [
    { duration: '1m', target: 162 }, // simulate ramp-up of traffic from 1 to 15-16 users over 5 minutes.
    { duration: '2m', target: 162 }, // stay at 15-16 users for 10 minutes
    { duration: '10s', target: 0 }, // ramp-down to 0 users
  ],
  thresholds: {
    http_req_duration: ['p(99)<200'], // 99% of requests must complete below 0.1s
  },
};

const BASE_URL = 'https://walkerholic.n-e.kr'

export default function ()  {
  http.get(`${BASE_URL}`);

  sleep(1);
}

// stress.js
import http from 'k6/http';
import { check, group, sleep, fail } from 'k6';

export let options = {
  stages: [
    { duration: '30s', target: 100 }, // below normal load
    { duration: '1m', target: 100 },
    { duration: '30s', target: 200 }, // normal load
    { duration: '1m', target: 200 },
    { duration: '30s', target: 300 }, // around the breaking point
    { duration: '1m', target: 300 },
    { duration: '30s', target: 400 }, // beyond the breaking point
    { duration: '1m', target: 400 },
    { duration: '2m', target: 0 }, // scale down. Recovery stage.
  ],
  thresholds: {
    http_req_duration: ['p(99)<200'], // 99% of requests must complete below 0.1s
  },
};

const BASE_URL = 'https://walkerholic.n-e.kr'

export default function ()  {

  http.get(`${BASE_URL}`);

  sleep(1);
}

 

 

 

 

성능개선 ① progressive image 적용

가장먼저 프론트엔드 부분에서 이미지를 가져올 때 progressive image를 적용하도록 하였다. 일반적으로 사용자는 사진의 품질보다 기다리는 시간에 더 예민하게 반응 하므로 처음에는 흐린 이미지의 저품질 이미지를 보여주다가 점점 또렷한 이미지를 보여주는 progressive 이미지 방식을 사용하여 FirstView 시간을 개선하고자 하였다. 이 부분은 메인페이지에서 react-progressive-graceful-image를 이용하여 이미지를 나타내도록 하였다. 

↓

https://www.npmjs.com/package/react-progressive-graceful-image

react-progressive-graceful-image

 

메인페이지에서 이미지를 보여주는 부분에 다음과 같이 사용해주었다. 

import ProgressiveImage from 'react-progressive-graceful-image';

    <ProgressiveImage src={Main} >
        {(src) => <img src={src} alt="" />}
    </ProgressiveImage>

 

 

개선 결과 다음과 같이 Total Byte를 3,669KB, FirstView를 (9.421s)초로 줄일 수 있었다. 

↓

https://www.webpagetest.org/result/220601_AiDc61_CGH/

WebPageTest Performance Test Results

 

 

 

부하테스트 툴인 k6, influxdb, grafana는 이전의 블로그 글에서 설치방법과 사용방법을 알 수 있다. 

↓

https://dodop-blog.tistory.com/322?category=1047304

부하 테스트 ( + k6, grafana + influxdb, ngrinder)

 

 

progressive 이미지를 적용한 후 부하테스트 결과는 다음과 같았다. 

 

1) smoke 테스트 적용 

 

 

1) load 테스트 적용 

 

 

3) stress 테스트 적용