2026-07-13 · 웹 성능
TBT(Total Blocking Time)는 페이지가 로드되는 동안 메인 스레드가 사용자 입력에 반응하지 못하고 막혀 있던 시간의 총합입니다. 자바스크립트가 무거울수록 커지며, 반응성과 밀접한 지표입니다.
첫 화면에 필요 없는 코드까지 하나의 큰 번들로 묶으면 브라우저가 이를 모두 파싱·실행하느라 스레드가 오래 막힙니다. 동적 import(import())로 라우트나 컴포넌트 단위로 코드를 분할하면, 당장 필요한 것만 먼저 실행되어 TBT가 줄어듭니다.
모달, 차트, 에디터처럼 상호작용 후에야 쓰이는 무거운 컴포넌트는 지연 로딩 대상입니다. React라면 React.lazy와 Suspense, Next.js라면 next/dynamic으로 상호작용 시점에 불러오세요. 초기 스크립트 양이 줄어드는 만큼 메인 스레드가 빨리 자유로워집니다.
분석·광고·채팅 위젯 같은 외부 스크립트는 TBT의 큰 원인입니다. 꼭 필요한 것만 남기고, async·defer로 로드하거나 상호작용 이후로 미룹니다. 긴 작업은 requestIdleCallback이나 작은 단위로 쪼개 스레드를 양보(yield)하게 만드는 것도 효과적입니다.
코드 분할, 지연 로딩, 서드파티 관리 — 결국 핵심은 초기에 실행되는 자바스크립트 양을 줄이는 것입니다. 메인 스레드에 여유를 주면 TBT가 낮아지고 페이지가 즉각 반응하게 됩니다.