웹 성능 병목 해석표

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

1

메인 스레드가 오래 막힘

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

2

레이아웃 계산이 반복됨

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

3

초기 로딩이 늦음

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

4

프레임이 떨어짐

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

핵심웹 성능 병목 해석표은 각 요소의 관계와 선택 조건을 함께 읽어야 한다.