TBT란? 브라우저가 사용자 입력을 처리하지 못하고 막혀 있는 시간을 쉽게 이해하기
TBT는 메인 스레드가 긴 작업 때문에 입력을 바로 처리하기 어려웠던 시간을 합산한 Lab 지표입니다. Long Task·50ms Blocking·INP·TTI·제3자 JS·개선 순서까지 초보 기준으로 정리합니다.
보이는데 버튼이 안 먹는 시간
제목·이미지는 보이는데 메뉴를 눌러도 잠깐 반응이 없다면, 브라우저 메인 스레드가 긴 JavaScript 등으로 바쁠 수 있습니다. TBT(Total Blocking Time)는 그처럼 메인 스레드가 긴 작업 때문에 입력을 즉시 처리하기 어려웠던 시간을 합산한 Lab 진단 지표입니다. 안내데스크 직원 한 명이 긴 서류 작업 중이면 손님 질문에 바로 답하지 못하는 것과 같습니다.
Long Task · 50ms · 합산
메인 스레드는 HTML·CSS·JS 실행, 레이아웃, 클릭 처리, 그리기 등 핵심을 맡는 「화면과 입력의 작업자」입니다. 웹 성능 분석에서는 보통 50ms를 넘는 메인 스레드 작업을 Long Task로 봅니다. Blocking Time은 작업 전체가 아니라 50ms를 초과한 부분입니다. 120ms → 70ms, 300ms → 250ms. 여러 Long Task면 각 Blocking을 더해 TBT가 됩니다. 40ms 작업 100개는 Long Task가 아니므로 TBT에는 안 잡힐 수 있지만, 작업이 과다하면 다른 문제가 날 수 있습니다.
120ms Long Task → Blocking 70ms 80ms → 30ms · 200ms → 150ms 합산 예: 70+30+150 = TBT 250ms 측정 구간(일반 설명): FCP 이후 ~ TTI
FCP·TTI·INP·다른 지표
TBT는 보통 FCP 이후부터 TTI(상호작용 준비)까지 Blocking을 합산한다고 설명됩니다. 콘텐츠가 보인 뒤 조작할 구간의 차단이 중요하기 때문입니다. TTI = 「언제부터 안정적으로 쓸 수 있나」, TBT = 「그동안 얼마나 막혀 있었나」. Lab의 TBT와 Field의 INP는 밀접할 수 있지만 같지 않습니다 — TBT가 좋아도 실제 기기·행동에선 느린 Interaction이 날 수 있습니다. 긴 JS는 LCP Paint를 늦추거나, 대량 DOM 삽입으로 CLS까지 이어질 수 있습니다. Speed Index는 화면이 채워지는 속도, TBT는 입력이 막힌 시간에 가깝습니다.
원인 · 개선 · 점검
의심 포인트: 큰 번들·초기화 폭주·대량 DOM·복잡한 계산·제3자(광고·채팅·분석)·Unused JS. 다운로드 크기뿐 아니라 Parse·Compile·Execute 비용이 중요합니다. Code Splitting·Lazy 모듈·Tree Shaking(결과는 빌드로 확인)·긴 작업 분할(Yield)·Web Worker(DOM 제한)·Pagination/Virtualization·초기화 우선순위·Intersection Observer로 아래쪽 지연 초기화를 검토합니다. First-Party와 Third-Party를 함께 봅니다. 개선 ≠ JS 전부 삭제 — 필요 기능을 유지하며 불필요·너무 이른·너무 긴 실행을 줄입니다. Lighthouse·Performance·Flame Chart로 Long Task → 파일 → 우리/외부 구분 → 제거·분할 후 같은 조건으로 재측정. 모바일·CPU Throttling을 잊지 말고, RUM·합성·Performance Budget·CI/CD 전후 비교를 활용합니다. SEO 전용 점수가 아니라 메인 스레드 진단 지표입니다.
자주 묻는 질문
TBT란?
Total Blocking Time — 메인 스레드가 긴 작업 때문에 입력을 바로 처리하기 어려웠던 시간을 합산한 Lab 지표입니다.
Blocking Time은?
Long Task(보통 50ms 초과)에서 50ms를 뺀 나머지입니다. 200ms 작업이면 약 150ms.
TBT와 INP는 같은가요?
아닙니다. TBT는 Lab 차단 시간 진단, INP는 실제 사용자 상호작용 반응성(Field)에 가깝습니다.
TBT와 TTI 차이는?
TTI는 안정적으로 쓸 수 있게 된 시점, TBT는 그 과정에서 누적된 Blocking Time입니다.
제3자 스크립트도 영향이 있나요?
네. 광고·채팅·분석 등도 같은 메인 스레드를 쓸 수 있어 TBT를 올릴 수 있습니다.
TBT가 낮으면 INP도 무조건 좋나요?
아닙니다. Lab 조건과 실제 기기·행동이 다르므로 RUM·INP를 함께 봅니다.
정리
TBT는 로딩 과정에서 메인 스레드가 긴 작업 때문에 입력을 바로 처리하지 못할 수 있었던 시간을 합산한 지표입니다. Long Task = 오래 붙잡는 작업, Blocking Time = 50ms 초과분, TBT = 그 합. 무거운 JS·불필요 초기 코드·제3자·대량 DOM·한 번에 실행되는 긴 작업을 점검하세요. 그런데 「왜 50ms를 넘는 한 작업이 그렇게 문제인가?」를 더 깊게 보려면, 메인 스레드를 오래 점유해 다른 일을 늦추는 Long Task(롱 태스크) 개념을 이해하면 TBT와 INP 원인을 찾기 쉽습니다.