총 차단 시간 (TBT)

총 차단 시간 (TBT)은 로드 반응성을 측정하는 중요한 실습 측정항목입니다. 콘텐츠가 포함된 첫 페인트 (FCP) 후 사용자 입력에 대한 응답을 방지할 수 있을 만큼 기본 스레드가 충분히 오랫동안 차단된 총 시간을 측정합니다. TBT가 낮으면 페이지를 사용하는 데 도움이 됩니다.

기본적으로 Lighthouse는 페이지 로드를 측정하는 다른 실험실 도구와 마찬가지로 상호작용 시작 시간 (TTI) 후에 TBT 모니터링을 중지합니다. 자세한 내용은 TBT는 TTI와 어떤 관련이 있나요?를 참조하세요.

긴 작업(기본 스레드에서 50밀리초(ms) 이상 실행되는 작업)이 있으면 기본 스레드가 '차단'된 것으로 간주됩니다. 브라우저는 진행 중인 작업을 중단할 수 없기 때문에 기본 스레드가 '차단'되었다고 합니다. 사용자가 긴 작업 도중에 페이지와 상호작용하려고 하면 브라우저는 작업이 완료될 때까지 기다린 후에 응답해야 합니다.

기본 스레드가 50ms 이상 차단되어 있는 경우 사용자는 지연을 인지하고 페이지가 느리거나 깨진 것으로 인식할 수 있습니다.

특정 긴 작업의 차단 시간은 50ms를 초과한 기간입니다. 페이지의 총 차단 시간은 측정된 기간 (일반적으로 페이지 로드 도구의 경우 TTI, 다른 도구의 경우 총 추적 시간) 동안 FCP 이후에 발생한 각 긴 작업의 차단 시간의 합계입니다.

예를 들어 페이지 로드 중 브라우저의 기본 스레드를 보여주는 다음 다이어그램을 살펴보세요.

기본 스레드의 작업 타임라인
기본 스레드의 작업 타임라인

이 타임라인에는 5개의 태스크가 있으며 이 중 3개는 기간이 50ms를 초과하기 때문에 긴 태스크입니다. 다음 다이어그램은 장기 태스크 각각의 차단 시간을 보여줍니다.

차단 시간을 보여주는 기본 스레드의 작업 타임라인
차단 시간이 표시된 동일한 작업

기본 스레드에서 작업을 실행하는 데 소요된 총 시간은 560ms이며 이 시간의 345ms는 차단 시간으로 간주됩니다.

태스크 기간 할 일 차단 시간
작업 1 250 ms 200ms
작업 2 90 ms 40 ms
작업 3 35ms 0ms
작업 4 30 ms 0ms
작업 5 155 ms 105 ms
총 차단 시간 345밀리초

TBT는 TTI와 어떤 관련이 있나요?

TBT는 일정 기간에 걸쳐 측정됩니다. Lighthouse를 포함하여 기존에 페이지 로드를 측정하는 일부 실험실 도구의 경우 TBT는 TTI까지 측정되었습니다. TTI는 페이지가 안정적으로 상호작용하기 전에 페이지의 비대화형 정도를 정량화하는 데 도움이 되기 때문입니다. 그러나 Lighthouse 기간 모드와 같은 경우 TTI 이상으로 TBT를 계속 측정할 수 있습니다.

TTI는 기본 스레드에서 5초 이상 장기 작업이 진행되지 않았다면 페이지를 '안정적으로 상호작용'한다고 간주합니다. 즉, 51ms 작업 3개를 10초에 걸쳐 분산하면 단일 10초 태스크만큼 TTI를 지연시킬 수 있습니다.

그러나 이 두 시나리오는 페이지와 상호작용하려는 사용자에게 매우 다르다고 느끼게 됩니다. 51ms 작업 3개의 TBT는 3ms인 반면, 10초 태스크 1개의 TBT는 9950ms이므로 사용자 환경이 훨씬 더 악화됩니다.

TBT는 이상점을 더 정확하게 나타내기 때문에 TBT 측정이 TTI에서 중지되더라도 TTI보다 더 유용한 측정항목인 경우가 많습니다.

TBT 측정

TBT는 실험실에서 측정해야 하는 측정항목입니다. TBT를 측정하는 가장 좋은 방법은 사이트에서 Lighthouse 성능 감사를 실행하는 것입니다. 사용법에 관한 자세한 내용은 TBT에 관한 Lighthouse 문서를 참고하세요.

실습 도구

좋은 TBT 점수는 무엇인가요?

우수한 사용자 환경을 제공하려면 사이트의 TBT가 평균 모바일 하드웨어에서 테스트 시 200밀리초 미만이어야 합니다.

페이지의 TBT가 Lighthouse 성능 점수에 미치는 영향에 관한 자세한 내용은 Lighthouse에서 TBT 점수를 결정하는 방법을 참고하세요.

TBT 개선

특정 사이트의 TBT를 개선하는 방법을 알아보려면 Lighthouse 성능 감사를 실행하고 감사에서 제안하는 특정 기회에 주의를 기울이세요.

모든 사이트에서 TBT를 개선하는 일반적인 방법을 알아보려면 다음 성능 가이드를 참고하세요.