總封鎖時間 (TBT)

什麼是 TBT?

總封鎖時間 (TBT) 指標會測量在「首次顯示內容所需時間 (FCP)」後,主執行緒遭到封鎖多久時間,以防輸入內容回應。

根據預設,Lighthouse 會在 Time to Interactive (TTI) 後停止監控 TBT,就像執行其他會測量網頁載入的研究室工具一樣。請參閱 TBT 與 TTI 有何關聯?

每當「長時間工作」在主執行緒上執行工作超過 50 毫秒時,系統就會將主執行緒視為「已封鎖」。瀏覽器無法中斷進行中的工作,因此主執行緒處於「已封鎖」狀態。因此,如果使用者進行長時間工作的「確實」與網頁互動,瀏覽器必須等工作完成後才能回應。

如果工作時間夠長 (超過 50 毫秒),使用者可能會注意到網頁延遲載入,或作業很遲交或毀損。

特定長時間工作的封鎖時間是指超過 50 毫秒的時間。網頁的「總封鎖時間」則是評估時間範圍內,在 FCP 之後發生的每項長時間工作的封鎖時間總和 (通常是網頁載入工具的 TTI,或其他工具的總追蹤時間)。

以下方圖表,呈現網頁載入期間的瀏覽器主執行緒:

主要執行緒的工作時間軸
主執行緒中工作的時間軸。

上圖的時間軸有 5 項工作,其中三項工作是「長時間工作」,因為工作時間超過 50 毫秒。下圖顯示每個長時間工作的封鎖時間:

主要執行緒的工作時間軸,顯示封鎖時間
相同的工作,並標示封鎖時間。

因此,雖然在主執行緒上執行工作的總時間是 560 毫秒,但只有 345 毫秒才視為封鎖時間。

工作時間長度 (毫秒) 工作封鎖時間 (毫秒)
任務一 250 200
任務二 90 40
任務三 35 0
任務四 30 0
任務五 155 105
總封鎖時間 345 毫秒

待定和 TTI 有何關聯?

觀察時間是一段時間。對於某些傳統測量頁面負載 (包括 Lighthouse) 的實驗室工具,我們則是要測量到 TTI 為止,因為這項做法有助於量化非互動式網頁的嚴重程度,以達到可靠的互動體驗。不過,TTBT 仍可在網頁載入後繼續評估,涵蓋範圍則不超出 TTI 的數值,例如 Lighthouse 時間範圍模式。

TT 如果主執行緒沒有較長的工作時間超過 5 秒,則我會將網頁視為「可靠互動」。換句話說,分散在 10 秒內分段的三、51 毫秒的 51 毫秒工作能夠推回 TTI 最久只能推動 10 秒的 10 秒工作,但是這兩種情況對使用者嘗試與網頁互動的方式非常不同。

如果是第一種情況,3 個 51 毫秒的工作會有「3 毫秒」 TBT。而如果是單一 10 秒長的工作,則其 TBT 為 9950 毫秒。第二種案例中的 TBT 值越大,表示問題越嚴重。

這個範例說明瞭為什麼 TBT 通常比 TTI 高,因為離離群值較不容易。即使 TTI 做為 TBT 的端點,也屬於這種情況。

如何測量待定

TBT 是研究室應測量的指標。測量 TBT 的最佳方式就是對網站執行 Lighthouse 效能稽核。如要進一步瞭解使用詳情,請參閱 TBT 的 Lighthouse 說明文件

研究室工具

怎樣的 TBT 分數才算良好?

為了提供良好的使用者體驗,網站在一般行動硬體上進行測試時,總封鎖時間應維持在 200 毫秒以內。

如要進一步瞭解網頁的 TBT 如何影響 Lighthouse 效能分數,請參閱 Lighthouse 如何決定 TBT 分數一文

如何改善 TBT

如要瞭解如何改善特定網站的 TBT,您可以執行 Lighthouse 效能稽核,並留意稽核報告建議的任何特定商機

如要瞭解如何提升任何網站的 TBT 效能,請參閱下列效能指南: