성능 병목 판단

증상, 지표, 수정안을 같은 조건에서 연결해 봅니다

Performance 탭은 원인을 좁히고 Lighthouse는 사용자 체감 지표를 확인합니다. 한 번에 하나의 원인만 줄여야 전후 비교가 명확합니다.

느린 첫 화면

Network와 LCP를 함께 확인

큰 이미지, 렌더링 차단 리소스, 초기 번들 크기를 먼저 봅니다.

이미지 압축 코드 분할
버벅이는 조작

Main 스레드의 Long Task 확인

50ms 이상 작업, 무거운 반복문, 잦은 DOM 갱신을 분리합니다.

작업 쪼개기 렌더링 배치
화면 흔들림

CLS와 Layout 이벤트 확인

이미지 크기 예약, 폰트 로딩, 늦게 삽입되는 배너를 점검합니다.

크기 예약 삽입 위치 고정
수정 검증

같은 시나리오로 다시 측정

전후 수치, 체감, 부작용을 기록하고 성능 예산으로 남깁니다.

전후 비교 회귀 방지