想像一下：你正在載入一個網站，它看起來已經準備好了。您單擊博客特色圖片閱讀文章，突然整個頁面都發生了變化，因為剛剛載入了其他內容。然後您單擊完全不同的內容並載入一個您從未想過的頁面。如果您自己遇到過這個問題，就會知道累積布局偏移 (CLS) 如何對站點的用戶體驗 (UX)產生負面影響。
累積布局偏移是頁面布局在載入時發生多少偏移的術語，在本文中，我們將深入探討它的含義。我們將向您展示如何衡量 CLS，並解釋什麼是好分數。然後我們將討論如何優化您網站的 CLS 分數。讓我們開始工作吧！
什麼是累積布局偏移 (CLS)？
沒有比視覺示例更好的方法來說明高 CLS 分數（意味著來自 Google 的PageSpeed Insights 的任何超過 0.10 的分數）代表什麼。這是一個布局隨著頁面載入而不斷變化的網站。請注意，我們在捕獲它時根本沒有滾動。我們的視口保持不變，但頁面本身發生了巨大的變化：
作為訪問此網站的用戶，您可能不確定它何時真正完成載入。你可能會嘗試點擊一個新聞故事，但布局卻發生了巨大的變化。結果你最終在錯誤的頁面上，你不得不浪費時間回去。根據頁面的不同，這可能會發生多次。如果是這樣，你很有可能會離開。
您的用戶也將如此。
網站越複雜，就越有可能獲得高 CLS 分數。對於標誌性的 Google 主頁等簡單布局，沒有 CLS，因為它們包含的元素很少：
這並不是說所有複雜的網站都有很高的 CLS 分數。以亞馬遜為例。沒有人會說這家電子商務巨頭使用簡單的網頁設計。然而，在瀏覽其目錄時幾乎看不到布局變化。
布局變化的發生是因為瀏覽器傾向於非同步載入頁面元素。更重要的是，您的頁面上可能存在初始尺寸未知的媒體元素。這種組合意味著瀏覽器在載入完成之前不知道單個元素將佔用多少空間。因此，劇烈的布局轉變。
CLS 的有趣之處在於它可以使用各種工具進行客觀測量，但它也是以用戶為中心的，因為每個用戶的設備都會影響您網站布局的變化方式。雖然您無法控制該方面，但您當然可以採取預防措施，使其影響儘可能小。
CLS 是Google 衡量的三個核心 Web 要素之一，可幫助其確定您的網站是否提供強大的用戶體驗 (UX)。其他 Core Web Vitals 是First Input Delay (FID)和Largest Contentful Paint (LCP)，它們也絕對值得您為優化付出任何努力。
如何測量 CLS
確定您的網站是否顯示明顯的布局變化相對簡單。首先，我們建議您嘗試從各種設備訪問您的網站，並要求其他人也這樣做。這樣做時，您可以觀察頁面載入時布局是否保持一致。
您可能會發現 CLS 的體驗可能會有很大差異。這不僅取決於您的網站的優化程度，還取決於您使用的設備。考慮到這一點，衡量網站 CLS 的最佳工具是PageSpeed Insights。這與 Google 的 Core Web Vitals 直接相關，因此您可以直接了解您的 CLS 分數如何影響 Google 如何看待您的網站。
通過此服務，您可以輸入一個 URL 並根據 Google 過去 28 天收集的數據獲得該 URL 的總體性能分數。該分數考慮了幾個指標，包括 CLS、FCP和LCP。
對於這個測試，我們選擇了一個沒有明顯 CLS 的網站。PageSpeed Insights 證實了我們的懷疑，因為它以強大的 CLS 得分返回了壓倒性的積極結果。
請注意，PageSpeed Insights 為每個分數提供了一個百分比細分。在這種情況下，91% 的用戶在載入測試網站時經歷了零布局偏移。然而，其餘的參觀者確實經歷了某種程度的布局轉變。
當涉及到 CLS 和其他 Core Web Vitals 時，這是意料之中的。用戶體驗會因他們訪問的設備、互聯網連接和許多其他因素而有很大差異。幾乎沒有辦法考慮到沒有用戶體驗過 CLS，但您絕對可以採取預防措施來優化它，使百分比儘可能低。
除了現場數據，PageSpeed Insights 還提供所謂的實驗室數據。這些是基於單個測試的性能分數，而不是長時間收集的數據（被視為現場數據）。
在我們的測試中，我們的 CLS 分數為零，這意味著沒有布局偏移。對於這一特定的測試。現在讓我們將其與另一個沒有獲得如此高 CLS 分數的網站進行比較。
為符合 Google 的標準，您的 CLS 分數應低於 0.10。以上任何內容都意味著布局中存在顯著的、明顯的變化，這會導致糟糕的用戶體驗。
如何確定導致布局偏移的原因
如果您想確定哪些元素導致您網站上的布局發生變化，您可以使用Chrome 開發工具。如果您打開工具 (CTRL-SHIFT-I) 並跳轉到性能選項卡，您將能夠在瀏覽網路時記錄性能測試。
停止錄製後，Chrome Dev Tools 將返回一個時間線，顯示載入時間、單個請求和 Core Web Vitals。從此時間線中，您可以選擇「體驗」下列出的各個 Layout Shift 事件。這樣，您就可以看到它們對應的元素。
一旦您知道是什麼元素導致了布局變化，您就可以採取措施解決問題。我們將在下一節中討論。
如果您想監控您網站的 Core Web Vitals，我們建議您設置一個Google Search Console帳戶。您將能夠從 Search Console 監控性能指標和 Core Web Vitals，這對於搜索引擎優化 (SEO) 來說是一個福音。我們認為定期監控 Search Console 符合您的最大利益，無論如何，但擁有您正在跟蹤的特定指標永遠不會有什麼壞處。
如何優化您的 CLS 分數
總的來說，高 CLS 分數有兩大罪魁禍首：媒體文件和廣告。例如，如果您上傳一個解析度很高的圖片文件，但沒有指定它的高度和寬度，則很可能會破壞您的頁面布局。
在網站性能方面，最好使用已經是您將要顯示的精確尺寸的圖像。這樣，瀏覽器就不必花費處理能力（和時間）來適當地調整它們的大小。然而，這並不總是可能的。如果不是，您應該為您顯示的每個圖像設置寬度和高度屬性。這樣，用戶的瀏覽器將準確地知道圖像適合的位置，並且不需要在最後一秒移動布局。
以下是這些屬性在 HTML 中的外觀：
<img src=”http://imageurl.com” width=”120″ height=”90″ alt=”圖片替換文字”>
如果您使用 WordPress，一些圖像優化插件可以在您上傳文件時自動調整文件大小，這會負責設置必要的寬度和高度屬性。
當涉及到響應式圖像時，您可以依賴 CSS 而不是手動聲明寬度和高度。CSS 使您能夠使用 max-width 屬性來告訴瀏覽器圖像應該佔據視口的哪個百分比：
img {
最大寬度：90vw;
高度：自動；
}
在這個例子中，我們告訴瀏覽器縮放圖像，使其佔據用戶視口的 90%。同時，我們將高度屬性設置為自動，以便瀏覽器根據圖像的新寬度和縱橫比計算理想的高度。
適用於廣告的基本原理與適用於圖像的基本原理相同。通常，您將使用 iframe，有時廣告網路會使用動態大小的元素。這可能會對您的頁面布局造成嚴重破壞。
您可以為它們保留區域，而不是讓廣告網路決定您網站上的廣告應該有多大。這意味著聲明廣告區域的寬度和高度屬性並設置回退以防它們不載入，因此空白空間不會導致布局偏移。
您可以對任何您想要的廣告容器使用相同類型的 CSS 和內嵌樣式，無論投放什麼廣告，都可以將其鎖定在適當的位置。
累積布局偏移 (CLS) 常見問題
CLS 可能比LCP和FCP指標更難掌握。考慮到這一點，讓我們回顧一下用戶對 CLS 的一些常見問題，以確保您不會遺漏任何關鍵信息。
CLS 如何影響我網站的性能？
理論上，您可以擁有一個速度非常快的網站，但其 CLS 分數仍然相對較低。與其他 Core Web Vitals 一樣，CLS 分數可能與整體網站性能沒有直接關係。您的網站可能運行得非常快，但在載入時，它會像手風琴一樣展開。即便如此，大的布局變化肯定會對網站的用戶體驗產生負面影響。谷歌認為這非常重要。這就是為什麼谷歌如此重視這個數據點的原因。
CLS 比 FCP 或 LCP 分數重要嗎？
很多用戶比 CLS 更關注 FCP 和 LCP 分數。這是因為這兩個指標更容易與網站性能相關聯。儘管 FCP 也是專門以用戶為中心的指標，但 CLS 更難在大量用戶之間進行一致的衡量。
這三個指標構成了 Google Core Web Vitals。這意味著，如果您忽略其中之一，您將面臨在相關搜索結果中排名較低的風險。確保您的網站針對低 CLS 進行了優化通常只會對 LCP 和 FCP 等網站性能產生積極影響。如果最大的內容繪製在用戶看到後立即被推下屏幕，那麼快速的載入時間有多大用處？
什麼是好的 CLS 分數？
從數字上看，谷歌認為低於 0.10 的任何東西都是一個很好的 CLS 分數。但是，如果您採取正確的步驟，獲得 0 的 CLS 分數並不是不可能的，並且在優化良好的網站中這相對普通。但是請記住，即使是經常得分為 0 的網站，也可能有一小部分用戶經歷了變化。這是您無法控制的，您所能做的就是說明大多數用戶的 CLS 為 0。
結論
在您的網站上提供強大的用戶體驗有很多因素。理想情況下，它應該載入快速。它應該很容易交互。它不應該在元素出現時移動布局位置。劇烈的布局變化會導致挫折和誤點擊。這些會導致更高的跳出率。這對任何網站都不利。
CLS 是 Google 用來衡量您網站整體用戶體驗的核心網路要素之一。用戶首先是您擁有網站的全部原因。他們的經驗是優先順序 1。低 CLS 分數（低於 0.10）意味著您的網站應該可以流暢地載入，並且其布局的每個方面都會從一開始就出現在正確的位置。
您對 CLS 或如何減少您的 CLS 有任何疑問嗎？讓我們在下面的評論部分中討論它們！