WordPress 中的累積佈局偏移 (CLS)：如何消除它

在關於累積佈局轉變的這一章中，我們為 WordPress 用戶提供的關於核心 Web 生命線的迷你係列即將結束。 在前面關於最大內容繪製和首次輸入延遲的章節中，我們已經討論了這些術語的確切含義以及如何針對每個術語優化您的網站。 現在，我們想為 CLS 做同樣的事情。

在下文中，我們將介紹累積佈局偏移到底是什麼、它是如何計算的、如何測試您的網站在該領域的性能以及目標的良好價值。 之後，我們將向您提供分步說明，幫助您解決 WordPress 網站上可能存在的任何 CLS 問題並進行改進。

完成後，連同本系列中的其他兩篇文章，我們希望您做好準備讓您的網站符合 Google 的批准標誌。

累積佈局偏移是什麼意思？

像往常一樣，讓我們從定義開始。 簡而言之，CLS 會測量網頁上發生的某些變化導致網頁上的元素在無需用戶交互的情況下移動（或移動，如果您願意的話）。

您正在閱讀的文章中的表格或廣告可能加載較晚，並向下移動到您正在閱讀的段落，因此您必須滾動才能再次找到您的位置。 或者更糟糕的是，它會在不合適的時刻更改按鈕或鏈接的位置，因此您最終會單擊您不想單擊的內容。

因此，它可以是從輕微煩人到徹底令人憤怒的任何事情。 累積佈局偏移是捕獲此行為的指標，以便了解問題以便您可以糾正它。

它為什麼如此重要？

一個不穩定的網站會完全擾亂您當前正在做的事情，甚至可能會在現實生活中產生令人煩惱的後果。 正如您可以想像的那樣，這對用戶體驗來說確實很糟糕，並且可能會導致訪問者離開。 在智能手機上尤其如此，由於屏幕尺寸的原因，微小的變化比台式機產生的影響更大。

由於它具有如此大的顛覆性，谷歌非常關注這個指標，使其成為其判斷網站的核心價值之一。 因此，如果您想同時取悅訪問者和決定您在搜索結果中顯示位置的人（我的意思是機器人），請盡力消除網站上的累積佈局轉變。

CLS 的病因是什麼？

網站元素發生變化的原因通常是因為網頁文件的加載速度不同。 另一個因素是在頁面加載期間或之後動態添加的頁面元素。 典型例子包括：

• 沒有正確定義尺寸的圖像或視頻等視覺效果
• 第三方內容，例如廣告、橫幅、嵌入內容或 iframe
• 比最初顯示的後備字體更小或更大的 Web 字體

CLS 的另一個來源可能是 CSS 和 JavaScript 標記衝突。 當它們相互阻塞時，就會停止網頁的加載過程。

累積佈局偏移是如何計算的？

與之前的版本相比，Cumulative Layout Shift 的計算稍微複雜一些。 為了理解它，我們需要首先確定一些術語：

• 佈局移位——頁面上已經可見的元素在渲染後從其起始位置移動。 這類元素被稱為不穩定元素（我知道是創造性的）。
• 預期與意外的佈局變化——佈局變化只有在用戶沒有預料到的情況下才會產生負面影響。 還有一些預期和歡迎的佈局變化，例如在與網頁交互之後（例如提交表單）。 CSS 動畫和過渡是預期佈局變化的其他示例。 考慮到這一點，CLS 認為用戶交互後 500 毫秒內發生的所有佈局變化都是預期的。
• 影響分數— 移動元素影響的視口（屏幕上網站的可見部分）的百分比，以十進制數表示（例如，如果影響屏幕的 50%，則為 0.5）。
• 距離分數- 距離在移動過程中不穩定元素移動的屏幕百分比。 也以十進制數形式給出。
• 佈局偏移分數— 這是通過將影響分數乘以距離分數來計算的（例如 0.4 x 0.15 = 0.06）。 因此，移動長距離的大元素比移動短距離的小元素獲得更高的分數。

CLS 捕獲五秒間隔內出現最多的意外佈局偏移分數。 顯然，越低越好。

最後，您實際上不需要了解具體細節。 您需要知道的是如何衡量 CLS 以及您的網站應追求什麼價值。

什麼是好的佈局移位分數？

良好的分數是 CLS 值為 0.1 或更低。 最多 0.25 需要改進，任何高於該值的值都是不好的，並且可能會導致搜索性能下降。

如何測試累積佈局偏移

為了能夠提高您網站上的 CLS 分數，您首先需要知道自己的立場。 很難知道它是否會發生，因為網頁在不同設備上的行為並不總是相同。 因此，您可能在開發站點上看不到它，但訪問者仍然可以遇到它。 因此，最好對其進行測試。

有多種方法可以檢查累積佈局偏移是否是您的 WordPress 網站上的問題。 它們與其他 Core Web Vitals 指標幾乎相同。 您的第一個停靠點應該始終是 PageSpeed Insights，它在其結果頁面上顯示指標。

請注意，它使用實驗室結果以及 Chrome 用戶體驗報告中的實際數據。 它甚至顯示佈局變化和源元素的圖像。 這樣，您就可以更好地了解問題是什麼以及問題發生在哪裡。

此外，PageSpeed Insights 還為您提供每個元素對 CLS 分數貢獻的比率。 這使您可以優先考慮具有最大負面影響的事情。

除此之外，您還可以使用以下內容：

• Google Search Console 內的 Core Web Vitals 報告
• Chrome瀏覽器開發者工具
• 燈塔
• web-vitals JavaScript 庫

還有一個名為 CLS Visualizer 的 Chrome 擴展。 它突出顯示網頁上不斷變化的元素。 對於 Firefox，請嘗試 SpeedVitals。

如何減少 WordPress 網站的累積佈局變化

如果您發現 CLS 是您的 WordPress 網站上的一個問題，您可能需要修復它。 這就是本文其餘部分的全部內容。

提供媒體尺寸

當您查看上面累積佈局偏移的原因時，許多解決方案已經變得清晰。 如前所述，CLS 的常見罪魁禍首是沒有定義width和height值的圖像和其他媒體。 如果沒有固定的尺寸，瀏覽器不知道要為它們保留多少空間。 對於稍後出現在頁面上的媒體尤其如此，例如延遲加載。

不幸的是，響應式設計的常見做法是不給出特定的圖像尺寸。 大多數情況下，圖像被設置為width或max-width: 100%; 和height: auto; 。 然後，由瀏覽器在下載圖像時計算出實際尺寸。

在過去，這常常導致我們試圖避免的行為類型。 圖像突然出現，帶動了周圍的一切。 因此，您應該始終提供視覺效果的尺寸或至少 CSS 長寬比。

幸運的是，如果您使用 WordPress，您的網站會自動設置圖像尺寸。 因此，這個問題通常不會出現。

如果特定圖像不是這種情況，您可以在古騰堡編輯器中更正它。

處理廣告、嵌入內容和類似內容

加載到頁面中的第三方內容通常是 CLS 的最大來源之一。 在這些情況下，您不一定能控制最終產品的尺寸。 其出版商也不提前知道其出現的網站上有多少可用空間。 因此，您需要以與圖像相同的方式聲明其大小。

對於 WordPress 用戶來說，幸運的是，當使用古騰堡編輯器自動將來自社交網絡、視頻門戶或類似供應商的內容嵌入到您的內容中時，編輯器會自動添加適當的width和height聲明。

這樣，即使內容的加載時間比頁面其他部分長，它也已經保留了正確的大小。 因此，佈局在出現時不會發生變化。

對於手動添加的其他類型的內容，請務必手動添加width和height 。 如果您不知道廣告或其他元素的確切高度，至少為其添加一個min-height屬性。 這仍然允許使用更大的元素，但保留一些空間，並且可以消除或至少減少頁面上的 CLS。

最小化 WordPress 中第三方內容的累積佈局偏移的另一種技術是避免將其放置在頁面的較高位置。 它越高，它下面可以下推的內容就越多，你的 CLS 分數就越高。 因此，如果可以的話，請將其放置在中間或底部。

優化動態內容

動態內容是在頁面加載後添加到頁面的頁面元素。 之前的示例是延遲加載圖像，但它通常還包括橫幅、表單甚至滾動顯示的相關產品等內容。

當然，如果您沒有正確規劃這些，也可能導致佈局變化。 以下是一些避免這種情況的方法：

• 預先預留空間- 與上麵類似，如果您有一個可以將內容加載到其中的固定大小的容器，即使稍後再加載，它也會保持佈局穩定。 固定容器也可以是旋轉木馬或類似的東西。
• 將其與用戶交互連接起來——如果內容在用戶操作後動態加載，即使佈局發生變化，也不會給 CLS 造成任何損失。 但請記住 500 毫秒的截止時間。
• 將內容加載到屏幕外— 如果您在視口之外加載內容，然後向用戶提供該內容可用的通知以及滾動到該內容的選項，則也沒有 CLS。 社交媒體平台喜歡在新的更新時這樣做。

改進網頁字體處理

網絡字體也會導致佈局變化。 兩種常見的形式是，您要么在網頁字體出現之前首先看到無樣式文本（Flash of Unstyled Text 或 FOUT），要么一開始根本看不到文本，然後它與網頁字體一起出現（Flash of Invisible Text 或 FOUT）。 FOIT）。

兩者都可能導致佈局變化，您可以採取以下措施：

• 使用正確的字體格式- 如果您將自定義字體加載到 WordPress 網站中，請務必使用 WOFF2 或 WOFF 格式。 它們佔用空間最小，加載速度最快，有助於避免上述問題。
• 使用正確的後備字體——如果您使用的後備字體與實際字體非常不同，那麼切換發生的那一刻可能會導致佈局移動。 您可以通過使用接近最終產品的輻射字體來避免這種情況。 字體樣式匹配器可以幫助您找到一個。
• 預加載字體— 將 Web 字體資源放置在文檔的早期位置，並向其中添加rel=preload 。 這樣，瀏覽器就會優先考慮它們。

它還有助於在本地託管字體，或者至少使用 CDN 讓用戶盡快使用它們。 這樣，您就可以減少在加載過程中後期切換字體並導致佈局變化的可能性。

不要讓累積佈局變化影響您的 WordPress 網站

累積佈局偏移是 Google 認為至關重要的三個指標之一，也是本深入系列中的最後一個指標。 它是用戶體驗的重要指標，因為它衡量頁面佈局在加載期間甚至加載後的穩定性。

與 Core Web Vitals 中的其他指標一樣，它不僅對用戶很重要，而且還影響搜索排名，因此對於網站的成功非常重要。

到現在為止，您已經知道它是什麼、它是如何計算的、導致它的原因以及如何測試和處理它。 願你的佈局永遠堅固，我的朋友。

對於如何防止 WordPress 中的累積佈局偏移，您還有其他提示嗎？ 請在下面的評論中告訴我們！