성능 병목 구분 맵

느리다는 느낌을 바로 최적화하지 말고 측정된 대기 구간을 기준으로 원인과 도구를 선택합니다.

어디에서 시간이 소비되는가?사용자 행동을 재현해 기준선을 남기고 가장 긴 구간부터 분리합니다.
load

초기 로드

Network와 Coverage로 bundle, 이미지, 캐시, code splitting을 확인합니다.

render

화면 반응

React Profiler와 Performance로 긴 작업과 반복 렌더를 찾습니다.

network

요청 대기

waterfall, 중복 요청, payload 크기, retry와 연결 시간을 나눠 봅니다.

backend

서버 처리

Node profiler, DB query, 외부 API, 큐 처리 시간을 각각 계측합니다.

핵심수정 뒤에는 같은 입력과 같은 장비에서 다시 측정해 병목 이동과 회귀 여부를 확인합니다.