Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

關鍵請求鏈

爲什麼說此審查非常重要

關鍵請求鏈這個概念源自關鍵渲染路徑 (CRP) 優化策略。 CRP 通過確定優先加載的資源以及加載順序,允許瀏覽器儘可能快地加載頁面。

請參閱關鍵渲染路徑文檔瞭解詳情。

如何通過此審查

目前,此審查不採用“通過”或“未通過”這種結構。其提供的信息讓您有機會改進您的應用的頁面加載性能。

在 Lighthouse 的 Chrome 擴展程序版本中,您的報告將生成一個類似如下的圖表:

Initial navigation
|---lighthouse/ (developers.google.com)
    |---/css (fonts.googleapis.com) - 1058.34ms, 72.80KB
    |---css/devsite-googler-buttons.css (developers.google.com) - 1147.25ms, 70.77KB
    |---jsi18n/ (developers.google.com) - 1155.12ms, 71.20KB
    |---css/devsite-google-blue.css (developers.google.com) - 2034.57ms, 85.83KB
    |---2.2.0/jquery.min.js (ajax.googleapis.com) - 2699.55ms, 99.92KB
    |---contributors/kaycebasques.jpg (developers.google.com) - 2841.54ms, 84.74KB
    |---MC30SXJEli4/photo.jpg (lh3.googleusercontent.com) - 3200.39ms, 73.59KB

此圖表表示頁面的關鍵請求鏈。從 lighthouse//css 的路徑形成一條鏈。 從 lighthouse/css/devsite-googler-buttons.css 的路徑形成另一條鏈。 以此類推。審查的最高得分體現了這些鏈條的數量。 例如,上面的圖表的“分數”爲七分。

該圖表也詳細列出下載每個資源花了多少時間,以及下載每個資源所需的字節數。

您可以根據此圖表利用以下方式提升您的 CRP:

  • 將關鍵資源數降至最低:消除關鍵資源、延遲關鍵資源的下載並將它們標記爲不同步等。

  • 優化關鍵字節數以縮短下載時間(往返次數)。

  • 優化其餘關鍵資源的加載順序:儘早下載所有關鍵資產,以縮短關鍵路徑長度。

優化以上任一因素都可提升頁面加載速度。

如何實現此審查

本部分介紹如何實現此審查,以便您可以瞭解計算此審查得分的方式。

Lighthouse 使用網絡優先級作爲代理以識別阻塞渲染的關鍵資源。 有關 Chrome 如何定義這些優先級的更多信息,請參閱 Chrome 資源優先級和調度

可通過 Chrome Debugger Protocol 提取有關關鍵請求鏈、資源大小和下載資源所花時間的數據。