總封鎖時間 (TBT)

什麼是 TBT?

總封鎖時間 (TBT) 指標會測量首次顯示內容所需時間 (FCP) 後,主執行緒長時間遭到封鎖,以免造成輸入內容的回應。

根據預設,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) 的研究室工具已採用 TBT 評估標準,直到 TTI 發展穩定為止,這類工具有助於量化網頁非互動網頁的嚴重程度。不過,系統還會在網頁載入後繼續評估,甚至在 TTI 以外 (例如 Lighthouse 時間範圍模式) 進行評估。

如果主要執行緒沒有長時間工作至少五秒, TTI 就會將網頁視為「可互動」。也就是說,在超過 10 秒內,擴散 3 (51 毫秒) 的 3 (51 毫秒) 工作就可能將 TTI 推回 10 秒,但這對於使用者嘗試與網頁互動的情形,卻會截然不同。

在第一個案例中,有 3 個 51 毫秒的工作,時間待定為 3 毫秒;而時間長達 10 秒的單一工作,則會有 9950 毫秒的 TBT。第二種情況中的較大的 TBT 值能夠量化不良體驗。

此範例說明為何 TBT 比 TTI 通常更佳,因為後者較不容易發生離群值。如果使用 TTI 做為 TBT 的端點,這種情況也是如此。

如何測量待定

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

研究室工具

TBT 分數代表什麼?

為了提供良好的使用者體驗,當網站在一般行動硬體上進行測試時,應力求讓總封鎖時間低於 200 毫秒

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

如何改善 TBT

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

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