累積佈局變化 (CLS)：它是什麼以及如何為此優化您的網站

想像一下：你正在加載一個網站，它看起來已經準備好了。 您單擊博客特色圖片閱讀文章，突然整個頁面都發生了變化，因為剛剛加載了其他內容。 然後您單擊完全不同的內容並加載一個您從未想過的頁面。 如果您自己遇到過這個問題，就會知道累積佈局偏移 (CLS) 如何對網站的用戶體驗 (UX) 產生負面影響。

Cumulative Layout Shift 是頁面佈局在加載時發生多少變化的術語，在本文中，我們將深入探討它的含義。 我們將向您展示如何衡量 CLS，並解釋什麼是好分數。 然後我們將討論如何優化您網站的 CLS 分數。 讓我們開始工作吧！

訂閱我們的 YouTube 頻道

什麼是累積佈局偏移 (CLS)？

沒有比視覺示例更好的方法來說明高 CLS 分數（意味著來自 Google 的 PageSpeed Insights 的任何超過 0.10 的分數）代表什麼。 這是一個佈局隨著頁面加載而不斷變化的網站。 請注意，我們在捕獲它時根本沒有滾動。 我們的視口保持不變，但頁面本身發生了巨大的變化：

作為訪問此網站的用戶，您可能不確定它何時真正完成加載。 你可能會嘗試點擊一個新聞故事，但佈局卻發生了巨大的變化。 結果你最終在錯誤的頁面上，你不得不浪費時間回去。 根據頁面的不同，這可能會發生多次。 如果是這樣，你很有可能會離開。

您的用戶也將如此。

網站越複雜，就越有可能獲得高 CLS 分數。 對於標誌性的 Google 主頁等簡單佈局，沒有 CLS，因為它們包含的元素很少：

這並不是說所有復雜的網站都有很高的 CLS 分數。 以亞馬遜為例。 沒有人會說這家電子商務巨頭使用簡單的網頁設計。 然而，在瀏覽其目錄時幾乎看不到佈局變化。

佈局變化的發生是因為瀏覽器傾向於異步加載頁面元素。 更重要的是，您的頁面上可能存在初始尺寸未知的媒體元素。 這種組合意味著瀏覽器在加載完成之前不知道單個元素將佔用多少空間。 因此，劇烈的佈局轉變。

CLS 的有趣之處在於它可以使用各種工具進行客觀測量，但它也是以用戶為中心的，因為每個用戶的設備都會影響您網站佈局的變化方式。 雖然您無法控制該方面，但您當然可以採取預防措施，使其影響最小。

CLS 是 Google 衡量的三個核心 Web 要素之一，可幫助其確定您的網站是否提供強大的用戶體驗 (UX)。 其他 Core Web Vitals 是首次輸入延遲 (FID) 和最大內容繪製 (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 Dev Tools。 如果您打開工具 (CTRL-SHIFT-I) 並跳轉到性能選項卡，您將能夠在瀏覽網絡時記錄性能測試。

停止錄製後，Chrome Dev Tools 將返回一個時間線，顯示加載時間、單個請求和 Core Web Vitals。 從此時間線中，您可以選擇在Experience下列出的各個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="Image Alt Text">

如果您使用 WordPress，一些圖像優化插件可以在您上傳文件時自動調整文件大小，這會負責設置必要的寬度和高度屬性。

當涉及到響應式圖像時，您可以依靠 CSS 而不是手動聲明寬度和高度。 CSS 使您能夠使用max-width屬性來告訴瀏覽器圖像應該佔據視口的哪個百分比：

img {
max-width: 90vw;
height: auto;
}

在這個例子中，我們告訴瀏覽器縮放圖像，使其占據用戶視口的 90%。 同時，我們將height屬性設置為auto ，以便瀏覽器根據圖像的新寬度和縱橫比計算理想的高度。

與圖像相同的基本原理適用於廣告。 通常，您將使用 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 有任何疑問嗎？ 讓我們在下面的評論部分中討論它們！

精選圖片來自哥哥/shutterstock.com