총 차단 시간 (TBT)

TBT란 무엇인가요?

총 차단 시간 (TBT) 측정항목은 기본 스레드가 입력 반응성을 방지할 만큼 충분히 오랫동안 차단된 첫 콘텐츠 페인트 (FCP) 이후의 총 시간을 측정합니다.

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

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

작업이 충분히 길면 (50ms 초과) 사용자는 지연을 인지하고 페이지가 느리거나 버벅거리는 것으로 인식할 수 있습니다.

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

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

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

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

차단 시간을 보여주는 기본 스레드의 작업 타임라인

따라서 기본 스레드에서 작업을 실행하는 데 소요된 총 시간은 560밀리초이지만 이 시간 중 345밀리초만 차단 시간으로 간주됩니다.

태스크 기간 할 일 차단 시간
작업 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까지 측정되었습니다. TBT는 페이지가 안정적으로 상호작용하기 전에 페이지의 비대화형 정도를 정량화하는 데 도움이 되기 때문입니다. 그러나 TBT는 페이지 로드 이후 등 TTI를 넘어서(예: Lighthouse 기간 모드) 계속해서 측정될 수도 있습니다.

TTI는 기본 스레드에서 5초 이상 장기 작업이 진행되지 않았다면 페이지를 '안정적으로 상호작용'한다고 간주합니다. 즉, 10초에 걸쳐 분산된 3개의 51ms 태스크가 10초 길이의 단일 태스크만큼 TTI를 지연시킬 수 있지만 이 두 시나리오는 페이지와 상호작용하려는 사용자에게 매우 다르게 느껴질 수 있습니다.

첫 번째 경우 51ms 태스크 3개의 TBT는 3ms입니다. 반면에 10초짜리 단일 태스크의 TBT는 9950ms입니다. 두 번째 경우에 TBT 값이 클수록 좋지 않은 환경이 정량화됩니다.

이 예는 TBT가 이상점 발생 가능성이 낮기 때문에 종종 TTI보다 더 나은 측정항목인 이유를 보여줍니다. TTI가 TBT의 엔드포인트로 사용되는 경우에도 마찬가지입니다.

TBT 측정 방법

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

실습 도구

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

우수한 사용자 환경을 제공하려면 사이트의 평균 모바일 하드웨어에서 테스트할 때 총 차단 시간이 200밀리초 미만이 되도록 노력해야 합니다.

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

TBT 개선 방법

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

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