게시일: 2019년 11월 7일, 최종 업데이트: 2025년 10월 15일
TBT란 무엇인가요?
총 차단 시간 (TBT) 측정항목은 콘텐츠가 포함된 첫 페인트 (FCP) 이후 입력 응답성을 방지할 만큼 긴 시간 동안 기본 스레드가 차단되었던 총 시간을 측정합니다.
기본적으로 Lighthouse는 상호작용까지의 시간 (TTI) 이후에 TBT 모니터링을 중지합니다. 페이지 로드를 측정하는 다른 일부 실험실 도구도 마찬가지입니다. TBT와 TTI의 관계는 무엇인가요?를 참고하세요.
기본 스레드는 기본 스레드에서 50밀리초 이상 실행되는 작업인 긴 작업이 있을 때마다 '차단'된 것으로 간주됩니다. 브라우저가 진행 중인 작업을 중단할 수 없기 때문에 기본 스레드가 '차단'되었다고 합니다. 따라서 사용자가 긴 작업 중에 페이지와 상호작용하는 경우 브라우저는 작업이 완료될 때까지 기다려야 응답할 수 있습니다.
작업이 충분히 길면 (50밀리초 이상) 사용자가 지연을 감지하고 페이지가 느리거나 깨진 것으로 인식할 수 있습니다.
특정 긴 작업의 차단 시간은 50밀리초를 초과하는 기간입니다. 페이지의 총 차단 시간은 측정된 기간 (일반적으로 페이지 로드 도구의 TTI 또는 기타 도구의 총 트레이스 시간)의 FCP 이후에 발생하는 각 긴 작업의 차단 시간의 합계입니다.
예를 들어 페이지 로드 중 브라우저의 기본 스레드를 보여주는 다음 다이어그램을 살펴보세요.
위 이미지에 표시된 타임라인에는 5개의 작업이 있으며, 그중 3개는 기간이 50밀리초를 초과하므로 긴 작업입니다. 다음 다이어그램은 각 긴 작업의 차단 시간을 보여줍니다.
따라서 기본 스레드에서 작업을 실행하는 데 소요된 총 시간은 560밀리초이지만 이 시간 중 345밀리초만 차단 시간으로 간주됩니다.
| 작업 기간 (밀리초) | 작업 차단 시간 (밀리초) | |
|---|---|---|
| 작업 1 | 250 | 200 |
| 작업 2 | 90 | 40 |
| 작업 3 | 35 | 0 |
| 작업 4 | 30 | 0 |
| 다섯 번째 작업 | 155 | 105 |
| 총 차단 시간 | 345밀리초 | |
TBT는 INP와 어떤 관련이 있나요?
TBT는 INP보다 먼저 도입되었으며, 특히 INP 측정이 더 어려운 실험실 환경에서 INP 문제의 지표로 유용합니다. 하지만 사용자가 해당 시점에 상호작용하지 않으면 TBT에서 사용자에게 문제가 없을 수 있는 잠재적인 문제를 표시할 수 있습니다. 또한 실험실 환경에서 측정할 때는 상호작용으로 인해 발생하는 문제를 놓칠 수도 있습니다. 사용자가 경험하는 실제 응답성 문제의 측정치로 필드에서 INP를 측정하는 것이 좋습니다. TBT는 실험실에서 INP의 적절한 프록시 측정항목일 수 있지만 그 자체로 INP를 대체하지는 않습니다.
TBT는 TTI와 어떤 관련이 있나요?
TBT는 일정 기간 동안 측정됩니다. Lighthouse를 비롯하여 기존에 페이지 로드를 측정하는 일부 실험실 도구의 경우 TBT는 TTI까지 측정되었습니다. 이는 페이지가 안정적으로 상호작용하기 전에 페이지가 상호작용하지 않은 정도가 얼마나 심각한지 정량화하는 데 도움이 되기 때문입니다. 하지만 TBT는 페이지 로드 후에도 계속 측정될 수 있으며, 예를 들어 Lighthouse Timespan 모드에서는 TTI 이후에도 측정될 수 있습니다.
TTI는 기본 스레드에 긴 작업이 5초 이상 없으면 페이지가 '안정적으로 상호작용 가능'한 것으로 간주합니다. 즉, 10초에 걸쳐 분산된 51ms 작업 3개는 10초 길이의 단일 작업만큼 TTI를 뒤로 밀 수 있지만, 페이지와 상호작용하려는 사용자에게는 두 시나리오가 매우 다르게 느껴집니다.
첫 번째 경우 51ms 작업 3개의 TBT는 3밀리초입니다. 반면 10초 길이의 단일 작업은 TBT가 9, 950밀리초입니다. 두 번째 사례의 더 큰 TBT 값은 더 나쁜 경험을 정량화합니다.
이 예에서는 이상치에 덜 민감하므로 TBT가 TTI보다 나은 측정항목인 이유를 보여줍니다. TTI가 TBT의 엔드포인트로 사용되는 경우에도 마찬가지입니다.
TBT 측정 방법
TBT는 실험실에서 측정해야 하는 측정항목입니다. TBT를 측정하는 가장 좋은 방법은 사이트에서 Lighthouse 성능 감사를 실행하는 것입니다. 사용에 관한 자세한 내용은 TBT에 관한 Lighthouse 문서를 참고하세요.
필드에서 TBT를 측정할 수 있지만 사용자 상호작용이 보고서에 많은 변동을 일으키는 방식으로 페이지의 TBT에 영향을 미칠 수 있으므로 권장하지 않습니다. 단일 INP 상호작용을 넘어보고 싶다면 대신 최신 필드의 긴 애니메이션 프레임 API를 살펴보는 것이 좋습니다.
실험실 도구
좋은 TBT 점수란 무엇인가요?
우수한 사용자 환경을 제공하기 위해 사이트의 총 차단 시간이 평균 모바일 하드웨어에서 테스트할 때 200밀리초 미만이 되도록 노력해야 합니다.
페이지의 TBT가 Lighthouse 성능 점수에 미치는 영향에 관한 자세한 내용은 Lighthouse에서 TBT 점수를 결정하는 방법을 참고하세요.
TBT 개선 방법
일반적으로 TBT보다 INP에 최적화하는 것이 좋습니다. TBT는 실험실에서 INP를 정확하게 측정할 수 없는 경우 INP의 프록시 측정항목으로 사용하는 것이 좋습니다. 따라서 TBT를 개선하려면 INP 최적화에 대한 안내를 참고하세요.
TBT를 구체적으로 살펴보려면 Lighthouse 성능 감사를 실행하고 감사에서 제안하는 특정 기회에 주의하세요.
일반적으로 사이트의 TBT를 개선하려면 차단 스크립트의 양을 줄여야 합니다. 즉, 차단 스크립트가 덜 차단되도록 최적화하거나 전체 스크립트 양을 줄여야 합니다. 다음 성능 가이드를 참고하세요.