TBT란 무엇인가요?
총 차단 시간 (TBT) 측정항목은 입력 응답성을 방지하기에 충분한 시간 동안 기본 스레드가 차단된 콘텐츠가 포함된 첫 페인트 (FCP) 이후의 총 시간을 측정합니다.
페이지 로드를 측정하는 다른 실험실 도구와 마찬가지로 Lighthouse는 기본적으로 TTI (상호작용 시작 시간)가 지나면 TBT 모니터링을 중지합니다. TBT와 TTI는 어떤 관련이 있나요?를 참고하세요.
기본 스레드는 기본 스레드에서 50밀리초 (ms) 넘게 실행되는 작업인 긴 작업이 있을 때마다 '차단'된 것으로 간주됩니다. 브라우저가 진행 중인 작업을 중단할 수 없으므로 기본 스레드가 '차단'되었다고 합니다. 따라서 사용자가 긴 작업 도중에 페이지와 상호작용하는 경우에는 브라우저에서 작업이 완료될 때까지 기다린 후에 응답해야 합니다.
작업이 충분히 길면 (50ms 초과) 사용자는 지연을 알아차리고 페이지가 느리거나 버벅거리는 것으로 인식할 수 있습니다.
특정 긴 작업의 차단 시간은 50ms를 초과하는 기간입니다. 페이지의 총 차단 시간은 측정된 기간 (일반적으로 페이지 로드 도구의 경우 TTI, 기타 도구의 경우 총 추적 시간) 동안 FCP 이후에 발생하는 각 긴 작업의 차단 시간의 합계입니다.
예를 들어 페이지 로드 중 브라우저의 기본 스레드를 보여주는 다음 다이어그램을 살펴보세요.
위 타임라인에는 태스크가 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초 이상 장기 작업이 수행되지 않았다면 페이지를 '안정적으로 상호작용'한다고 간주합니다. 즉, 51밀리초의 작업 3개가 10초에 걸쳐 분산되어 있으면 TTI를 10초짜리 하나의 태스크만큼 지연시킬 수 있습니다. 하지만 이 두 시나리오는 페이지와 상호작용하려는 사용자에게 매우 다르게 느껴집니다.
첫 번째 사례에서 51밀리초의 작업 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를 일반적으로 개선하는 방법을 알아보려면 다음 성능 가이드를 참고하세요.