總封鎖時間 (TBT)

總封鎖時間 (TBT) 是評估負載回應速度的重要研究室指標。這項指標會測量首次顯示內容所需時間 (FCP) 後,主執行緒封鎖時間過久,以防止對使用者輸入做出回應的總時間。較低的 TBT 值有助於確保網頁可使用

根據預設,Lighthouse 會在互動時間 (TTI) 後停止監控 (TBT),其他部分計算網頁載入的研究室工具也是如此。詳情請參閱「TBT 與 TTI 的關係」。

只要長時間工作 (在主執行緒上執行的工作時間超過 50 毫秒) 時,主要執行緒就會被視為「已封鎖」。我們會說主要執行緒「遭到封鎖」,是因為瀏覽器無法中斷執行中的工作。如果使用者嘗試在長時間工作期間與頁面互動,瀏覽器必須等待工作完成後才能回應。

如果主要執行緒封鎖的工作超過 50 毫秒,使用者可能會發現延遲,並認為網頁很慢或毀損。

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

舉例來說,假設網頁載入期間,瀏覽器的主要執行緒圖表如下:

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

這個時間軸有五項工作,其中三個是長工作,因為持續時間超過 50 毫秒。下一張圖表顯示每個長時間工作的阻斷時間:

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

在主要執行緒上執行工作的總時間為 560 毫秒,而這段時間的 345 毫秒即為阻斷時間。

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

TBT 與 TTI 的關係為何?

待定時測量所得的結果。對一些傳統會測量網頁載入的研究室工具 (包括 Lighthouse) 進行評估,直到 TTI 開始穩定評估,因為這個做法可在網頁無法穩定互動之前,進一步量化非互動網頁的嚴重性。不過,您可以繼續測量超過 TTI 的 TBT 值,例如在 Lighthouse 時間範圍模式下測量結果。

如果主要執行緒沒有長時間工作至少五秒, TTI 就會將網頁視為「可互動」。這表示在 10 秒以上的任務中,跑出 351 毫秒的任務,可以將 TTI 推遲,就像一個 10 秒的工作一樣。

不過,這兩個情境與使用者嘗試與網頁互動時,會帶來截然不同的體驗。3 則 51 毫秒的工作有 TBT 為 3 毫秒,而單一 10 秒工作則是 TBT 為 9950 毫秒,因此使用者體驗也更加糟糕。

由於 TBT 能更準確地呈現離群值,因此即使在 TTI 的測量作業停止,仍通常比 TTI 更有用。

測量 TBT

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

研究室工具

TBT 分數寫得多少?

為了提供良好的使用者體驗,在一般行動裝置硬體上進行測試時,網站的 TBT 應小於 200 毫秒

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

改善待定

如要瞭解如何改善特定網站的 TBT,請執行 Lighthouse 效能稽核,並注意稽核建議的任何特定機會

如要瞭解如何改善一般 (適用於所有網站) 的效能指南,請參閱下列效能指南: