성능 최적화를 전송·실행·렌더링 비용으로 나누기

지표 선택

첫 표시, 입력 반응, 레이아웃 안정성 중 문제 영역을 정한다.

Lighthouse와 Performance trace로 실제 병목을 확인한다.

이미지, 초기 JS, 서버 응답처럼 큰 비용부터 줄인다.

성능 예산과 핵심 지표 측정을 자동화한다.

Network

전송 지연 CDN, cache-control, compression, preload

불필요 요청 제거

실행 비용 code splitting, tree shaking, hydration 지연

작은 번들도 실행 비용 존재

Layout

렌더 비용 DOM 크기, layout thrashing, 큰 paint 영역

측정 후 수정

Image

LCP 후보 크기 지정, 포맷, lazy 전략

첫 화면 이미지는 lazy 제외

기준선 변경 전 지표가 있다.

우선순위 큰 병목부터 줄인다.

첫 화면 critical resource가 늦게 오지 않는다.

예산 번들 크기와 핵심 지표 기준이 있다.