목차
- 총 차단 시간과 긴 메인 스레드 작업
- 총 차단 시간(TBT) vs 상호 작용까지의 시간(TTI)
💡 총 차단 시간(TBT)은 성능 점수에 어떤 영향을 미칩니까?
- 총 차단 시간에 대한 임계값
총 차단 시간(TBT)이란,
Total Blocking Time
일시적으로 작동을 멈추는 시간
총 차단 시간(Total Blocking Time, TBT)은 웹 성능 측정에서 중요한 지표 중 하나로, 사용자 경험과 웹 페이지의 반응성을 평가하는 데 사용됩니다. 이 지표는 사용자가 웹 페이지와 상호 작용하는 동안 발생하는 지연을 측정하며, 아래는 TBT에 대한 개요입니다:
● 정의
총 차단 시간(Total Blocking Time)은 웹 페이지가 로딩되는 동안 메인 스레드가 차단된 시간의 총합을 나타냅니다. 이것은 사용자가 웹 페이지와 상호 작용할 때 발생하는 지연의 측정치로, 메인 스레드가 다른 작업으로 인해 일시적으로 작동을 멈추는 시간을 뜻합니다.
● 측정 단위
TBT는 밀리초(millisecond) 단위로 측정됩니다. 즉, 메인 스레드가 얼마나 오랫동안 차단되었는지를 밀리초로 표시한 것입니다.
● 중요성
총 차단 시간은 웹 페이지의 반응성을 평가하고 사용자가 웹 페이지와 상호 작용할 때 느끼는 딜레이를 측정하는 데 매우 중요합니다. 빠른 웹 페이지 로딩만으로는 충분하지 않으며, 사용자가 페이지와 상호 작용할 때 렉(Lag)이 없어야 좋은 사용자 경험을 제공할 수 있습니다.
간단히 말해,
TBT는 사용자가 웹페이지와 상호 작용하는 것을 방해하여 웹페이지가 차단된 총 시간을 측정합니다. 이것은 웹페이지의 성능과 사용자 경험을 평가하는 데 도움이 됩니다. TBT는 웹페이지의 로딩 속도와 반응성을 개선하기 위해 개발된 기술입니다. 이를 통해 사용자가 웹페이지를 원활하게 이용할 수 있도록 도와줍니다.
💡 총 차단 시간(TBT)은 무엇을 측정합니까?
총 차단 시간(Total Blocking Time, TBT)은 웹 페이지의 성능을 측정하기 위해 사용되는 지표로, 메인 스레드가 웹 페이지 로딩 중에 얼마나 오랫동안 "차단"되었는지를 측정합니다.
상상해보세요, 당신이 인터넷에서 웹 페이지를 방문하려고 합니다. 이 웹 페이지에는 글을 읽고, 사진을 보거나 상호 작용하는 요소가 있습니다. 이 웹 페이지를 로딩하는 동안, 웹 브라우저는 다양한 작업을 수행해야 합니다. 이 작업들은 웹 페이지가 빠르게 로드되고 사용자가 페이지와 상호 작용할 때 원활한 경험을 제공하는 데 중요합니다.
그러나 몇 가지 요소로 인해 웹 페이지가 로딩되는 동안 브라우저의 "메인 스레드"가 일시적으로 멈출 수 있습니다. 메인 스레드는 웹 페이지의 렌더링 및 상호 작용을 담당하는 핵심적인 부분입니다.
예를 들어,
웹 페이지가 JavaScript 코드를 실행하는 동안 다른 작업을 중단하고 기다려야 할 때, 메인 스레드는 차단됩니다. 이러한 차단은 사용자 경험을 악화시킬 수 있습니다.
1. 당신이 웹 페이지의 스크롤을 내리려고 할 때, 스크롤 작업이 JavaScript 코드 실행으로 인해 차단된다면 스크롤이 늦게 반응하게 될 것입니다.
2. 사용자가 버튼을 클릭하려고 할 때, 클릭 이벤트가 JavaScript 코드로 인해 지연되면 버튼 작동이 늦어지게 됩니다.
다시 말하면,
브라우저가 웹 페이지를 로딩하는 동안, 다양한 작업을 수행합니다. 이러한 작업은 주로 브라우저의 메인 스레드에서 처리됩니다. 메인 스레드는 웹 페이지의 렌더링, 사용자 이벤트 처리, JavaScript 실행, 스타일 계산, 그리고 다른 중요한 작업을 담당하는 부분입니다.
그러나 때로는 이러한 작업 중 하나가 시간이 오래 걸리는 경우가 있습니다. 예를 들어, 웹 페이지가 JavaScript 코드를 실행하는 동안, 해당 작업이 지나치게 길어진다면 메인 스레드는 다른 작업을 처리하는 동안 JavaScript 코드의 완료를 기다려야 합니다. 이 경우 메인 스레드가 "차단"되었다고 말합니다.
메인 스레드가 차단된 상태에서는 사용자 입력에 대한 응답이 지연되며, 사용자는 스크롤, 클릭 또는 다른 상호 작용을 할 때 렉(Lag)을 느낄 수 있습니다. 이 렉은 사용자 경험을 저하시키고, 사용자가 기다려야 하는 불편함을 초래합니다.
이때, 50ms 이상 지속되는 차단 시간을 "개별 차단 시간"으로 간주합니다. 개별 차단 시간은 메인 스레드가 특정 작업을 처리하는 동안 차단된 시간을 의미합니다.
총 차단 시간(Total Blocking Time, TBT)은 이러한 모든 개별 차단 시간의 합으로, 페이지의 로딩 동안 메인 스레드가 차단된 시간을 모두 더한 값입니다. TBT가 높을수록 웹 페이지의 응답성이 낮아지며, 사용자는 더 많은 차단 시간을 경험하게 됩니다.
Google에 따르면,
"TBT는 First Contentful Paint (FCP)와 상호 작용 가능한 시간 사이의 총 시간을 측정하는 것으로, 주 스레드가 입력 응답성을 방해할 만큼 충분히 길게 차단된 시간을 의미합니다."
50ms 이상 소요되는 작업은 Long Task로 간주됩니다. 위의 예시에서는 3개의 Long Task가 있습니다 (빨간색으로 표시됨)
[표 Source : Google]
상기 예시에서 메인 스레드에는 5개의 작업이 있으며, 각 작업의 개별 차단 시간이 다릅니다. 작업 A는 170ms 동안 차단되었으며, 작업 B는 20ms, 작업 E는 95ms 동안 차단되었습니다. 이러한 차단 시간은 모두 더해져 총 차단 시간(TBT)이 계산됩니다.
따라서, TBT는 170ms (작업 A) + 20ms (작업 B) + 95ms (작업 E) = 285ms 입니다. 이것은 웹 페이지가 로딩되는 동안 메인 스레드가 차단된 총 시간을 나타냅니다.
이 예시에서, 각 작업의 차단 시간이 다르기 때문에 TBT가 285ms가 됩니다. 그러나 만약 메인 스레드에 500ms가 걸리는 작업이 하나만 있다면, 이 하나의 작업이 TBT를 크게 증가시킬 것이며, TBT는 450ms로 높아질 것입니다.
총 차단 시간과 긴 메인 스레드 작업
총 차단 시간(TBT)과 긴 메인 스레드 작업은 밀접한 관련이 있지만, 성능 측정 도구의 방법론 때문에 정확하게 일치하지는 않을 수 있습니다. 아래는 관련 내용을 정리한 것입니다.
▶ 긴 메인 스레드 작업 : 긴 메인 스레드 작업은 메인 스레드에서 실행되는 작업 중에서 지속 시간이 50ms를 초과하는 경우를 말합니다. 이러한 작업은 "블로킹"으로 간주되며, 50ms를 초과하는 지속 시간은 "개별 블로킹 시간"으로 고려됩니다.
▶ TBT 계산 : TBT를 계산할 때, FCP (First Contentful Paint) 이후 및 TTI (Time to Interactive) 이전에 발생한 긴 작업의 블로킹 시간만을 고려합니다. 다시 말해, FCP와 TTI 사이의 개별 블로킹 시간의 합은 페이지의 전체 TBT와 동일해야 합니다.
이것은 페이지의 로딩 및 상호 작용 가능한 시간 동안 사용자에게 불편을 주는 블로킹 시간을 감지하고, 이를 TBT로 측정하여 사용자 경험을 개선하려는 목적으로 사용됩니다. TBT는 사용자가 웹 페이지와 상호 작용할 때 느끼는 딜레이를 최소화하기 위한 중요한 성능 지표 중 하나입니다.
총 차단 시간(TBT) vs 상호 작용까지의 시간(TTI)
총 차단 시간(TBT)과 상호 작용까지의 시간(TTI)은 웹 페이지 성능을 평가하고 사용자 경험을 향상시키는 중요한 지표입니다. 이 두 지표는 각각 웹 페이지의 성능과 사용자 상호 작용 가능 상태에 관한 정보를 제공하지만 서로 다른 관점을 가지고 있습니다. 아래는 TBT와 TTI의 차이점을 요약한 것입니다.
▶ 총 차단 시간(TBT) : TBT는 웹 페이지가 로딩 중에 메인 스레드가 얼마나 오랫동안 차단되었는지를 측정합니다. 이것은 페이지 로딩 중 사용자 입력에 대한 응답이 지연되는 시간을 나타내며, 사용자가 페이지를 조작할 때 느끼는 딜레이와 관련이 있습니다. TBT는 주로 페이지 로딩 중에 발생하는 블로킹을 강조합니다.
▶ 상호 작용까지의 시간(TTI) : TTI는 페이지가 완전히 상호 작용 가능한 상태가 되기까지 걸리는 시간을 측정합니다. 이것은 사용자가 웹 페이지의 모든 상호 작용 가능한 요소를 사용할 수 있는 지점을 나타내며, 페이지가 완전한 사용자 상호 작용 가능 상태로 돌아갈 때까지의 시간을 측정합니다.
예를 들어, 높은 TBT를 갖는 웹 페이지는 로딩 중에 사용자 입력에 대한 응답이 느릴 수 있으며, 사용자가 페이지를 조작할 때 딜레이를 경험할 것입니다. 반면에 높은 TTI를 갖는 웹 페이지는 완전한 상호 작용 가능 상태로 오랜 시간이 걸리며, 사용자가 원활하게 상호 작용할 수 없을 것입니다.
TTI는 페이지가 완전히 상호작용 가능한 상태임을 나타냅니다. TBT는 특히 어떤 JavaScript 작업이 가장 오래 걸렸는지를 알려줍니다.
TTI (상호 작용까지의 시간)은 웹 페이지가 사용자에게 완전히 상호 작용 가능한 상태로 간주되는 중요한 성능 지표입니다.
일반적으로, TTI는 메인 스레드가 최소한 5초 동안 긴 작업 없이 자유로워지면 페이지를 완전한 상호 작용 가능한 상태로 간주합니다.
다음 두 가지 시나리오를 고려해봅시다.
A) 5초 동안 퍼져 있는 60ms 작업 세 개
B) 5초 동안 진행되는 긴 작업 한 개
두 시나리오 모두 TTI를 동일한 정도로 미루게 합니다. 이것은 TTI를 결정하는 데 있어 TTI가 가장 긴 작업에 의해 결정된다는 사실에서 비롯됩니다.
그러나 두 시나리오는 사용자에게 매우 다른 느낌이 들 것입니다. 첫 번째 시나리오는 TBT가 단 30 ms 이므로 대화식으로 느껴집니다. 반면 두 번째 시나리오는 TBT가 4950 ms이므로 브라우저가 긴 작업을 처리하는 동안 전혀 상호 작용할 수 없습니다.
이로 인해 TBT는 독립적으로 의미 있는 측정 항목이 되는 동시에 TTI와 함께 유용한 보조 측정 항목이 됩니다. TBT는 사용자가 웹 페이지와 상호 작용하는 데 얼마나 빠른 응답을 기대할 수 있는지에 대한 정보를 제공하며, 웹 페이지의 전반적인 성능을 파악하는 데 도움이 됩니다. 따라서 TBT와 TTI는 웹 성능을 평가하는 데 함께 고려되어야 합니다.
💡 총 차단 시간(TBT)은 성능 점수에 어떤 영향을 미칩니까?
총 차단 시간(TBT)은 웹 페이지의 성능 점수에 직접적인 영향을 미칩니다. 성능 점수는 사용자 경험과 웹 페이지의 품질을 평가하는 데 사용되는 지표 중 하나이며, TBT를 줄이는 것은 웹 페이지의 성능을 향상시키고 사용자 만족도를 높이는 데 도움이 됩니다.
TBT는 웹 핵심 지표 중 하나로, 성능 점수의 30%를 차지하여 최적화할 가장 중요한 지표입니다. 이는 웹 페이지의 응답성을 향상시키고 사용자 경험을 개선하기 위해 TBT 최적화에 중점을 두어야 함을 강조합니다. 따라서 웹 개발자와 웹 사이트 소유자들은 TBT를 최소화하는 노력을 기울이며, 이를 통해 웹 페이지의 성능을 향상시키고 사용자가 보다 원활하게 상호 작용할 수 있도록 합니다.
총 차단 시간에 대한 임계값
총 차단 시간(TBT)은 웹 페이지의 성능을 평가하는 중요한 지표로, 특정한 임
계값에 따라 평가됩니다. 이러한 임계값은 TBT 값의 범주를 정의하며 사용자 경험과 웹 페이지의 품질을 나타내는 중요한 지표입니다. 아래는 TBT에 대한 임계값입니다.
▶ 좋음 - 할 일 없음 : TBT가 150 밀리초 이하인 경우, 웹 페이지의 성능이 우수한 상태로 간주됩니다. 사용자 경험에 뚜렷한 차질이 없으며 사용자가 페이지와 원활하게 상호 작용할 수 있습니다.
▶ 괜찮지만 개선을 고려해야 함 : TBT가 150 밀리초에서 224 밀리초 사이인 경우, 웹 페이지의 성능은 중간 정도로 평가됩니다. 사용자 경험은 어느 정도 만족스러우나, 조금 더 최적화할 여지가 있습니다.
▶ 권장 시간보다 길음 : TBT가 224 밀리초에서 350 밀리초 사이인 경우, 웹 페이지의 성능은 떨어질 수 있습니다. 사용자가 페이지와 상호 작용할 때 미세한 딜레이를 경험할 수 있으며, 성능 최적화가 필요한 상태입니다.
▶ 권장 시간보다 훨씬 길음 : TBT가 350 밀리초를 초과하는 경우, 웹 페이지의 성능이 매우 나쁜 상태로 간주됩니다. 사용자 경험은 상당히 나빠지며, 사용자가 페이지와 원활하게 상호 작용할 수 없을 것입니다. 즉, 심각한 성능 최적화가 필요합니다.
이러한 임계값은 웹 개발자 및 웹 사이트 소유자에게 TBT를 모니터링하고 성능을 개선하기 위한 유용한 지침을 제공합니다. 총 차단 시간을 임계값에 따라 개선함으로써 사용자 경험을 향상시키고 웹 페이지의 품질을 높일 수 있습니다.
💡총 차단 시간(TBT)은 어떻게 향상 시킵니까?
총 차단 시간(TBT)를 개선하기 위해서는 여러 가지 기술적인 개선 방법을 고려할 수 있습니다. 이러한 개선은 웹 페이지의 로딩 속도를 높이고 사용자 경험을 향상시킬 수 있습니다.
아래는 주요 최적화 방법입니다.
● JavaScript 실행 시간 줄이기
JavaScript 코드가 로딩 및 실행에 시간이 오래 걸리면 페이지의 속도 지수가 영향을 받습니다. JavaScript 최적화를 통해 코드를 최소화하고 불필요한 부분을 제거하여 실행 시간을 단축시키세요.
● 메인 스레드 작업 최소화
메인 스레드가 긴 작업을 수행하지 않도록 최적화하세요. 이렇게 하면 브라우저가 페이지의 시각적 요소를 더 빨리 로드할 수 있습니다.
● 사용되지 않는 JavaScript 줄이기
페이지에 사용되지 않는 JavaScript 파일을 식별하고 제거하세요. 불필요한 스크립트는 페이지 로딩을 늦출 수 있습니다.
● Third-party 코드의 영향 감소
타사 스크립트와 라이브러리가 페이지 로딩을 늦출 수 있으므로, 사용 중인 타사 코드를 최소한으로 줄이거나 최적화하세요.
● Javascript 축소
큰 JavaScript 라이브러리를 작은 대체재로 교체하여 페이지의 로딩 속도를 향상시킬 수 있습니다. 가벼운 대안을 고려하세요.
또한, 다음과 같은 일반적인 최적화 방법도 고려해야 합니다.
▶ 이미지 최적화 : 이미지를 압축하고 적절한 형식을 사용하여 대용량 이미지의 로딩 시간을 줄이세요.
▶ 리소스 압축 : CSS 및 JavaScript 파일을 압축하여 파일 크기를 최소화하고 로딩 시간을 단축하세요.
▶ CDN 사용 : Content Delivery Network (CDN)을 활용하여 전 세계에서 빠른 콘텐츠 제공을 통해 웹 페이지의 로딩 속도를 최적화하세요.
이러한 최적화를 통해 웹 페이지의 속도 지수를 향상시키고, 사용자들이 페이지를 빠르게 접근하고 편안한 경험을 얻을 수 있도록 도움을 줄 수 있습니다.
'E-커머스 쇼핑몰 운영' 카테고리의 다른 글
| [온라인 쇼핑몰 속도 최적화] 첫번째 콘텐츠 로딩 시간(FCP) (0) | 2024.10.16 |
|---|---|
| [온라인 쇼핑몰 속도 최적화] 상호작용까지의 시간(TTI) (1) | 2024.10.16 |
| [온라인 쇼핑몰 속도 최적화] 가장 큰 콘텐츠 렌더링 시간(LCP) (1) | 2024.10.13 |
| [온라인 쇼핑몰 속도 최적화] 누적 레이아웃 이동(CLS) (0) | 2024.10.13 |
| [온라인 쇼핑몰 속도 최적화] 대규모 레이아웃 변경 피하기 (0) | 2024.10.13 |