PERFORMANCE TRIAGE

성능 문제는 지표를 증상별로 나눠야 고칠 위치가 보입니다.

Performance 탭은 실행 중 병목을 보여주고, Lighthouse는 로딩 품질과 Core Web Vitals를 점수로 묶어 개선 순서를 잡아줍니다.

50ms+Long Task는 입력 지연과 스크롤 끊김 후보

LayoutDOM 변경과 CSS 계산이 반복되는지 확인

LCP/CLS주요 콘텐츠 렌더링과 시각 안정성 점검

Scripting메인 스레드가 오래 막힘

불필요한 JavaScript, 큰 루프, 무거운 이벤트 핸들러를 줄입니다.

Rendering레이아웃 계산이 반복됨

DOM 조작을 묶고 크기 측정과 스타일 변경을 섞지 않습니다.

Network초기 로딩이 늦음

번들 분리, 캐싱, 이미지 크기 조정으로 요청 비용을 낮춥니다.

Animation프레임이 떨어짐

`transform`, `opacity`, `requestAnimationFrame`으로 렌더링 부담을 줄입니다.

기록 전 시나리오 고정

로딩, 스크롤, 클릭처럼 재현 가능한 동작으로 측정합니다.

가장 큰 막대부터 수정

Summary에서 시간이 큰 범주를 먼저 고치는 편이 효과적입니다.

수정 후 다시 측정

체감이 아니라 전후 지표로 개선 여부를 확정합니다.