Google Lighthouse已成為許多網站使用單一分數衡量其性能的實際工具：Lighthouse性能得分。 新版本Lighthouse 6.0現已在Chrome Canary，PageSpeed Insights和GSC Console中的NPM上提供。 到7月中旬，Lighthouse 6.0將在Chrome 84中向Chrome用戶全面推出。 現在是時候通過Lighthouse 6.0分數審核確保您的網站已準備好迎接新版本。
Lighthouse 6.0附帶了新的和折舊的度量標準，以及用於計算性能分數的新加權公式。 這一新版本以及在Google Page體驗更新中將核心Web指標添加到Google的排名算法中，都是搜尋巨頭強調可感知的速度—用戶認為頁面載入的速度。 用戶越快地察覺到您的站點載入，您的排名就越高，您將收到的轉換也就越多。
您需要優化的六個燈塔指標
Google關注用戶如何體驗Web。 兩個網站可能會同時完成載入，但根據頁面上的內容顯示方式，其中一個網站的載入速度可能會更快。 雖然兩個網站同時完成載入，但Google會偏愛後者，因為網站的效能更快。
Lighthouse 6.0得分基於六個以用戶爲中心的速度指標的加權平均值。 首款Contentful塗料(FCP)，速度指數(SI)和最大Contentful塗料(LCP)測量感知的負載速度，並在網站6版的Lighthouse分數中保持55％的總重量。 另有40％的分數是基於衡量響應度的指標，這是影響用戶對速度的認知的另一個方面。 其中包括總阻塞時間(TBT)和交互時間(TTI)。 最後5 %的分數是以測量視覺穩定性的指標為基礎，稱為累積版面配置偏移(CLS)。
Lighthouse 5.7得分中的第一個有意義的畫圖(FMP)和第一個CPU空閒(FCI)被更好的度量標準所取代，以便從以用戶為中心的角度測量速度。 這些是Lighthouse 6.0中最大的Contentful Paint (LCP)和Total Blocking Time (TBT)。
| 燈塔5.7號 | 重量 | 燈塔6.0號 | 重量 |
|---|---|---|---|
| 首款Contentful油漆(FCP) | 20% | 首款Contentful油漆(FCP) | 15% |
| 速度指數(SI) | 27% | 速度指數(SI) | 15% |
| 第一個有意義的塗料(FMP) | 7% | 最大Contentful塗料(LCP) | 25% |
| 第一個CPU閒置(FCI) | 13% | 總阻塞時間(TBT) | 25% |
| 交互時間(TTI) | 33% | 交互時間(TTI) | 15% |
| - | - | 累計版面配置偏移(CLS) | 5% |
以下是您審核網站以準備迎接Lighthouse 6.0時要關注的六種速度指標。 度量標準按照頁面載入時的測量順序進行布局。
本文的底部提供了一份簡化的核對表，其中包含了您應致力於交付的速度以及每個指標的優化技術。
第一種Contentful油漆
FCP標記用戶可以在顯示器上看到任何頁面內容的第一個點。 此內容包括文本，圖像，圖形或SVG文件。 FCP在Lighthouse 5.7中的比重為20 %，但僅比Lighthouse 6.0分數占15 %。
在上面的膠片條中，第一頁載入的FCP測量時間為0.6秒。 這是TheTieBar.com的內容首次出現在主頁上，但您會注意到並非所有內容都可見。 這是第一個和最大的內容油漆之間的重要區別。 LCP是在顯示上折內容時0.9秒測量的。
當您進行Lighthouse 6.0分數審核時，請確保您的頁面平均FCP為2秒或更少，因為這是75個百分位的指標閾值，Google認為它很快。 2到4秒之間的FCP被視為中等速度，超過4秒的FCP會降至50個百分點以下，並歸類為慢速。
如果您發現FCP載入速度過慢，可能是以下一個或多個原因造成的：
- 渲染阻止資源過多
- 大型CSS文件
- 缺乏與第三方源站點的安全連接
- 伺服器響應時間長
- 多頁重定向
- 未緩存的靜態資源
- DOM大小過大
要優化FCP，請考慮以下事項：
- 內聯關鍵資源，延遲非關鍵資源並刪除任何未使用的資源，以降低呈現阻止URL的影響。
- 從CSS中刪除所有不必要的字元以縮小文件的大小。
- 使用預連接建立與重要第三方源站的早期連接。
- 通過優化伺服器的應用程式邏輯或升級伺服器硬體以獲得更多記憶體來縮短伺服器響應時間。
- 避免重定向超過1頁。
- 使用HTTP暫存來暫存靜態資源。
- 總共少於1,500個節點，少於32個節點的深度，以及少於60個子節點的父節點以減小DOM大小。
速度指數
SI測量頁面載入的視覺進展，並計算內容繪製速度的整體分數。 在Lighthouse 5.7中，SI的權重比網站的性能得分高27％。 在Lighthouse 6.0中，這種情況半減弱，影響了頁面的15％的性能得分。 谷歌仍然認為這是一個關鍵的感知指標，因為圖像顯示緩慢的頁面可能會被認為是虛偽的。
Lighthouse通過捕獲頁面載入瀏攬器時的影片片段並逐幀分析可視進展來測量SI。 顯示頁面可見部分的平均時間決定SI。 此度量會因裝置螢幕大小而異。
在您進行Lighthouse 6.0分數審計時，請以4.3秒或更少的SI為目標。 這一速度位居75百分位，被谷歌認爲很快。 SIS介於4.3到5.8秒之間的頁面屬於中等大小，低於5.8秒的SIS會降至50百分位以下，被視為慢速。
較慢的SI時間通常來自以下原因：
- 主線程上的加載時間超過4秒
- JavaScript執行時間超過3.5秒
- 大字體文件會導致不可見文本(FOIT)閃爍。
要縮短SI時間，請考慮以下事項：
- 實施代碼拆分，刪除未使用的代碼並壓縮代碼以減少主線程的負載和JavaScript執行時間。
- 確保在Webfont載入過程中文本保持可見，以避免FOIT。
最大的Contentful油漆
LCP是Lighthouse 6.0新增的指標，站點性能分數中的權重為25％。 LCP取代了Lighthouse 5.7的第一個有意義的塗料(FMP)。 儘管這兩種指標都測量最大內容元素的顯示時間，但FMP因產生不一致的結果而聞名遐邇，只能在某些Web瀏攬器中進行標準化。
LCP測量顯示器上最大內容元素完全可見的時間。 測量的內容元素包括塊級元素，圖像(包括SVG文件中的圖像)和影片。 這是電子商務網站極為重要的指標，因為它標誌著大多數用戶認為頁面已滿且更有可能進行購買的時間點。
在上例中，主圖像完全繪製時，LCP爲0.9秒。 此指標捕捉用戶看到頁面已滿載入，但內容仍可能載入到折疊下方的獨特時刻。
像Layer0 (現在是Edgio)上的頂級網站一樣，在不到1秒的時間內交付LCP。 最長達2.5秒的LCP被認為是快速的，並且在該指標的75百分位數中排名。 2.5秒到4秒之間的LCP被視為中等，需要改進，超過4秒的LCP降至50百分位以下，被Google視為緩慢。
慢速LCP通常源於以下一種或多種原因：
- 伺服器響應時間慢
- 渲染阻止JavaScript和CSS
- 資源載入時間長
- 客戶端呈現問題
如果您在Lighthouse 6.0分數審核期間發現LCP速度比所需LCP慢，請考慮以下事項：
- 通過將流量路由到最接近的可用CDN，暫存資產，先暫存HTML頁面，並儘早建立第三方連接，優化伺服器響應時間。
- 通過刪除不必要的CSS，延遲非關鍵CSS和內聯關鍵CSS來減少CSS。 通過壓縮JavaScript文件減少JavaScript阻止時間。
- 要減少資源載入時間，請優化並壓縮圖像和文本文件，並預載入重要資源。
- 使用伺服器端渲染和預渲染優化客戶端渲染。
總阻塞時間
TBT取代了Lighthouse 5.7的FCI，後者過去承載13％的重量。 在Lighthouse 6.0中，TBT測量頁面響應度，並將占性能得分的25％。 TBT測量非交互性頁面在其具有可靠交互性之前的嚴重程度。
您知道這些痛苦的情況：您正在等待頁面載入，最後，它看起來已經準備就緒。 您點擊要查看的產品，但沒有任何反應。 是否再次點擊？ 這段等待時間確實會給消費者帶來壓力。 本質上，TBT是消費者因頁面非交互性而感到壓力的時間長度。
資料來源：web.dev
此度量的測量方法是計算顯示的第一個內容元素(FCP)與用戶可以完全與頁面交互(TTI)之間“阻止”時間(任務花費超過50ms)的總和。 例如，在上圖中，主線程中發生了五個任務，但其中只有三個任務超過50ms。 第一個是200毫秒，第二個是40毫秒，第三個是105毫秒。 TBT為(200 + 40 + 105) 345ms。
超過50毫秒的任務將足以讓用戶注意到頁面緩慢或更糟糕的是處於非活動狀態並導致他們離開。 為避免這種情況，將低於300毫秒的TBT視為快速。300ms到600ms之間的TBT被認為是中等速度，需要改進。 低於600ms的TBT低於50百分位數，被視為慢速。
長時間任務通常由以下一個或多個原因引起：
- 阻止主線程250ms或更長時間的第三方代碼
- JavaScript執行時間超過3.5秒
- 主線程在加載期間佔線時間超過4秒
- 網路請求量大，傳輸量大
要改進此指標，請考慮以下事項：
- 使用腳本標記上的異步或延遲屬性高效載入第三方JavaScript，建立與重要第三方源站的早期連接並使用延遲載入。
- 要加快JavaScript執行速度並減少主線程的負載，請實施代碼拆分，刪除未使用的代碼並壓縮代碼。
- 優化CSS和JavaScript以減少資源計數和傳輸大小。
互動時間
TTI是Lighthouse 5.7的第三個指標，但Google在Lighthouse 6.0中的重量從33 %降至15 %。 TTI是TBT的配套指標，用於測量頁面實現可靠或完全交互所需的時間。 當顯示第一個內容元素，載入其初始腳本(如果有)時，Lighthouse認為頁面具有可靠的交互性，並且它可以在50毫秒內響應用戶輸入。
對於用戶而言，速度緩慢的TTI可能會感覺頁面處於非活動狀態或已損壞。 雖然頁面看起來是交互式的，但實際上並不是因為主線程被阻止(由TBT測量)。 當您審核Lighthouse 6.0的網站時，請在5.2秒或更短的時間內完成TTI，以使其被認為是快速的。 5.2到7.3秒之間的TTI被視為中等速度，而低於7.3秒的TTI被視為慢速，將影響消費者留在現場的意願。
如果您的Lighthouse 6.0分數審核顯示TTI速度較差，則可能是以下一個或多個原因造成的：
- 負載大小較大，腳本解析時間較長
- 資源載入時間長
- 第三方代碼阻止主線程250ms或更長時間
- 關鍵請求鍊
- 降低主線程速度和JavaScript執行時間
- 資源數量高或傳輸量大
通過優化JavaScript可以縮短TTI時間。 這包括：
- 減少並壓縮JavaScript文件以減少有效負載大小和腳本解析時間。
- 預載入請求和/或添加預連接以加快載入時間。
- 通過使用腳本標記上的異步或延遲屬性以及通過使用延遲載入，有效地載入第三方JavaScript。
- 通過減少關鍵資源的數量並優化剩餘資源的加載順序，減少關鍵請求鏈對性能的影響。
- 實施代碼拆分，刪除未使用的代碼並壓縮代碼以減少主線程的負載和JavaScript執行時間。
- 優化CSS和JavaScript以減少資源計數和傳輸大小。
累計布局偏移
CLS是Lighthouse 6.0中引入的第三個新指標，也是唯一不替換Lighthouse 5.7中任何指標的指標。 CLS占Lighthouse 6.0得分的最後5 %，它測量視覺穩定性。
此指標衡量用戶遇到意外布局偏移的頻率。 您以前經歷過這種情況：您即將點擊產品，突然，您點擊頁面上的其他內容，因為元素發生了變化。 這些體驗可能相當煩人，而且對於使用者來說是個怪異的體驗。
CLS是根據頁面整個生命週期內發生的每次意外的版面配置偏移的所有個別版面配置偏移分數總和來衡量的。良好的CLS低於0.1，在性能方面位居75百分位。 介於0.1和0.25之間的CLS被視為中等，任何大於0.25的測量都會降至50百分位以下，Google認為速度較慢。
如果您在Lighthouse 6.0分數審計期間發現CLS質量不佳，則可能是由於以下原因之一：
- 正在自行調整大小的圖像或影片
- 延遲載入且顯示比預期大或小的字體
要改進此指標，請考慮以下事項：
- 在您的圖像和影片元素中包括精確的尺寸
- 避免彈出式廣告或橫幅廣告
- 避免字體導致FOIT/FOUT
Lighthouse分數顯示Google對您網站的看法
頁面的Lighthouse性能得分表明Google對頁面的速度的看法。 Lighthouse 6.0中的每個指標都反映了Google在衡量用戶對速度的看法方面的最佳嘗試。 如果分數低於標準，則會被視為速度緩慢—不僅是用戶，搜尋巨頭本身也會被視為速度緩慢，從而對收入和SEO造成負面影響。
Google在搜尋引擎結果頁面上排名更快，更高。 除了SEO之外，網站速度還會顯著影響轉化率和收入。 例如，亞馬遜發現頁面載入延遲1秒可能會使公司每年損失1.6B美元。
底線
最新版本的Lighthouse演示了搜尋巨頭對感知速度指標的重視。 Lighthouse 6.0中的得分指標嘗試衡量訪客對您的頁面完全載入的速度(即使它仍在後臺執行進程)。
第一個Contentful Paint，速度指數和最大Contentful Paint這三個指標測量了感知的負載速度，占您的性能分數的55％。 目標是FCP為2秒，LCP為2.5秒，SI為4.3秒或更短。
另外40％的性能得分是基於測量頁面響應速度的感知指標。 其中包括總阻塞時間和交互時間。 快速的Lighthouse 6.0分數審核將在300毫秒內顯示TBT，在5.2秒內顯示TTI，否則用戶將認為您的站點是虛幻的。
最後，沒有人喜歡文字或圖像跳進和跳出顯示器。 累計布局偏移是Lighthouse 6.0審計中要考慮的第六個指標。 以CLS測量值低於0.1爲目標，您將獲得性能分數中所佔權重的5％。
要獲得一份簡單的核對表，其中包含您在Lighthouse 6.0 Score審核中應努力實現的速度以及每個指標的優化技術，請填寫下表。
