[ad_1]
在 WordPress 中遇到累積布局轉換問題？
Cumulative Layout Shift，簡稱 CLS，是一個以用戶體驗為中心的指標，它是 谷歌新的 Core Web Vitals 計劃.
如果您曾經瀏覽過在載入時跳來跳去的頁面，那麼您就會體驗到布局轉換，並且您也知道 WordPress 中的高累積布局轉換是多麼令人討厭。 但是，除了惹惱您的訪問者之外，CLS 還會影響您的搜索引擎排名，因此解決您的網站存在的任何問題非常重要。
幸運的是，您無需成為技術專家即可識別和解決累積布局偏移問題。 通過了解其原因並知道如何糾正它們，您可以減少網站上意外變化的數量。
在本文中，我們將向您介紹 Google 的 Cumulative Layout Shift 指標，並向您展示如何檢測您網站上的 CLS 問題。 然後，我們將帶您通過三種簡單的方法來解決問題並降低您網站的 CLS 分數。
📚 目錄：
如何在#WordPress 中識別和#fix 累積#layout 變化⛹️♀️
WordPress 中累積布局轉換的介紹
當頁面上的內容在沒有用戶交互的情況下四處移動時，就會發生布局偏移。
一個常見的例子是延遲載入廣告，您可能在媒體網站上遇到過這種情況。 您可能已經開始閱讀頁面上的文本，只是因為該文本會被頁面載入後顯示的廣告「下推」。
這是來自人們的有用視覺 網路開發 – 用戶打算單擊「否，返回」但不小心單擊了「是，下訂單」，因為布局偏移導致按鈕位置在初始頁面載入後移動：
累積布局偏移是一種衡量頁面上發生的所有布局偏移並將其放入一個單一分數的指標。 稍後我們將討論得分。 但總的來說，高分表示很多布局轉變（差），而低分表示很少布局轉變（好）。 零分意味著您的網站的布局偏移問題為零，這是完美的。
正如您想像的那樣，移動元素可能會讓您的用戶頭疼。 這可能會導致他們無意中點擊您頁面的某些部分，甚至不小心進行了購買，如上例所示。
即使沒有直接後果，許多布局變化也會在視覺上令人不快。 結合它可以減慢您的載入時間這一事實，這個看似小問題可能會對您的觀眾產生嚴重影響 用戶體驗（UX）.
不幸的是，高累積布局偏移的問題並沒有就此結束。 Cumulative Layout Shift 也是 Google 新的 Core Web Vitals 計劃的一部分。 從 Google 的頁面體驗更新開始，您網站的 Core Web Vitals 分數現在是一個很小的 SEO 排名因素，這意味著 CLS 問題可以 影響您網站的排名.
如何識別 WordPress 中累積布局偏移的問題
要查找您網站的累積布局偏移分數並確定問題，我們建議使用 PageSpeed 洞察力. 它將為您提供站點的整體 CLS 分數，但它也會更深入並標記導致問題的特定布局轉換問題。
首先，在框中輸入您的 URL，然後單擊分析。 這個過程應該只需要幾分鐘。 獲得結果後，向下滾動到實驗室數據或欄位數據部分，然後查找您站點的累積布局偏移分數：
從這裡，您可以確定您的網站在該領域的表現。 作為一般經驗法則，您的 CLS 分數可以分為三個潛在範圍：
- 好，等於或小於 0.1
- 好的，介於 0.1 和 0.25 之間
- 差，即 0.25 或更多
由於該指標直接影響 優化您的 Core Web Vitals，您應該嘗試爭取儘可能低的分數。 有關如何執行此操作的更具體提示，您可以向下滾動到診斷部分並查看避免大的布局偏移。 本節將列出您網站上的各個布局變化：
此信息可以幫助指出您站點中可能需要做一些工作的特定區域。 確定問題後，您可以應用一些簡單的方法來解決它。
如何修復 WordPress 中的累積布局偏移（3 種方式）
讓我們看看解決 CLS 問題的三種有效方法。 這些方法一起使用時最強大，因此我們鼓勵您嘗試每種方法。
1. 為您的圖片、視頻和廣告添加維度
如果您的網站上有很多媒體，則每個圖像和視頻可能具有不同的尺寸。 無論您運行哪種網站，這都可以說是不可避免的。
從本質上講，這種差異不會直接影響您的 CLS 分數。 儘管如此，它仍然構成威脅——如果您不指定項目的尺寸，您可能會開始遇到問題。
添加維度是必不可少的，因為它為瀏覽器提供了重要的載入指令。 維度信息可幫助瀏覽器為該資產保留正確的空間量。
如果瀏覽器不能這樣做，它可能會預測錯誤的空間量。 因此，頁面載入後可能會進行更正，從而導致布局偏移。 同樣的原則適用於您網站上的廣告或任何嵌入材料。
幸運的是，最近版本的 WordPress 在很大程度上解決了這個問題。 如果您通過以下方式插入圖像 WordPress 編輯器, WordPress 將自動為您定義其尺寸。 您可以通過選擇任何媒體來查看結果：
但是，如果您曾經使用代碼或通過插件手動添加圖像，則需要確保圖像尺寸在那裡。
WordPress 上 CLS 的一個更大的問題是廣告。 如果你是 在您的內容中放置廣告，您需要確保為這些廣告保留空間以避免 CLS。
一種方法是將 min-height 和 min-width CSS 屬性應用於包含您的廣告的
例如，如果您在 id 為 in-content-ad 的 div 內顯示一個 300x250px 的廣告，您可以使用以下代碼預留空間：
一些廣告工具也可能提供工具來幫助您實現這一目標。 例如，如果你是 使用 Google Ads, 谷歌提供了一個 廣告編輯器 來幫助解決這個問題。
2. 預載入你的字體
就像媒體一樣，您的網站可能使用許多不同的字體。 這意味著它們也可能佔用不同數量的空間。 但是，與媒體不同的是，您無法準確設置字體的尺寸。
解決方案是預載入這些資產。 預載入你的字體向瀏覽器發出信號，它應該是它為任何給定頁面生成的第一件事。 通過首先包含字體，您無需事後進行更正。
如果您使用大量 自定義 WordPress 字體. 這些字體的大小可能與普通字體有很大不同，這意味著這種簡單的更改可能會產生很大的影響。 然而，即使是不太依賴字體的網站也可能會經歷至少輕微的 CLS 分數改進。
許多 WordPress 性能 插件包括預載入字體的選項。 例如，自動優化、資產清理、Perfmatters 和 WP Rocket。
對於大多數人來說，使用這些插件之一是預載入 WordPress 字體的最簡單的解決方案。
但是，對於更高級的用戶，您還可以使用自己的自定義代碼片段預載入字體。 要添加此代碼片段，您需要編輯 header.php 文件 你的孩子主題. 您可以通過轉到 WordPress 網站上的外觀 > 主題編輯器 > 主題標題來編輯此文件：
編輯子主題中的 header.php 文件後，滾動到頁面底部，然後複製並粘貼以下代碼行，確保將示例字體鏈接 – 本示例中的 robots.woff2 – 替換為您在網站上使用的字體文件的實際鏈接：
準備就緒後，單擊「更新文件」以保存更改。 這就是您所要做的 – 您網站的字體現在將在瀏覽器中優先載入。
3. 優化您的動態內容
最後，讓我們談談您網站的動態內容。 動態內容，例如 通訊報名表，應用安裝提示， GDPR 通知等都可以通過在頁面大部分載入後重新調整瀏覽器來導致布局轉換。
但是，這僅適用於不是由用戶交互觸發的動態內容。 例如，如果您在主頁上載入一個自動通知欄來迎接人們，這可能會損害您的 CLS 分數。
有兩種方法可以解決這個問題：
- 僅在用戶交互後觸發動態內容，不會影響您的 CLS 分數。 例如，您不是立即顯示電子郵件選擇加入表單，而是在用戶單擊按鈕以創建兩步選擇加入時觸發它。
- 使用 CSS 為動態元素保留空間，類似於我們上面討論的內容。 例如，如果您使用 CSS 為頁面頂部的通知欄保留空間，您仍然可以載入該欄而不會導致布局偏移。
永久修復 WordPress 中的累積布局偏移
如果您想創造良好的用戶體驗並提高您在 Core Web Vitals 中的分數，那麼擁有較低的累積布局轉換分數非常重要。 幸運的是，防止這個煩人的問題並不難。 只需注意幾個簡單的設置，您就可以糾正網站的載入問題。
如何識別#WordPress中累積的#layout shift問題（並修復它們）⛹️♀️
在本文中，我們介紹了三種修復和減少 WordPress 中累積布局偏移的方法：
- 確保您的所有媒體和廣告都有明確定義的尺寸。 WordPress 將自動處理您嵌入編輯器中的圖像，但您可能需要手動定義廣告和您在編輯器外添加的任何圖像的尺寸。
- 預載入您的字體以避免最後一刻的調整。
- 注意你如何實現動態內容——要麼要求用戶交互，要麼為任何動態元素保留空間。
您對改進 WordPress 中的累積布局轉換還有任何疑問嗎？ 讓我們在評論中知道！