웹 성능 예산

현재 병목 측정

Lighthouse 점수보다 실제 사용자 환경에서 어떤 단계가 늦는지 먼저 확인합니다.

measure

이미지 포맷, CSS/JS 분할, 압축, 캐시 헤더로 네트워크 바이트와 요청 수를 관리합니다.

network

critical CSS, defer, preload, font-display로 첫 화면을 막는 자원을 줄입니다.

render

긴 JavaScript 작업을 쪼개고 불필요한 렌더링을 줄여 입력 지연을 막습니다.

interaction

이미지

크기, 포맷, lazy loading, responsive source 화면보다 큰 원본을 그대로 보내면 LCP와 데이터 비용이 함께 나빠집니다.

media

JavaScript

필요한 시점에 필요한 코드만 실행 초기 번들과 hydration 비용은 첫 입력 지연에도 영향을 줍니다.

runtime

CSS/Font

렌더 차단과 레이아웃 이동을 관리 폰트 크기 예약과 font-display 설정은 CLS를 줄입니다.

visual

성능 예산 초기 JS, 이미지, LCP 목표를 숫자로 정해야 회귀를 막을 수 있습니다.

캐시 정책 hash가 붙은 정적 파일과 자주 바뀌는 HTML의 캐시 전략을 분리합니다.

측정 반복 개선 전후 같은 조건으로 비교하지 않으면 효과를 판단할 수 없습니다.

측정 -> 병목 하나 선택 -> 변경 -> 같은 조건 재측정 -> 예산에 반영