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 |
| 작업 5 | 155 | 105 |
| 총 차단 시간 | 345밀리초 | |
TBT는 INP와 어떤 관련이 있나요?
TBT는 INP보다 먼저 존재하며, 특히 INP를 측정하기가 더 어려운 실험실 환경에서 INP 문제의 지표로 유용합니다. 하지만 TBT는 사용자가 그때 상호작용하지 않는 경우 사용자에게 문제가 없을 수 있는 잠재적 문제를 신고할 수 있습니다. 또한 실험실 환경에서 측정할 때 상호작용으로 인한 문제를 놓칠 수도 있습니다. 사용자에게 발생하는 실제 응답성 문제를 측정하기 위해 현장에서 INP를 측정하는 것이 좋습니다. TBT는 실험실의 INP에 대한 적절한 대리 측정항목일 수 있지만 그 자체로 INP를 대체할 수는 없습니다.
TBT는 TTI와 어떤 관련이 있나요?
TBT는 일정 기간 동안 측정됩니다. Lighthouse를 비롯하여 기존에 페이지 로드를 측정하는 일부 실험실 도구에서는 페이지가 안정적으로 상호작용하기 전에 페이지가 상호작용하지 않은 정도가 얼마나 심각한지 정량화하는 데 도움이 되므로 TTI까지 TBT가 측정되었습니다. 그러나 TBT는 페이지 로드 후에도 TTI 이후에도 계속 측정될 수 있습니다(예: Lighthouse Timespan 모드).
TTI는 기본 스레드에 5초 이상 장기 작업이 없으면 페이지를 '상호작용이 안정적'으로 간주합니다. 즉, 10초에 걸쳐 51밀리초 작업 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를 개선하려면 차단 스크립트의 양을 줄여야 하며, 이는 스크립트를 덜 차단하도록 최적화하거나 전체적인 스크립트 수를 줄이는 것을 뜻합니다. 다음 성능 가이드를 참고하세요.