TBT는 FCP부터 상호작용 가능 시점까지 메인 스레드를 막는 긴 작업의 초과 시간을 합산한 실험실 지표입니다. 작업 전체 길이가 아니라 각 작업의 50ms 초과분만 계산합니다.
데모에서 막대의 흐린 부분은 처음 50ms이고 진한 부분만 합계에 더해집니다. 큰 작업을 나누면 브라우저가 입력을 처리할 기회를 얻습니다.
언제 쓰나
Lighthouse에서 메인 스레드 차단 원인을 찾을 때 활용합니다. 실사용 반응성은 INP로 확인합니다.
총 차단 시간
Total Blocking Time
긴 메인 스레드 작업에서 50ms를 넘는 부분을 합산합니다.
···
<div class="atlas"><div class="head"><b>TBT · time beyond 50 ms</b><span class="pulse"></span></div><div class="stage"><div class="tbt-row"><span>task A</span><div class="tbt-track"><i></i><b id="tbt-a"></b></div><em id="tbt-a-label">120ms</em></div><div class="tbt-row"><span>task B</span><div class="tbt-track"><i></i><b id="tbt-b"></b></div><em id="tbt-b-label">80ms</em></div><div class="tbt-row"><span>task C</span><div class="tbt-track"><i></i><b id="tbt-c"></b></div><em>35ms</em></div><div class="tbt-total mono">blocked beyond 50ms <strong id="tbt-total">100ms</strong></div></div></div>.atlas{width:min(94vw,720px);height:min(88vh,320px);border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:clamp(10px,2.5vmin,18px);display:flex;flex-direction:column;gap:clamp(7px,2vmin,12px);font:500 clamp(12px,3.2vmin,16px)/1.25 var(--font-sans),sans-serif;color:var(--fg);box-shadow:0 8px 28px rgba(0,0,0,.06)}.head{display:flex;align-items:center;justify-content:space-between;color:var(--accent);letter-spacing:.03em}.pulse{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:blink 1.3s infinite}@keyframes blink{50%{opacity:.2}}.stage{flex:1;min-height:0;position:relative;overflow:hidden}.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.muted{color:var(--muted)}.accent{color:var(--accent)}.box{border:1px solid var(--line);border-radius:8px;background:var(--bg)}.tbt-row{display:flex;align-items:center;gap:6px;height:24%;font-size:12px}.tbt-row span{width:44px}.tbt-row em{width:44px;font-style:normal;text-align:right}.tbt-track{flex:1;height:18px;display:flex;background:var(--line);border-radius:4px;overflow:hidden}.tbt-track i{width:28%;background:color-mix(in srgb,var(--accent) 25%,var(--bg))}.tbt-track b{background:var(--accent);transition:width .45s}.tbt-total{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:6px}.tbt-total strong{color:var(--accent)}let split=false;function tick(){split=!split;document.getElementById('tbt-a').style.width=split?'15%':'42%';document.getElementById('tbt-b').style.width=split?'0%':'18%';document.getElementById('tbt-c').style.width='0%';document.getElementById('tbt-a-label').textContent=split?'75ms':'120ms';document.getElementById('tbt-b-label').textContent=split?'45ms':'80ms';document.getElementById('tbt-total').textContent=split?'25ms':'100ms'}tick();setInterval(tick,2200)