Core Web Vitals：它們是什麼以及如何測試它們？
已發表: 2020-09-18最後更新於 2020 年 9 月 17 日
任何經營網站的人都知道讓網站盡可能順利地運行是多麼重要。 落後、結構不良的網站無法傳達出一種可信賴感和可信度。 普通網絡用戶需要有這種感覺，才能感到足夠舒適以使用您的網站。 為了更好地幫助您和世界各地的 Web 開發人員改進他們的網站，Google 最近發布了 Core Web Vitals。 這是一個新程序，它提供了一系列指標來幫助確定網站的質量和潛在用戶體驗。 在本文中，我們將分解主要指標或 Web Vitals，以及如何測試它們以確定您的網站的狀況。
什麼是主要的網絡生命力？
在確定站點提供的服務質量時，必須查看一些指標以形成清晰的畫面。 谷歌已經為普通網絡開發人員縮小了範圍。 他們已經確定三個指標是可以評估網站的主要組成部分。 這三個指標是最大內容繪製 (LCP)、首次輸入延遲 (FID) 和累積佈局偏移 (CLS)。
谷歌認為核心網絡生命力是用戶體驗的脊梁。 點擊推文
Largest Contentful Paint是衡量網頁加載速度的指標。 它標誌著已測量相關頁面的主要內容的點。 這是衡量頁面上最大的文本（或圖像）塊加載所需的時間。 通常，您希望網站上最大的內容繪畫的加載時間不超過 2.5 秒。 當然，這是網頁設計中值得考慮的一點。
首次輸入延遲衡量您的網站在用戶與頁面交互時的行為方式。 這涉及諸如響應能力之類的事情。 每當用戶點擊您的頁面時，網站響應該點擊所花費的時間是通過第一次輸入延遲來衡量的。 通常，任何快於 100 毫秒的東西都是好的，但在那之後，你會想要做一些改進。
最後， Cumulative Layout Shift測量頁面上視覺效果的穩定性。 它是對頁面意外佈局偏移量的可量化度量。 對於這三個指標中的每一個，您都希望達到所有頁面加載的第 75 個百分位或更高。 就這些指標而言，這將被視為“通過”。
如何衡量核心網絡生命力？
我們已經確定這些指標與執行良好的SEO 活動一樣重要，那麼它們是如何衡量的呢？ 由於 Google 將核心網絡生命力視為用戶體驗的脊梁，因此他們致力於提供衡量它們的工具。 以下是衡量其網站核心 Web Vitals 性能的三種方法。
通過 Chrome 用戶體驗報告，谷歌收集了每個核心網絡重要的匿名真實用戶體驗。 這很有用，因為這意味著不需要預先設置外部應用程序。 事實上，谷歌已經提前處理好了。 此外，PageSpeed Insights 等工具在同一平台上運行，這意味著您可以立即使用它們。
雖然這種方法相當簡單，幾乎不需要你的輸入，但這種方法提供的分析並不是很詳細。 它忽略了包括每頁瀏覽遙測等。 這將幫助某人準確診斷網頁的任何潛在問題。
使用 JavaScript
或者，可以使用 JavaScript 來處理核心 Web Vitals。 最簡單的入門方法是簡單地在其庫中為 web-vitals 提取 JavaScript 的條目。 這提供了準確的即用型 Web API。 此外，Chrome 網上應用店提供了一個名為Web Vitals Chrome Extension的擴展程序，它允許您報告每個網絡生命體徵，而無需編寫任何代碼。
最後，可以使用實驗室工具來測量每個核心網絡生命力。 這對於那些希望在網站啟動之前了解其性能的人特別有用。 然而，這並不意味著可以忽略現場指標。 用戶體驗受到多種因素的影響。 示例包括網絡條件和可能在用戶端運行的其他程序。 因此，一旦您的站點啟動並運行，利用現場工具測試對您最有利。 這是確保一切井井有條的簡單方法。
其他要了解的指標
雖然涵蓋的核心網絡生命力是最重要的考慮因素，但還有其他有價值的網絡質量指標需要考慮。 畢竟，任何對網站性能和客戶享受網站的改進都是可取的。 這些措施通常有助於微調網頁的診斷。 其中一些措施包括諸如 Time to First Byte 這對您網站上的用戶的加載體驗很重要，以及 Time to Interactive，如果您遇到網站上的交互性問題，這將很有幫助。 兩者雖然重要，但不可現場測量，因此，它們的地位與主要的核心網絡生命力不同。
燈塔 6.0 怎麼了？
如果您有興趣評估網站的質量，如果您正在尋找快速診斷，那麼可以幫助您入門的一種工具是 Lighthouse。 這個審計程序是自動化的，它在 Chrome DevTools 中既可以作為 Chrome 商店提供的擴展程序，也可以作為節點模塊和 CLI 使用。
最新版本的 Lighthouse 融合了 Google 對 FDI 和 CLS 等核心網絡生命力指標的重視，並評估了您的網站在這些指標方面的表現。 現在，Lighthouse 提供的關於您網站的性能分數已更新為包含這些新模型，這意味著舊的加權模型現在已調整為如下所示：
| 階段 | 指標名稱 | 公制重量 |
|---|---|---|
| 早期 (15%) | 首次內容繪製 (FCP) | 15% |
| 中 (40%) | 速度指數 (SI) | 15% |
| 最大含量塗料 (LCP) | 25% | |
| 遲到 (15%) | 互動時間 (TTI) | 15% |
| 主線程 (25%) | 總阻塞時間 (TBT) | 25% |
| 可預測性 (5%) | 累積版式偏移 (CLS) | 5% |
這些新變化對網站的績效評估產生了切實的影響。 只有 20% 的站點的評估分數有所提高，而在新實施的加權量表中，大約 50% 的站點的分數下降了 5 分或更多。
Chrome 開發者工具
Chrome DevTools 與 Lighthouse 一樣，也經歷了一些新的變化，以更好地為 Web 開發人員服務。 這些更改中最主要的是修復了問題選項卡，該選項卡在之前的迭代中經常出現問題和混亂。 此外，性能面板現在會在記錄您的負載性能後在頁面底部記錄總阻塞時間。 該工具測量頁面看起來正常運行但實際上由於 JavaScript 阻塞主線程而實際上不可用的時間，從而阻止頁面對用戶輸入進行操作。 最後，Chrome UX 儀表板現在按內容網絡生命力細分頁面，允許用戶將其網站的性能與其競爭對手以及整個行業的性能進行比較。
簡而言之，Core Web Vitals 是衡量網頁用戶體驗的指標。 隨著事情的發展，它可能會以微小和重大的方式發生變化。 當您優化您的網頁時，請盡量保持健康的核心網絡生命力，您一定會讓那些光顧您網站的人感到滿意。