퍼포먼스탭에서 api 요청~ 콜백 까지의 시간 병목 판단 기준 질문드립니다
안녕하세요. 강의잘 보고있습니다.
해당 편에서 1300ms~2400ms 까지 콜백 시간이 길게 늘어져서 병목이 일어난다고 판단된다고(비슷하게) 말씀해주셨는데요.
혹시 실무 라이브 서비스를 기준으로 봤을때 몇ms 정도를 기준으로 병목인지 아닌지를 판단할수 있을까요?
답변 2
1
안녕하세요, 불멸의너구리좌님.
실무에서 어느 정도의 delay를 병목으로 판단하는지 질문해주셨는데요,
결론적으로는, 너무나 당연하게, 회사에 따라 또는 팀에 따라 그 기준이 다르며, 대부분은 그 기준이 명확하지 않습니다.
먼저, delay 라고 하면, 화면에 노출되는 시간을 의미하는데요,
이 시간은 절대적일 수 없고 페이지를 로드하는 환경에 따라 달라지기 때문에 명확하게 정할 수가 없습니다.
Lighthouse의 기준을 보면, FCP(First Contentful Paint) 의 경우, 다음과 같은 기준으로 점수를 측정합니다.
| FCP time (in seconds) |
Color-coding | FCP score (HTTP Archive percentile) |
|---|---|---|
| 0–2 | Green (fast) | 75–100 |
| 2–4 | Orange (moderate) | 50–74 |
| Over 4 | Red (slow) | 0–49 |
*출처: https://web.dev/first-contentful-paint/
그 외의 항목들에 대한 성능 기준은 아래 링크에서 확인하실 수 있습니다.
(https://web.dev/lighthouse-performance/#metrics)
위와 같은 기준으로 봤을 때, 구글에서는
1. 3G 환경에서,
2. 화면이 뜨는데 2초,
3. 사용자가 상호작용 하기까지 5초,
를 권장하고 있습니다.
추가로 강의의 콜백시간은 순전히 자바스크립트의 실행시간이지만,
위에서 권장하는 시간은 자바스크립트 실행시간 뿐만 아니라 네트워크 및 화면 렌더링 시간도 포함한 시간입니다.
강의에 관심을 가져주셔서 감사합니다. :)
bundle analyzer 에 대한 질문이 있습니다.
0
108
2
Cannot find module serve 에러
1
104
1
성능 탭에서 소요시간이 안보입니다
0
205
2
이미지 CDN 만드는 방법
0
459
1
Performance FPS 탭이 안보여요.
1
797
1
CPU throttling이 뭔가요?
0
1119
1
default export가 아닌 named export일 때 lazy사용법
1
1070
1
lazy적용하였는데 네트워크탭에 분리하여 보이지 않습니다
1
583
1
network 캐싱에 대해서 질문 있습니다!
1
427
1
vue project에서 chrome performance tab 확인하기
1
458
1
node version으로 인한 오류
4
1231
1
강의 자막
1
956
2
번들파일과 병목현상 질문
2
396
1
webpack-bundle-analyzer 질문
1
786
1
이미지 프리로딩 질문
1
385
1
이미지 최적화 활용
1
581
1
강력 새로고침
1
323
1
Suspense 관련해서 질문드립니다
2
360
1
config-overrides cant resolve path
1
362
1
이미지 preload 컴포넌트 preload 차이 질문드립니다.
1
611
1
custom react 환경에서 node_modules chunk 분리
1
380
1
removeSpeical 함수를 줄여야겠다고 하는 이유!
1
282
1
Factory pattern에 대해서 궁금한 점이 있습니다
2
366
2
텍스트 압축 방식에 대해 질문이 있습니다
2
951
1