簡介
自2020年5月推出以來，Google的Core Web Vitals (CWV)套件已成為衡量網站性能的重要指標。 由於Google將這些值視為其頁面排名算法的一部分，從CWV角度來看，最大化您網站的性能不僅可以增強用戶的體驗，而且還可以提高您的搜尋引擎排名。 本文將探討有助於提高頁面分數，提高用戶滿意度和提高利潤的提示和技巧。
什麼是核心Web生命體徵？
像許多其他技術一樣，Google的Web Vitals是由三個字母組成的縮寫詞組成的，每個縮寫詞都代表了網站性能的一些可衡量的方面。 要設定階段，讓我們定義三個定義核心Web生命體徵的關鍵指標：
最大的Contentful油漆
最大內容油漆(LCP)：通過關注折疊上方可見內容載入所需的時間來測量感知的載入速度。 為了提供理想的用戶體驗，應在頁面載入時間線的2.5秒內觸發LCP。
第一個輸入延遲
首次輸入延遲(FID)：通過測量用戶操作與頁面響應之間的延遲來測量頁面響應。 要提供理想的用戶體驗，頁面的FID應不超過100毫秒。
累計布局偏移
累計版面配置偏移(CLS)：使用頁面配置偏移的複合測量來測量視覺穩定性。 為了提供理想的用戶體驗，頁面應保持CLS為0.1或更少；0.1到0.25之間的所有項目都被視為中等，大於0.25則較差。
…它們為什麼重要？
對於許多企業而言，網站性能與業務成功有直接關聯。 研究表明，通過CWV分數的網站與不通過CWV分數的網頁相比，在搜尋結果中的可見性可提高多達37％(BEUS)；提高CWV分數可以提高每個訪問者的收入和轉換率(Duong等人)。
使用時 阿基拉Edgio是一家女性時裝精品店，能夠改進網站的CWV，將第一頁載入時間從5秒提高到~1秒，改進了CWV測量，最終實現了30％的有機流量增長，61％的結帳啟動速度提高，轉換率提高了37％。
簡而言之，速度更快的網站可提高SEO排名並提高用戶滿意度–特別是在電子商務網站環境中；這些因素結合起來可降低跳出率並提高轉化率。
那麼，我們如何才能改進這些功能？
第一個輸入延遲
讓我們先從一個容易引起注意的結果開始：第一個輸入延遲。 好消息是網站通過FID分數的頻率較高，這一點很值得一看！ 但是，如果情況並非如此，通常情況下，問題在於網站生命週期早期載入的第三方腳本，這些腳本可能阻止接收用戶輸入所需的主線程執行。 捕獲錯誤和執行顯示器錄製的工具是額外審查的主要候選工具。
事實上，任何阻止主執行線程的內容都可能導致FID性能低下。 密切關注資源密集型或長時間執行的JavaScript任務，並考慮將非UI相關代碼重構給Web工作者，以及使用延遲載入和代碼拆分技術來確保僅載入所需的JavaScript並且僅在需要時載入。
此外，雖然從技術上講不是CWV的核心元素，但值得一提的是另一個相關指標：與下一個塗料的互動(INP)。 INP測量與頁面交互到反映該交互的後續頁面更新之間的時間。 雖然INP和FID都測量整體頁面響應速度，但INP關注所有頁面交互，而不是首次交互，旨在確保頁面在整個會話中保持響應，而不僅僅是前期交互。 INP跟蹤用戶體驗中最差的交互性能，並將其報告至關鍵。 很有可能，INP很快就會取代FID來衡量頁面響應度，因此值得關注。
最大的Contentful油漆
對於頁面性能來說，最重要和最有影響力的指標是LCP。 在某種程度上可以預測，最大的Contentful Paint最常見的示例是“英雄”圖像，即大圖像或視頻，通常佔據“摺疊”上方視口的完整寬度。 儘管優化此元素的技術與任何其他頁面資源相同，但該資源渲染所需的時間是最重要的，因爲這是用戶將體驗到的第一個主要元素。
在隊列中等待
分解LCP元素的請求計時對於優化其性能非常有用。 瀏攬器發出的任何請求都以隊列開頭。 隊列中花費的每毫秒LCP請求都是一毫秒，這將導致LCP得分，因此，如果您發現這些元素在瀏攬器隊列中花費了不成比例的時間，請調查在隊列之前請求的內容及其原因，並採取步驟確定LCP資源的優先級。 也許資源低於FOLD，或者其他腳本可能延遲載入或延遲。 操作順序是關鍵。
正在等待伺服器
啟動網路請求後，瀏攬器客戶端必須等待伺服器接收，處理和響應該請求。 此度量稱為第一個位元組時間(TTFB)。 如果伺服器響應請求的速度緩慢，您的LCP分數將會降低。 在這方面，CDN可以顯著提高速度，因為CDN可以將資源的暫存副本保存在靠近最終用戶的地理位置的位置，並比單個應用程式伺服器更快地使用該資源做出響應。 使用CDN的其他優點包括內置安全WAF和響應大型流量高峰的能力。 如果您想要速度，您應該使用CDN。
寬線上
到目前為止，希望瀏攬器在頁面生命週期的早期就會請求LCP資源，並且伺服器應該能夠快速響應這些資源。 下一個要考慮的元素是所請求資源的總體大小。 每個位元組必須“通過網路”傳輸到瀏攬器將花費一些時間，其中的位元組越多，完成請求所需的時間就越長。 因此，應注意確保資源儘量減少，以儘量減少轉移資源的時間。 這可能包括使用第三方映像優化和託管服務(如kraken.io或imgix.com)，它們可以優化和提供“NextGen”格式(如WebP)的媒體文件，從而進一步減小文件的大小。
幫助瀏攬器退出
除了大小優化之外，請考慮使用<圖片>標籤，這將使瀏攬器能夠更智能地選擇合適的資源來請求設備。 桌面瀏攬器可能會有大量顯示器空間來顯示更高解析度的圖像；但是，這些相同的資源會使顯示器較小的移動設備陷入困境。 使用優化的資源和CSS媒體查詢，您可以確保瀏覽器爲其設備類型請求正確的資源，並減少將字節從服務器傳輸到客戶端所花費的時間。
此外，您還可以通過要求瀏攬器預裝LCP資源並指定獲取優先級來幫助瀏攬器。 這些資訊將為瀏攬器提供線索，使其優先排序關鍵資源，優先於不太重要的資源。 內容進入瀏攬器的速度越快，呈現的速度就越快，LCP發生的速度就越快，越好。
累計布局偏移
我們一直看到這一點。 將瀏覽器發送出去以獲取網站後，頁面開始加載；當頁面構建時，您會看到您感興趣的內容，並在整個頁面突然移動時單擊它，而您以為要點擊的鏈接突然出現在其他地方！ 這種現象稱爲佈局偏移。 這對每個人都是很煩人的，通常是自我造成的，我們應該為了人類的利益儘量減少這種現象。
通常的嫌疑犯
CLS分數較高的典型錯誤有：
- 粘滯標題
- 已載入並呈現客戶端的促銷或“英雄”橫幅
- 電子報，優惠券和GPDR通知
- 動態插入到頁面中的其他第三方集成
設定一些邊界
還記得<>我們在討論LCP時提到的圖片元素嗎？ 不要忘記為其中包含的各種元素添加尺寸。 在引導瀏攬器了解如何呈現這些元素時，忽略這些值將使您脫離駕駛員的權限。 通過定義尺寸，瀏攬器可以保留正確的空間量，以便在其中繪製圖像，從而減少位移。
對於任何可能動態添加到頁面的內容，也是如此。 廣告，<iframe>或其他動態添加的內容可以對CLS產生影響。 通過提前為這些項目預留空間，頁面內容的偏移量將會減少。 此外，請避免在現有頁面內容上方添加內容，因為這會導致整個頁面在下方移動。
幫助瀏攬器提前劃分空間將減少CLS，但可能會犧牲整體用戶體驗，因為用戶等待空白頁面的這些部分填充有用的內容。 作爲中間點，實施元素加載框架可能是一種有用的技術，可以讓用戶瞭解更多內容，從而給人一種更快體驗的感覺，而瀏覽器則會執行其他繁重的任務來協調其他頁面內容。 更重要的是，可以而且應該使用CSS動畫而不是動畫GIF來實施這些操作，這意味著只需使用幾行CSS就可以在整個網站上實施此技術。
總結
從表面上看，Core Web Vitas可能看起來像Google在搜尋結果中確定頁面排名的最新算法—在某種程度上，這可能是正確的。 但是，除此之外，核心Web生命體徵代表了一個更具體的框架，用於衡量頁面性能，並建立基準來描述與用戶體驗有關的重要事項。 上述技術雖然不是詳盡無遺的，但應能幫助您排除故障並優化您的網站性能，從而改善用戶體驗，頁面排名和收入。
