總封鎖時間
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
總封鎖時間 (TBT) 是 Lighthouse 報告「效能」部分追蹤的指標之一。每項指標都會擷取網頁載入速度的部分資訊。
Lighthouse 報告會以毫秒為單位顯示 TBT:
TBT 評估範圍
TBT 會測量網頁無法回應使用者輸入內容的總時間長度,例如滑鼠點擊、螢幕輕觸或鍵盤按下。計算方式是在「首次顯示內容所需時間」和「互動時間」之間,將所有「長時間工作」中的「區塊」部分相加。凡是執行超過 50 毫秒的工作,都屬於長時間的工作。50 毫秒後的時間長度為封鎖部分。舉例來說,如果 Lighthouse 偵測到長度為 70 毫秒的工作,封鎖部分就會是 20 毫秒。
Lighthouse 如何決定你的 TBT 分數
待定分數是指網頁在行動裝置上載入的時間 (TBT) 和數百萬個實際網站數 (TBT)。如要瞭解 Lighthouse 分數門檻的設定方式,請參閱如何判定指標分數。
下表顯示如何解讀 TBT 分數:
TBT 時間 (以毫秒為單位) |
顏色標記 |
0 至 200 人 |
綠色 (快) |
200-600 |
橘色 (中等) |
超過 600 |
紅色 (慢) |
如何提高 TBT 分數
請參閱這篇文章,瞭解如何使用 Chrome 開發人員工具的「效能」面板診斷長時間工作的根本原因。
一般而言,長時間工作最常見的原因為:
- 載入、剖析或執行不必要的 JavaScript。透過「Performance」(效能) 面板分析程式碼時,您可能會發現主執行緒正在執行作業,並不需要載入網頁。使用程式碼分割來減少 JavaScript 酬載、移除未使用的程式碼或有效率地載入第三方 JavaScript,應該就能提高您的 TBT 分數。
- 效率不佳的 JavaScript 陳述式。舉例來說,假設您在「效能」面板中分析程式碼後,看到傳回 2000 個節點的
document.querySelectorAll('a')
呼叫。重構程式碼以使用更具體的選取器,只傳回 10 個節點,您的 TBT 分數應該會有所提升。
除非您有特別關注特定指標的理由,否則最好著重於改善整體效能分數。
使用 Lighthouse 報表的「商機」部分,判斷哪些改善項目為您的網頁帶來最多價值。商機越大,對效能分數的影響就越大。例如,下方的 Lighthouse 螢幕截圖顯示移除會封鎖轉譯資源將產生最大的改善效果:
請參閱效能稽核到達網頁,瞭解如何處理 Lighthouse 報告指出的商機。
資源
除非另有註明,否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權,程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間:2019-10-09 (世界標準時間)。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"缺少我需要的資訊"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"過於複雜/步驟過多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"過時"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻譯問題"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/程式碼問題"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"容易理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"確實解決了我的問題"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]
{"lastModified": "\u4e0a\u6b21\u66f4\u65b0\u6642\u9593\uff1a2019-10-09 (\u4e16\u754c\u6a19\u6e96\u6642\u9593)\u3002"}
[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間:2019-10-09 (世界標準時間)。"]]