웹 성능 최적화의 우선순위

지표 선택

첫 로드 문제인지 입력 반응 문제인지 먼저 나눈다.

Lighthouse와 실제 브라우저 trace로 병목을 확인한다.

이미지 전송량, 초기 번들, TTFB처럼 체감 지표를 흔드는 큰 항목부터 줄인다.

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

Network

전송량과 왕복 시간 압축, CDN, cache-control, preload로 개선

불필요한 요청 제거가 우선

JavaScript

파싱·실행 비용 코드 분할, tree shaking, hydration 지연 검토

작은 번들도 실행 비용 존재

Rendering

레이아웃과 페인트 DOM 크기, layout thrashing, 큰 그림자 효과 확인

transform/opacity 활용

Image

가장 흔한 LCP 원인 크기 지정, 포맷 변환, lazy loading 전략

첫 화면 이미지는 lazy 제외

기준선 변경 전 지표와 trace가 저장돼 있다.

첫 화면 critical CSS와 주요 이미지가 늦게 오지 않는다.

상호작용 클릭 뒤 긴 task가 입력 반응을 막지 않는다.

예산 번들 크기와 핵심 지표 기준을 넘으면 알림이 뜬다.