이 게시물은 웹 성능 부채가 쌓일 때 문제를 드러난 순간에 집중해 해결하며, React Profiler보다 Chrome DevTools Performance의 flame chart로 병목을 더 정확히 찾는 워크플로우를 제시합니다. AI 도구(Claude Code/Codex)가 flame chart의 핫패스를 바탕으로 호출 경로와 원인 분석을 줄여 디깅 시간을 단축하고, HAR/소켓 패턴도 정리해 추적 부담을 낮춥니다. 크리티컬 패스 우선순위 정의는 사람이 UX 관점에서 담당하고, AI는 코드/정량 지표 기반으로 깊이 파고드는 역할로 분리합니다. 제시된 사례는 (1) 배열 순회 O(n²) 패턴을 Map/Set/Push 등으로 바꿔 399ms→72ms 82% 개선, (2) Worker postMessage 왕복을 657회에서 배치 1회로 줄여 블로킹 5608ms→4144ms 26% 및 GC 390ms→152ms 61% 감소, (3) 소켓 이벤트를 dedup/filter/batch로 최적화해 typing stop, 비가시 typing 업데이트, updatedAt-only group 업데이트를 크게 줄이는 방식입니다. 결과적으로 숙련된 엔지니어가 수주 걸릴 발굴 작업을 하루 만에 잡아낸 점을 성과로 언급합니다.