如何減少 WordPress 上的累積佈局偏移 (CLS)
已發表: 2022-07-07搜索引擎優化 (SEO) 是一個不斷變化的遊戲，沒有使用說明書。 優化不僅僅是在您的內容中添加關鍵字。 像谷歌這樣的搜索引擎也會考慮質量、安全網絡體驗的指標——比如你的網站加載速度有多快，訪問者與之交互的難易程度等等。
Cumulative Layout Shift (CLS) 是 Google 用來衡量網頁在加載時重新排列多少的指標。 一個大幅移動的網站——導致用戶點擊錯誤的鏈接或閱讀內容有困難——提供了糟糕的用戶體驗，並且被谷歌所反對。
查看您網站的 CLS 分數和其他 Core Web Vitals 可以幫助您確定改善其整體健康狀況的方法，進而提高您的排名！
本文將解釋 CLS 的原因、為什麼要最小化它以及減少它的一些方法。
什麼是累積佈局偏移？
累積佈局偏移 (CLS) 測量網頁上移動的嚴重程度作為資產加載。 您可能已經註意到，有時當您打開一個網站時，圖像和視頻可能會在不同的時間出現，並會在加載時推送其他內容。
在這裡您可以看到 CLS 的運行情況：
糟糕的 CLS 分數，尤其是與較長的加載時間相結合，可能會讓訪問者感到沮喪。 沒有什麼比不小心點擊廣告更令人惱火的了，因為頁面突然移動到您的光標下方。
CLS 如何影響 WordPress 網站的用戶體驗？
導航網頁時，移動可能很煩人。 它可能會導致文本在您嘗試閱讀時跳來跳去，按鈕在您點擊它們時移動，以及在您想要與其他內容交互時意外點擊廣告或鏈接。
如果訪問者必須等待幾秒鐘才能完全加載頁面並與不斷變化的元素作鬥爭，他們可能會直接離開您的網站。 如果您的所有頁面都嚴重偏移，則尤其如此。 訪問者可能會在幾次點擊錯誤或等待時間過長後反彈。
什麼會影響您的 CLS 分數？
糟糕的 CLS 分數是由所有在不同時間加載到頁面上的主要站點元素造成的。 最糟糕的罪魁禍首往往是照片、視頻和廣告，因為這些東西的加載速度通常比文本慢，並且可能必鬚根據屏幕尺寸進行調整。
雖然減少加載時間可以改善您的整體用戶體驗，但這實際上並不會減少移動量，只會減輕影響。
以下是可能影響您的 CLS 分數的五個因素：
1. 沒有尺寸屬性的圖片和視頻
如果沒有預設大小屬性，圖像和視頻等視覺內容通常會加載到較小的佔位符中。 此設置可能會導致佔位符周圍的內容加載。 然後，當圖像到達時，它會佔用更多空間並圍繞相鄰元素移動。
通過設置大小屬性，佔位符與元素佔用相同的空間。 因此，它會在同一區域加載，並且不會影響附近內容的放置。
在下圖中，您可以看到 GameStop 主頁上加載了一些早期元素：
圖片在幾秒鐘後加載，將暢銷商品推下並消失在視線之外。 這是一個典型的例子，當慢速加載的圖像沒有預設邊界時，快速加載的文本會被移動。
這種情況正是您希望在您的網站上避免或最小化的情況。
2. 沒有尺寸屬性的廣告和嵌入
如果您在您的網站上銷售或展示廣告，它們很可能是圖片或視頻格式。 就像上面的例子一樣，如果這些廣告在沒有尺寸屬性的情況下加載，它們可能會比其他內容更晚到達頁面並轉移內容。
對於一些為您選擇廣告的第三方服務來說尤其如此。 這些廣告可能並不總是相同的尺寸或適合相同的空間。
小圖形可能不是問題。 但是，如果大型視頻廣告加載緩慢且佔用大量空間，則可能會迫使頁面上的其他元素大幅移動。
優化廣告和嵌入內容以快速加載可以減少煩惱，儘管您的 CLS 分數仍然會受到影響。 導致訪問者無意中點擊您網站的廣告的佈局變化可能會讓他們感到被欺騙並損害他們返回的機會。
3.自定義字體
自定義字體通常存儲在您的 Web 服務器上。 雖然它們可以為您的博客或網站提供更多自定義選項，但它們通常需要加載到現有文本之上。
例如，您不太可能離線看到 Didot 字體（除非您找到一本舊的法語書籍）。 這種字體給人一種正式、優雅的感覺，是高檔餐廳或古董相關網站的絕佳選擇。
但是，如果此字體託管在服務器上，則需要在訪問該站點時將其下載到每個訪問者的瀏覽器中。 在下載字體之前，此設置可能會阻止文本出現。 然後，所有的字體會突然出現，可能會混淆頁面上已經加載的所有資源。
另一種選擇是以更基本的字體加載所有文本，例如 Serif。 一旦它在瀏覽器中加載，它將被替換為 Didot。 由於不同字體的字母通常不會佔用相同數量的空間，因此字體更改會移動文本，在此過程中推動或拉動相鄰的元素。
這些轉變會增加 CLS 分數，因此避免它們符合您的最大利益。 幸運的是，一些變通方法允許您在解決加載時間延遲的同時仍然使用自定義字體。 我們將在後面的文章中仔細研究這些方法。
4.非合成動畫
非合成動畫會佔用大量資源，需要瀏覽器渲染一次或多次。 您可以通過要求不高的動畫或戰略性地安排動畫在方便的時間加載來緩解此問題。
當您的瀏覽器在初級階段加載網站時，它必須呈現視覺效果並將其“繪製”在頁面上。 這個過程“告訴”每個像素要顯示哪種顏色。 不幸的是，非合成動畫可能會導致渲染過程重新啟動。
結果是一個部分加載的頁面。 瀏覽器已經完成了一些工作，然後動畫觸發並強制它重新開始並重新渲染所有內容。 此過程會延長加載時間，因為某些元素需要多次渲染，並且還可能導致佈局偏移。
5.動態注入內容
動態注入的內容是基於某些因素而變化的網頁元素。 這些因素通常取決於用戶，從而提供更加個性化的體驗。
例如，在線商店可能會根據訪問者的歷史推薦產品。 天氣網站可能會使用用戶設備的位置數據來顯示該區域的結果。
動態內容可以通過更相關的體驗和產品優惠來增加轉化率。 儘管如此，它的反動性質可能會耗費資源並導致佈局轉變。
如上面的天氣示例，不同的天氣信息、城市名稱，甚至使用的語言都會在頁面上佔用不同數量的空間。 一個擁有陽光明媚的天空和溫和的天氣的小鎮可能比一個即將到來的颶風十字準線的城市更容易進入。
結果是在前一個示例中加載的內容較少，而在後一個示例中加載的內容更多，從而影響相鄰元素在屏幕上的移動方式。 與任何大小或數量可能不同的動態注入內容一樣，這將影響頁面的 CLS。
如何減少 WordPress 上的累積佈局偏移
既然您知道 WordPress 佈局變化的主要貢獻者，您就可以努力減少它們的影響。
與您對網站進行根本性更改的任何時候一樣，明智的做法是創建備份並使用臨時站點在問題上線之前發現問題。
下面，您將找到減少 CLS 並改善網站用戶體驗的解決方案。
1. 安裝專為 Core Web Vitals 設計的插件
Core Web Vitals 關註三個指標：
- 累積版式偏移 (CLS)
- 首次輸入延遲 (FID)
- 最大含量塗料 (LCP)
使用 Jetpack Boost，您可以直接從 WordPress 儀表板監控和改進您的 Core Web Vitals 和其他性能指標。
它會掃描您的網站並返回一份性能報告，其中包含有待改進的地方。 但它超越了針對常見問題的一鍵式解決方案的建議，這些問題可能會降低您的網站速度並損害您的用戶體驗。
2.設置圖像和視頻的尺寸
將圖像和視頻與頁面上的其他元素一起使用時，請考慮為其分配寬度和高度屬性。 這些設置將保留圖形所需的空間並避免移位。
幸運的是，在 WordPress 中設置尺寸非常容易。 只需單擊嵌入的圖像並將圖像尺寸調整為適當的值：
您還可以使用縱橫比框在加載之前使用 CSS 為可視元素分配空間。 這些框將具有與設置尺寸相同的效果，通過為圖像和視頻預先分配空間來減少佈局變化。
3. 設置廣告和嵌入內容的尺寸
與上述步驟一樣，您應該考慮為可能導致頁面移動的廣告和其他嵌入內容創建空間。 您可以通過為這些元素設置尺寸或使用 CSS 分配空間來做到這一點。
當廣告由第三方填充時，其尺寸可能難以預測。 因此，您可以嘗試估算要留出的空間量並將其裝箱，這樣其他內容就不會在廣告加載時重疊。
此設置可能會導致較小的廣告周圍出現額外的空白。 儘管如此，這通常比大幅移動頁面上的其他元素的大型廣告（通常需要更長的加載時間）要好。
4.在本地託管自定義字體並預加載它們
之前，我們討論了自定義字體以及它們如何導致偏移。 幸運的是，您可以在服務器本地託管這些字體以避免出現問題。
您可以通過前往 google-webfonts-helper 並從左側的選項中選擇您想要使用的字體來做到這一點：
接下來，選擇您想要使用的選項（在大多數情況下為默認選項）並從第 3 步中的“最佳支持”選項中復制 CSS。
將此代碼粘貼到您的 CSS 文件中。 您的網站現在將驗證訪問者是否已經擁有該字體。 如果沒有，您的網站將從您的服務器加載它，這比從網絡上的其他地方獲取它要快。
在 WordPress 中預加載字體的最簡單解決方案是 Google Fonts Typography 插件。 該工具提供了額外的字體選項並更有效地加載它們以最大限度地減少延遲並避免 CLS。
另一種解決方案更具技術性，需要您重新安排資產在站點上加載的順序。 此方法只是將您的 Web 字體文件更早地插入到加載序列中，以確保它們在需要時準備就緒。 但是，此過程需要自定義編碼，這對於普通 WordPress 用戶來說可能有點高級。
5.為動態注入的內容設置佔位符
動態注入的內容可能是一個有用的功能，但您必須有策略地實施它以避免導致佈局變化。 關鍵是分配足夠的空間以適應注入內容的最大版本，而不會溢出和移動相鄰元素。
您可以通過使所有註入的內容大小相同或盡可能相似來簡化此過程。 此設置可以防止在頁面上需要不同數量的空間的不同結果。
分配空間的實際方法將取決於注入它的內容和方法。 但它通常需要為正在加載的資產添加固定位置和預設邊界。
6. 使用 Happy Addons for Elementor 插件製作動畫
雖然動畫會導致加載時間過長並損害 CLS 分數，但有時它們是網頁上的基本元素。
如果您想堅持使用動畫，您可以考慮使用 Happy Addons for Elementor 插件來安全地插入它們並防止加載問題。
這個插件盡可能處理 CSS 來轉換和翻譯動畫屬性。 Happy Addons 優化了這個過程，以最大限度地減少加載時間並減少轉移對您網站的影響。 另外，它是免費使用的！
如何衡量我的 WordPress 網站的 CLS 分數？
由於 CLS 是您網站的核心 Web Vitals 的重要組成部分，因此大多數網站健康報告或監控工具都會突出顯示它。 以下是檢查您網站的 CLS 分數的一些最佳選項：
1. PageSpeed Insights
PageSpeed Insights 是一個簡單的資源，可提供有關 Core Web Vitals 的報告。 只需輸入一個 URL，它就會分析幾個組件，對它們進行評分，並提供改進提示。
PageSpeed Insights 可以針對移動和桌面設備運行報告，以便您可以針對各種訪問者識別網站上的弱點。 您還可以查看樹狀圖，以查看站點上性能問題的詳細可視化細分。
2.谷歌搜索控制台
Google Search Console 是來自 Google 的報告生成器，專注於您網站的健康狀況，因為它與搜索結果有關。 與 PageSpeed Insights 一樣，您可以使用 FID、LCP 和 CLS 等指標查看您網站的移動版和桌面版報告。
要使用 Google Search Console，您首先需要驗證您的域的所有權。 然後，該報告將標記您網站中表現不佳的方面，讓您能夠查明並解決它們。
3. 燈塔
另一個評估頁面質量的谷歌工具是 Lighthouse——任何使用谷歌 Chrome 瀏覽器的人都可以輕鬆使用它。 它實時監控網站的可訪問性、性能、SEO 等。
您可以通過轉到 Google Chrome 瀏覽器設置，將鼠標懸停在更多工具上，然後選擇底部的開發人員工具來找到 Lighthouse。
然後，您需要展開頂部的菜單並選擇Lighthouse 。 從那裡，您可以為當前正在查看的頁面運行報告。
只需選擇您想要的選項，然後單擊生成報告按鈕。
您將在頂部看到每個主要指標的顏色編碼分數。 然後，單擊每個並向下滾動以查看詳細分析和改進機會。
我現在如何輕鬆優化我的 CLS 分數？
使用上面的工具和提示，您可以識別核心 Web 生命力中的弱點，包括 CLS。 一旦您開始解決其中的一些問題，您的網站健康狀況就會得到改善，並且您可以學習如何避免將來出現類似問題。
在您的 WordPress 網站上安裝 Jetpack Boost 插件是一個很好的開始方式。 該工具易於使用，可以幫助您立即提高 CLS 分數。
利用上述其他解決方案將確保您的 CLS 分數保持良好狀態，從而改善您網站的 SEO 和 UX。 您還可以使用這些報告來定位其他 Web Vitals 分數，例如 LCP 和 FID，直到一切恢復為綠色！
Jetpack Boost 入門
要開始使用，只需從 WordPress插件頁面安裝 Jetpack Boost（它是免費的）。
激活該工具後，從儀表板左側的 Jetpack 選項卡中選擇Boost 。
您現在將看到您的網站在移動設備和桌面設備上的性能得分。
在頁面下方，您可以打開其他性能優化設置，例如 CSS 加載、延遲非必要的 JavaScript 和延遲圖像加載。 這些配置中的每一個都可以提高您的 Core Web Vitals 分數。
經常問的問題
以下是一些關於 WordPress 上的 CLS 的常見問題和解答，可能對您有所幫助。
什麼是好的 CLS 分數？
低於 0.1 的任何值都被認為是良好的 CLS 分數。
這個數字是原始加載位置和元素最終放置之間的差異。 分數是累積的，這意味著它使用來自不同元素的多個實例。
0.1 到 0.25 之間的分數被認為是可以的，需要改進。 任何高於 0.25 的分數都很差。 他們認為 CLS 對您網站的可用性產生了負面影響。
如果佈局轉變是不可避免的怎麼辦？
有時，由於缺乏知識或頁面上元素的性質，佈局轉換可能是不可避免的。 不用擔心！
這里和那裡的一些佈局變化不應該對您的網站產生重大影響。 畢竟，CLS 是從整個頁面編譯而來的評級。 即使你的分數不是零，一些次要的例子仍然可以給你一個很好的整體評價。
在某些頁面上，班次可能根本無法解決。 同樣，您網站的整體用戶體驗上的一個小瑕疵不應該是引起關注的主要原因。
用戶交互會影響累積佈局移位嗎？
不！ 如果結果在操作後快速加載，則認為觸發佈局轉換的用戶活動對 CLS 的影響較小並且不會註冊。 在加載可變內容之前要求用戶操作實際上可能是在某些情況下幫助避免 CLS 的有用技巧。
例如，假設您使用動態注入的內容為訪問者加載附近商店的地圖。 如果這種情況自動發生，則提取用戶位置數據和加載地圖的時間可能會導致佈局發生變化。 但是如果有一個按鈕，用戶必須點擊加載地圖，這種交互將防止佈局變化影響頁面的 CLS 分數。
改進 WordPress 上的累積佈局轉換
既然您知道如何在 WordPress 上修復 Cumulative Layout Shift (CLS) 以及如何衡量它，您就可以改進網站的 SEO 和 UX。 減少班次將使訪問者更愉快地瀏覽您的網站，並且還應該提高您在搜索引擎結果頁面上的排名。
為了盡量減少您的 CLS 分數，請記住：
- 安裝像 Jetpack Boost 這樣的核心 Web Vitals 插件。
- 設置圖像、視頻、廣告和其他嵌入內容的尺寸。
- 在本地託管 Web 字體並預加載它們。
- 為動態注入的內容設置佔位符。
- 使用 Happy Addons for Elementor 插件製作動畫。
雖然累積佈局偏移只是影響您網站 SEO 的一個因素，但它也是一個值得注意的用戶體驗考慮因素。 一些工作可以在您的搜索排名和訪問者到達後的體驗方面得到持久的改善。