총 차단 시간 (TBT)은 Lighthouse 보고서의 성능 섹션에서 추적되는 측정항목 중 하나입니다. 각 측정항목은 페이지 로드 속도의 측면을 나타냅니다.
Lighthouse 보고서는 TBT를 밀리초 단위로 표시합니다.
TBT에서 측정하는 항목
TBT는 페이지가 마우스 클릭, 화면 탭 또는 키보드 누름과 같은 사용자 입력에 응답하지 못하도록 차단된 총 시간을 측정합니다. 합계는 콘텐츠가 포함된 첫 페인트와 상호작용 시간 사이에 모든 장기 작업의 차단 부분을 더하여 계산됩니다. 50ms를 초과하여 실행되는 모든 작업은 장기 작업입니다. 50밀리초 후의 시간이 차단 부분입니다. 예를 들어 Lighthouse가 70ms 길이의 작업을 감지하면 차단 부분은 20ms입니다.
Lighthouse에서 TBT 점수를 결정하는 방법
TBT 점수는 휴대기기에 로드될 때 페이지의 TBT 시간과 실제 사이트 수백만 개를 TBT에 곱한 값을 비교한 것입니다. Lighthouse 점수 임계값이 설정되는 방식은 측정항목 점수 결정 방식을 참고하세요.
다음 표에서는 TBT 점수를 해석하는 방법을 보여줍니다.
| TBT 시간 (밀리초 단위) |
색 구분 |
|---|---|
| 0~200 | 녹색 (빠름) |
| 200-600 | 주황색 (보통) |
| 600명 이상 | 빨간색 (느림) |
TBT 점수를 개선하는 방법
장기 작업의 원인은 무엇인가요?를 참고하여 Chrome DevTools의 성능 패널을 사용해 장기 작업의 근본 원인을 진단하는 방법을 알아보세요.
일반적으로 장기 작업의 가장 일반적인 원인은 다음과 같습니다.
- 불필요한 자바스크립트 로드, 파싱 또는 실행. 성능 패널에서 코드를 분석하는 동안 기본 스레드가 페이지를 로드하는 데 실제로 필요하지 않은 작업을 실행 중임을 발견할 수도 있습니다. 코드 분할을 통해 JavaScript 페이로드를 줄이거나 사용하지 않는 코드를 삭제하거나 서드 파티 JavaScript를 효율적으로 로드하면 TBT 점수가 개선됩니다.
- 비효율적인 JavaScript 문. 예를 들어 성능 패널에서 코드를 분석한 후 2,000개의 노드를 반환하는
document.querySelectorAll('a')호출이 있다고 가정해 보겠습니다. 10개의 노드만 반환하는 보다 구체적인 선택기를 사용하도록 코드를 리팩터링하면 TBT 점수가 개선됩니다.
전반적인 실적 점수를 개선하는 방법
특정 측정항목에 집중해야 하는 특별한 이유가 없다면 일반적으로 전반적인 성능 점수를 개선하는 데 집중하는 것이 좋습니다.
Lighthouse 보고서의 추천 섹션을 사용하면 페이지에 가장 큰 가치가 있는 개선사항을 파악할 수 있습니다. 기회가 클수록 실적 점수에 더 큰 영향을 미칩니다. 예를 들어 아래의 Lighthouse 스크린샷은 렌더링 차단 리소스를 제거하면 가장 큰 개선 효과를 얻을 수 있음을 보여줍니다.
Lighthouse 보고서에서 식별된 기회를 해결하는 방법은 성능 감사 방문 페이지를 참고하세요.