• 主頁
  • 文章
  • SEO
  • Core Web Vitals：識別性能瓶頸的 7 種工具和技術

Core Web Vitals：識別性能瓶頸的 7 種工具和技術

已發表: 2021-07-19

Core Web Vitals (CWV) 是目前的熱門話題。 在這裡，我們將介紹一些可以用來幫助識別網站性能問題的工具，為 Google 即將於 2021 年 5 月進行的排名更新做準備。

需要復習 Core Web Vitals 嗎？ 在我的 Core Web Vitals Explained 文章中了解它們是什麼以及如何針對它們進行優化。

自動監控 CWV 指標

如果您有多個網站或關鍵頁面想要隨著時間的推移進行監控，而無需在測試後手動運行測試，那麼 Digital Inspiration 的這個電子表格可能適合您。 只需獲取 Lighthouse PageSpeed API 密鑰，插入一些 URL 即可！

該電子表格有助於識別圍繞關鍵 CWV 指標的潛在性能問題以及它們可能發生的時間，這反過來又可以為我們提供可能是什麼原因的線索。 它還可以用來演示速度分數如何隨著網站的發展而隨時間自然變化，或者當對基礎頁面速度算法進行更改時。

幾個月來，我們一直在使用此電子表格的修改版本，它幫助我們發現了改進許多網站性能的機會。

Hallam 自動化核心 Web Vitals

PageSpeed 洞察力

Google 的 PageSpeed Insights 是我對移動和桌面設備的性能和 CWV 相關問題進行初步、頂級調查的首選工具。 報告包含“現場數據”； 真實世界的用戶如何體驗網站以及模擬頁面加載的 Lighthouse“實驗室”數據，這對於可重複和一致的測試非常有用。

核心 Web Vital 指標通過簡單的顏色編碼指標清楚地突出顯示。 差的指標用紅色突出顯示，好的用綠色突出顯示。 這些指標結合起來給出總體速度分數，您需要 90% 或更多才能獲得綠色“通過”。

這些報告中還給出了一系列建議和診斷，按照可節省的總秒數按影響最大的項目排序。

PageSpeed Insights 示例

Chrome DevTools 性能監視器

為了更詳細地分析性能和 CWV 相關問題，我經常求助於 DevTools 中的 Chrome 性能監視器，我使用的一些關鍵 CWV 指標在下面的屏幕截圖中編號。

  1. 首先，您需要確保以正確的分辨率運行性能監視器，因為 LCP 和 CLS 元素通常會在不同的分辨率下發生變化。 我將我的設置為 350 x 636 像素以復制 PageSpeed Insights 移動視圖。
  2. 在運行報告之前，您可能還想模擬移動設備的連接性和功率。 我經常選擇快速 3g 和 4x CPU 減速。
  3. 生成報告後選擇 LCP 指標可確定最大的元素是什麼。 這應該盡可能接近 FCP（首次內容繪製）。 如果存在差距，您將需要識別並簡化最大元素的交付。
  4. 長 CPU 任務由灰色條上的紅色對角線突出顯示。 這通常是由較重的 JavaScript 引起的，由黃色條表示，並且會影響您的交互指標（FID、TBT 和 TTI）。 向下鑽取下面的條形通常會指向有問題的 JavaScript 文件和函數。
  5. 佈局移位由這些紅色條突出顯示，選擇它們通常會突出顯示已移位的元素。 大量這些將產生更高的 CLS 值。
  6. 框架視圖是一種很好的方式，可以直觀地突出顯示內容的顯示方式和佈局在加載時如何移動。對於高 CLS 值，通常從框架中可以明顯看出原因是什麼。 在這個例子中，一個大的 cookie 橫幅會導致佈局隨著內容的下推而發生變化。

Web Vitals Chrome 擴展程序

核心 SERP 指標

SERP Vitals 擴展直接在搜索結果中顯示 LCP、FID 和 CLS 指標的方便指標。 它非常適合分析競爭對手，並且可以在您訪問網頁之前快速顯示網頁的運行速度。

Chrome 用戶體驗報告 (CrUX) 從真實用戶匿名收集數據。 但是，它並非適用於每個站點，因為新站點或流量很少的站點將無法獲得足夠的數據點。
核心 SERPs Vitals Chrome 擴展

網絡生活

方便的 Web Vitals 擴展實時測量 Chrome 中桌面用戶的 3 個關鍵 CWV 指標，它的交通燈顏色在您瀏覽網站時提供了一個快速指示器。 由於它不依賴於外部收集的用戶數據，因此對於在本地環境中工作的開發人員及早發現任何問題非常有用。
Web Vitals 擴展示例

燈塔

Lighthouse Extensions 提供了一條快速路線，可以訪問 Chrome DevTools 中可用的相同報告功能，並使用 Lighthouse API 提取實驗室數據，而不是通過 CrUX 來自真實世界用戶的現場數據。

性能報告與 PageSpeed Insights 移動分析非常相似，提供類似的診斷和建議。 還會為 SEO、輔助功能和最佳實踐生成其他報告。

燈塔擴展性能報告

Treo 站點速度可視化器

https://treo.sh/sitespeed 上的可視化工具顯示隨時間變化的 CWV 指標，可按設備、連接性和地理區域進行過濾。 它每週更新一次，並使用 CrUX 報告中的數據。

在下面 bbc.co.uk 的示例中，我們可以看到 CLS 指標在最近 3 個月內如何顯著下降，所有核心指標均獲得綠色“通過”結果。 這是分析 CWV 指標隨時間推移的性能或進行競爭對手分析的好方法。

Treo 網站速度報告

可視化第三方請求

FID、TTI 和 TBT 的交互性指標通常很難排除故障。 PageSpeed Insights 在識別一些最重的第三方腳本方面很有用，但有時一個不錯的可視化可以更容易地傳達這些腳本的影響。

請求映射工具 https://requestmap.herokuapp.com/ 對此非常有用。 生成的映射包含每個第三方請求的節點，較大的節點表示影響較大的腳本。 如果您的交互性指標很差，您很可能會在這張地圖上看到很多節點。

下面是一個站點的示例，該站點的“可交互時間”TTI 指標高達 26 秒。 快速瀏覽地圖會顯示一個實時聊天小部件，由頂部的眾多深藍色節點表示，佔請求總數的一半以上。

請求映射工具也是確定從何處加載腳本或其他資產的好方法。 在本例中，我們可以在下面看到幾個直接來自黃色 Google 標籤管理器節點的節點。

重腳本的請求映射

WebPageTest 中的瀑布

WebPageTest 報告提供比 PageSpeed Insights 更詳細的信息，並且可以從各種設備和位置生成。

我經常使用這個工具進行瀑布分析，它可以將頁面上所有資產的加載順序可視化。 這在嘗試簡化關鍵的“首屏”內容時特別有用。 例如，如果您正在優化 LCP，並且折疊上方最大的元素是圖像或排版，您可能希望對最大的圖像和字體文件實施預加載，並檢查這些預加載的資源是否出現在瀑布的頂部. 網頁測試瀑布

不確定 CWV 將如何影響您的網站，請立即聯繫我們。