TBT란 무엇인가요?
총 차단 시간 (TBT) 측정항목은 콘텐츠가 포함된 첫 페인트 (FCP) 후 입력 응답을 방지하기에 충분한 시간 동안 기본 스레드가 차단된 총 시간을 측정합니다.
기본적으로 Lighthouse는 상호작용 시간 (TTI)이 지나면 TBT 모니터링을 중단하며, 페이지 로드를 측정하는 다른 실습 도구와 마찬가지로 TBT는 TTI와 어떤 관련이 있나요?를 참고하세요.
기본 스레드에서 50밀리초 이상 실행되는 긴 작업 작업이 있으면 기본 스레드는 '차단'된 것으로 간주됩니다. 브라우저가 진행 중인 작업을 중단할 수 없으므로 기본 스레드가 '차단'되었다고 말합니다. 따라서 사용자가 긴 작업 중에 페이지와 상호작용하는 경우 브라우저는 작업이 완료되기를 기다린 후에 응답해야 합니다.
작업이 충분히 길면 (50밀리초 초과) 사용자가 지연을 알아차리고 페이지가 느리거나 깨진 것으로 인식할 수 있습니다.
특정 긴 작업의 차단 시간은 지속 시간이 50밀리초를 초과합니다. 페이지의 총 차단 시간은 측정된 기간 (일반적으로 페이지 로드 도구의 TTI 또는 다른 도구의 총 추적 시간) 동안 FCP 이후에 발생한 각 긴 작업의 차단 시간의 합계입니다.
예를 들어 페이지 로드 중 브라우저 기본 스레드에 관한 다음 다이어그램을 살펴보겠습니다.
위 이미지에 묘사된 타임라인에는 5개의 태스크가 있는데, 그중 3개는 기간이 50밀리초를 초과하므로 장기 태스크 3개입니다. 다음 다이어그램은 각 장기 작업의 차단 시간을 보여줍니다.
따라서 기본 스레드에서 작업을 실행하는 데 소요된 총 시간은 560밀리초이지만 이 시간 중 345밀리초만 차단 시간으로 간주됩니다.
| 태스크 기간 (밀리초) | 작업 차단 시간 (밀리초) | |
|---|---|---|
| 작업 1 | 250 | 200 |
| 작업 2 | 90 | 40 |
| 작업 3 | 35 | 0 |
| 작업 4 | 30 | 0 |
| 작업 5 | 155 | 105 |
| 총 차단 시간 | 345밀리초 | |
TBT는 TTI와 어떤 관련이 있나요?
TBT는 일정 기간에 걸쳐 측정됩니다. Lighthouse를 포함하여 전통적으로 페이지 로드를 측정하는 일부 실험실 도구의 경우 TBT가 TTI까지 측정되었습니다. 이는 페이지가 안정적으로 상호작용하기 전에 페이지가 얼마나 비대화형인지의 심각도를 정량화하는 데 도움이 되기 때문입니다. 그러나 TBT는 페이지 로드 후에도 TTI 이후에도 계속 측정될 수 있습니다(예: Lighthouse Timespan 모드).
TTI는 기본 스레드에서 최소 5초 동안 장기 작업이 없는 경우 페이지를 '안정적인 대화형'으로 간주합니다. 즉, 10초에 걸쳐 51ms의 작업을 3개 분산하면 10초짜리 작업 1개만큼 TTI를 푸시백할 수 있습니다. 하지만 이 두 시나리오는 페이지와 상호작용하려는 사용자에게는 매우 다르게 느껴집니다.
첫 번째 경우 51ms인 작업 3개의 TBT는 3밀리초입니다. 반면에 10초짜리 단일 작업의 TBT는 9, 950밀리초입니다. 두 번째 케이스에서 TBT 값이 클수록 더 부정적인 경험을 수치화한 것입니다.
이 예에서는 이상점이 발생할 가능성이 낮으므로 TBT가 TTI보다 더 나은 측정항목인 이유를 보여줍니다. TTI가 TBT의 엔드포인트로 사용되는 경우도 마찬가지입니다.
TBT 측정 방법
TBT는 실습에서 측정해야 하는 측정항목입니다. TBT를 측정하는 가장 좋은 방법은 사이트에 대해 Lighthouse 성능 감사를 실행하는 것입니다. 사용법 세부정보는 TBT에 관한 Lighthouse 문서를 참고하세요.
실습 도구
좋은 TBT 점수란 무엇인가요?
우수한 사용자 환경을 제공하기 위해 사이트의 총 차단 시간은 평균 모바일 하드웨어에서 테스트할 때 200밀리초 미만이 되도록 노력해야 합니다.
페이지의 TBT가 Lighthouse 성능 점수에 미치는 영향에 대한 자세한 내용은 Lighthouse에서 TBT 점수를 결정하는 방법을 참고하세요.
TBT 개선 방법
특정 사이트의 TBT를 개선하는 방법을 알아보려면 Lighthouse 성능 감사를 실행하고 감사에서 제안하는 특정 기회에 주의를 기울이면 됩니다.
모든 사이트에서 TBT를 전반적으로 개선하는 방법을 알아보려면 다음 성능 가이드를 참고하세요.