프론트엔드 성능 예산, 왜 미리 정해야 할까?
웹 페이지의 첫 콘텐츠가 화면에 그려지는 시점인 FCP(First Contentful Paint)는 사용자가 느끼는 체감 속도를 결정하는 핵심 지표입니다. JS·CSS 번들이 클수록 다운로드와 파싱·실행에 걸리는 시간이 늘어나 FCP가 늦어지고, 결국 이탈률 상승으로 이어집니다. 성능 예산(Performance Budget)은 목표 FCP를 먼저 정하고, 그 시간 안에 도달하기 위해 허용할 수 있는 리소스 크기를 역산하는 방식입니다.
이 계산기는 목표 FCP, 네트워크 속도, 기기 성능(저사양/중간/고사양)을 입력받아 다운로드 시간과 파싱·실행 시간을 함께 고려한 총 번들 예산을 산출합니다. 일반적으로 JS는 파싱·실행 비용이 CSS보다 훨씬 크기 때문에 예산의 70%를 JS에, 30%를 CSS에 배분하는 방식을 기본값으로 사용합니다. 신규 라이브러리를 도입하거나 코드 스플리팅 전략을 세울 때, 실제 목표 대비 얼마나 여유가 있는지 확인하는 참고 지표로 활용해보세요.
자주 묻는 질문
퍼포먼스 버짓(Performance Budget)이 왜 중요한가요?
번들 크기가 커질수록 다운로드·파싱 시간이 늘어나 FCP가 느려지므로, 목표 시간에 맞춰 예산을 미리 정해두면 성능 저하를 예방할 수 있습니다.
JS와 CSS 비율은 왜 70대 30인가요?
JS는 다운로드 후 파싱·실행 비용이 CSS보다 훨씬 크기 때문에 예산 대부분을 JS에 배분하고 CSS는 적은 비율로 관리하는 것이 실무 기준입니다.