Google最近發布了一篇文章Web.dev 作為量化用戶體驗(UX)的衡量標準和改進的機會。任何對網站進行優化以與谷歌建議保持一致的人都會知道，在關注什么的問題上，很難得到一致的方向。WebVitals是一種消除這種模糊性的努力，需要遵循一組最佳實踐。網站所有者應該優化分數，并隨著時間的推移對其進行監控，以確保它們保持在建議的閾值之上。
什么是萬維網？
頁面大小、
網絡營銷、服務器位置、壓縮等數百個因素都會影響網頁的加載方式。不可能對每一個指標都有好的分數，而選擇重點關注的項目是一個挑戰，因為不清楚哪些指標具有更大的權重。
谷歌有多種工具可以幫助網站管理員做出這些決定，比如PageSpeedInsight、燈塔、ChromeUX報告、搜索控制臺、ChromeDev工具和WebPagetest。然而，隨著時間的推移，它們的演變不同，它們以不同的方式報告事物。
例如，PageSpeedInsight提供了1-100的性能分數，而TestMySite將性能報告為加載時間(以秒為單位)，因此無法對這些考試進行比較。
WebVitals是這個問題的解決方案--對測量UX最重要的三個指標
最大含量涂料(LCP)
第一輸入延遲(FID)
累積布局移位(CLS)
它們被復制到許多Google工具上，并提供了一個網站的用戶體驗和性能的統一視圖。
Core Web Vitals
WebVitals的一個關鍵方面是，雖然它們只是三個度量標準，但它們代表了與UX和性能相關的更廣泛的類別。例如，LCP是在屏幕上繪制最大元素所需的時間。如果您獲得了一個好的LCP評分，那么可以安全地假設LCP事件之前的其他性能指標是優化的。這是網絡生命之美，我們將在下面更詳細地討論每一個。
最大含量涂料(LCP)
最大含量的油漆是一種性能衡量。它代表在屏幕上呈現最大和最有意義的元素的時刻，以及頁面準備好供用戶交互的時刻。一個好的分數是2.5秒在移動和桌面。
Largest Contentful Paint
優化
實現良好的LCP得分可以通過遵循通常的最佳做法來實現：
確保服務器響應時間快，且位置接近用戶。
使用cdn從邊緣服務器提供靜態內容。
緩存不經常更改的內容
通過縮小、內襯關鍵CSS和推遲其余的CSS來優化CSS
盡可能使用JavaScript限制客戶端呈現。
在需要JavaScript的地方，通過縮小、內聯關鍵的JS和推遲其余的傳遞來優化交付
壓縮圖像
第一輸入延遲(FID)
第一輸入延遲是一種反應性測量。它測量在用戶與頁面交互之后頁面響應所需的時間。點擊一個頁面，在回復之前得到延遲是一個非常令人沮喪的體驗。FID將此過程量化，并將閾值設置為小于100 ms。
優化
對FID影響最大的是客戶端JavaScript執行，因為如果瀏覽器忙于處理主線程上的代碼，則無法響應事件。前端的一些JavaScript是無法避免的，但是有幾種技術可以確保高效的交付：
縮小和壓縮JavaScript文件
延遲具有異步或延遲屬性的非關鍵JavaScript
盡可能簡化代碼，從而縮短總體執行時間。
使用代碼拆分(只在需要JavaScript時使用JavaScript，而不是為整個站點提供一個app.js文件)
累積布局移位(CLS)
累積布局移位測量視覺穩定性。這是一個新的度量標準，用來衡量頁面在加載后移動或移動的程度。如果您曾經嘗試單擊某些內容，但是當您的手指按下按鈕時頁面移動時，您將熟悉UX有多糟糕，因為它迫使您找到元素并再次嘗試單擊。更糟糕的是，當您嘗試單擊時，頁面移動會導致您單擊其他內容。
Cumulative Layout Shift
圖片由web.dev提供
在上面的圖片中，假設您開始閱讀第一行，只是為了讓它跳下屏幕。這是累積布局移位，谷歌建議CLS得分低于0.1，以達到良好的狀態。
優化
CLS易于優化。通過以下提示：
頁面加載后限制動態內容注入
如果需要動態內容注入，請在外部div上設置尺寸。
在圖像上設置尺寸(寬度和高度)，以便瀏覽器在圖像加載時保留空間。
在廣告和嵌入物上設置尺寸
避免使用加載后替換默認字體的Web字體
為什么萬維網很重要
Vitals是Google的一個創舉，所以在評估站點的UX時，他們很可能會使用Vitals分數作為他們的決定的一個因素。如果谷歌認為你的網站表現良好，他們會看好它，這可能會導致在搜索引擎結果頁面(Serps)的積極結果。
生命指標很重要，因為它們代表了影響站點上的UX的更廣泛的度量標準。要想獲得良好的WebVitals分數，許多其他關鍵的性能指標都需要有良好的成績，這樣如果您的網站處于綠色區域，那么您的網站總體上將是健康的。
如果您對Google現在在WebVitals上的重要性有任何疑問，只需訪問WebVitals主頁，您就會看到‘健康站點的基本指標。
監控分數
了解維塔爾斯和優化得分只是戰斗的一半。你需要通過定期檢查來確保分數保持良好。最簡單的方法是經常將URL粘貼到PageSpeedInsight中，或者在搜索控制臺中查看高級數據。這兩種方法都讓你承擔責任，所以如果你忘了檢查，分數可能會在一段時間內很低。
如果你想要自動定期的更新，PageSpeedPlus跟蹤網頁速度和網頁Vitals分數的基礎上，每小時。它會在一段時間內記錄這些信息，并在它們下降時發送警報。這是非常容易設置和幫助監測您的Vitals分數在一個頁面的水平，以便您可以確切地看到您的網站上的每一頁是如何得分。
然而，從一開始就阻止它們掉落，而不是在它們運行后進行修復，將對您的搜索存在產生更大的整體影響。如果你在一個組織工作，PageSpeedandWebVitals分數應該被視為跨團隊的努力。要將用戶體驗置于所有決策的核心位置，你應該讓所有涉眾都能看到這些報告。這將有助于協調開發、設計、SEO和營銷團隊，并減少一些對分數產生負面影響的事情發生的可能性。
結語
WebVitals是Google計算UX的一個令人耳目一新的變化?，F在，在他們的所有工具中獲得一致的建議，并知道在網站上更改什么以與他們的建議保持一致變得更加容易了。很明顯，Google非常重視WebVitals，所以如果你想提高你的搜索水平，你應該關注它們。希望本指南將幫助您開始并設置監視，以跟蹤分數隨著時間的推移。
