累積版式轉換解釋：如何修正你的分數

正在為您網站上的累積版式轉移問題而苦苦掙扎？ 或者不確定 Cumulative Layout Shift 到底意味著什麼？

Cumulative Layout Shift，簡稱 CLS，是 Google Core Web Vitals 計劃的一部分。

簡而言之，它衡量網頁內容“意外”變化的程度。 高 CLS 分數可能表示用戶體驗不佳，也可能拖累您網站的 SEO。

在這篇文章中，您將了解有關 Cumulative Layout Shift 的所有信息，以及它如何影響 WordPress 網站（以及一般的 Web）。

什麼是累積佈局偏移 (CLS)？ 解釋累積佈局偏移的含義

Cumulative Layout Shift 是衡量您網站上的頁面在用戶訪問期間意外移動的程度，由標準化性能測試 API Layout Instability API 衡量。

Cumulative Layout Shift (CLS) 是 Google Core Web Vitals 計劃中的三個指標之一，另外兩個是 Largest Contentful Paint (LCP) 和 First Input Delay (FID)。

為了理解 Cumulative Layout Shift 的含義，從總體上討論佈局偏移很重要。

當您網站上的內容意外“移動”或“移動”時，就會發生佈局偏移。

或者，用技術術語來說，就是當視口中可見的任何元素在兩幀之間更改其起始位置時。

一個常見的例子是，您正在閱讀一段文本……但是突然出現延遲加載的廣告並將文本內容推到頁面下方。

這是來自 Google 的另一張示例圖片，展示了這種情況：

在瀏覽網頁時，您幾乎肯定遇到過佈局變化，即使您不知道它們的名字。

一次訪問可能有多個單獨的佈局轉換事件。 因此，Cumulative Layout Shift 指標旨在通過測量頁面上意外佈局偏移的總量來捕捉整個畫面*。

*經過 Google 的一些更改後，確切的衡量標準有點技術性，但這仍然是基本的想法。 如果您對細節感興趣，可以在此處閱讀。

為什麼 Cumulative Layout Shift 不好？

Cumulative Layout Shift 不好的主要原因是它會在您的網站上造成糟糕的用戶體驗。

充其量，這對您的訪客來說有點煩人。 在最壞的情況下，它可能會導致訪問者執行他們不想執行的操作。

例如，想像一下，如果用戶想要單擊“取消”但不小心單擊了“確認”，因為佈局偏移將按鈕的位置移到了用戶單擊的位置。

除了影響人類訪問者的體驗之外，糟糕的 Cumulative Layout Shift 分數也會拖累您網站的搜索引擎排名。

從 Google 的頁面體驗更新（於 2021 年 8 月完成推出）開始，Google 使用 Core Web Vitals 作為其 SEO 排名因素之一。 由於 Cumulative Layout Shift 是 Core Web Vitals 的一部分，這意味著它會影響您網站的搜索性能。

基本上，修復您網站上的任何 Cumulative Layout Shift 問題將有助於使其更好地為人類訪問者和搜索引擎服務。

那麼——是什麼導致了 Cumulative Layout Shift？ 接下來讓我們介紹一下……

是什麼導致累積佈局偏移？

以下是佈局偏移的最常見原因的簡要說明：

• 不為圖像、iframe、視頻或其他嵌入設置尺寸。
• 自定義字體加載問題，這可能導致文本在加載自定義字體時不可見或更改大小。
• 提供不同尺寸的自適應廣告（例如 AdSense）（並且不為這些廣告保留空間）。
• 使用插件動態注入內容（cookie 同意通知、潛在客戶生成表格等）。
• 使用沒有 CSS Transform 屬性的動畫。

我們將在本文後面更深入地探討這些問題，向您展示如何解決每個常見問題。

如何衡量累積佈局偏移：最佳測試工具

您可以使用多種工具來測試站點的 Cumulative Layout Shift 分數。

Cumulative Layout Shift 是 Lighthouse 審計的一部分，因此任何使用 Lighthouse 作為其審計一部分的速度測試工具都將包括 CLS 數據——這包括 PageSpeed Insights、GTmetrix、Chrome 開發者工具和許多其他流行的測試工具。

以下是一些因其實用性而脫穎而出的頂級 Cumulative Layout Shift 測試工具……

PageSpeed 洞察力

PageSpeed Insights 是評估網站佈局變化狀態最有用的工具之一，因為它為您提供了兩個數據源：

• 實地數據——Chrome 用戶體驗報告中的真實用戶數據（假設您的網站有足夠的流量包含在報告中）。 這使您可以看到真實人類訪客的實際 Cumulative Layout Shift 數據。 這也是谷歌用作排名信號的數據。
• 實驗室數據– Lighthouse 收集的模擬測試數據（PageSpeed Insights 使用它來生成其性能分析報告）。

您還可以通過在選項卡之間切換來查看桌面和移動設備的數據。

注意– 實驗室數據只能測量頁面加載期間發生的佈局變化，因此如果您在頁面加載後發生佈局變化，您的真實用戶結果可能會略高。

Chrome 開發者工具

Chrome 開發者工具提供了一些有用的資源，用於測量 CLS 和調試網站上發生的個別佈局變化。

首先，您可以運行 Lighthouse 審核以查看您網站的 CLS 分數。 這是如何做：

1. 打開 Chrome 開發者工具。
2. 轉到燈塔選項卡。
3. 配置您的測試。
4. 單擊Analyze page load按鈕運行測試。

稍等片刻後，您應該會看到常規的 Lighthouse 審核界面（看起來很像 PageSpeed Insights）。

但是，Chrome 開發人員工具還可以讓您通過其渲染分析更深入地了解 CLS。 這將使您突出顯示站點中的各個佈局轉換區域，從而幫助您調試它們。

這是如何做：

1. 點擊 Chrome 開發者工具界面右上角的“三點”圖標。
2. 選擇More Tools → Rendering ，這應該會在底部打開一個新界面。
3. 選中Layout Shift Regions複選框。

現在，重新加載您要測試的頁面，Chrome 應該會使用藍色框突出顯示佈局發生變化的任何區域。 這些突出顯示將在內容加載時出現在實際頁面上，並在班次結束後消失。

如果亮點出現得太快以至於您無法跟上，您可以放慢網站速度並使用“性能”選項卡逐幀觀看它的加載。

谷歌搜索控制台

雖然 Google Search Console 不允許您運行實驗室測試來確定 Cumulative Layout Shift，但它確實為您提供了一種簡單的方法來查看您網站上的 Cumulative Layout Shift 問題，正如 Chrome UX 報告所衡量的那樣。

與其他工具相比，使用 Google Search Console 的優勢在於它可以讓您快速查看整個網站的問題，而不是逐頁測試。

查看您網站上的潛在問題的方法如下：

1. 轉到谷歌搜索控制台。 如果您還沒有驗證您的網站，您可以按照我們關於如何驗證 Google Search Console 的指南進行操作。
2. 打開Experience下的Core Web Vitals報告。
3. 單擊移動或桌面旁邊的打開報告，具體取決於您要分析的內容。

如果適用，Google 將突出顯示具有有問題的 Cumulative Layout Shift 分數的 URL。

注意– 只有當您的網站有足夠的每月流量可以包含在 Chrome 用戶體驗報告中時，您才會在此處看到數據。

佈局轉換 GIF 生成器

顧名思義，Layout Shift GIF Generator 會在您的網站上生成佈局轉換的 GIF，以便您可以準確查看導致問題的內容。 它還會為您提供分數，儘管這不是該工具的主要重點。

您所要做的就是添加要測試的 URL，然後在移動設備或桌面設備之間進行選擇。 然後，它將生成您網站的 GIF，其中綠色高亮顯示正在移動的確切元素。

通過查看哪些元素正在四處移動並為您的 Cumulative Layout Shift 分數做出貢獻，您可以確切地知道在提高網站分數時應該關注哪裡。

什麼是好的累積佈局分數？

根據 Google 的 Core Web Vitals 計劃，良好的 Cumulative Layout Shift 得分為0.1 或更低。

如果你的 Cumulative Layout Shift 得分在 0.1 到 0.25 之間，谷歌將其定義為“需要改進”。

如果你的 Cumulative Layout Shift 分數高於 0.25，谷歌將其定義為“差”。

這是來自 Google 的 Core Web Vitals 網站的圖表，直觀地展示了這些分數：

如何修復 WordPress（或其他平台）中的累積佈局偏移

既然您了解了 Cumulative Layout Shift 發生了什麼，是時候轉向一些關於如何修復 WordPress 中的 Cumulative Layout Shift 的可操作技巧了。

雖然這些技巧確實來自 WordPress 的角度，但它們都是通用的，您可以將它們應用於其他網站構建工具。

始終指定圖像的尺寸

佈局偏移的最常見原因之一是延遲加載圖像移動內容，尤其是當您使用延遲加載等策略時。

為避免這種情況，您可以在嵌入圖像時在代碼中指定圖像的尺寸。 這樣，即使圖像尚未加載，訪問者的瀏覽器也會保留該空間，這意味著圖像不需要移動內容。

如果您通過 WordPress 編輯器（Gutenberg 塊編輯器或經典的 TinyMCE 編輯器）嵌入圖像，則無需手動指定圖像尺寸，因為 WordPress 會自動為您執行此操作。

Elementor、Divi、Beaver Builder 等流行的頁面構建器插件也是如此。

但是，如果您使用自己的代碼手動嵌入圖像，可能會出現問題，如果您向插件添加內容、編輯子主題的模板文件等，則可能會發生這種情況。

基本圖像嵌入的 HTML 代碼如下所示：

<img src="https://kinsta.com/example-image.jpg" alt="An example image">

要指定其尺寸，您可以添加高度和寬度參數。 下面是一個 600x300 像素圖像的示例：

<img src="https://kinsta.com/example-image.jpg" alt="An example image" width="600" height="300" >

許多 WordPress 性能插件還包括自動執行此操作的功能，例如 WP Rocket 或 Perfmatters 中的添加缺失圖像尺寸功能。

始終為視頻、iframe 和其他嵌入指定尺寸

與圖像一樣，無論何時添加視頻、iframe 或其他嵌入，您都需要指定尺寸。

大多數網站的嵌入工具應自動指定嵌入的尺寸。

例如，如果您查看 YouTube 嵌入代碼，您會發現它包含維度：

許多其他服務也是如此。

但是，如果您的嵌入代碼未指定高度和寬度，您可以手動將這些尺寸添加到嵌入代碼中。

修復和優化字體加載

字體加載和優化問題可能是通過兩個潛在問題導致佈局變化的另一個常見原因：

• 不可見文本閃爍 (FOIT) – 頁面最初加載時根本沒有出現任何文本內容。 加載自定義字體後，文本會突然出現（這可能會導致現有內容移動）。
• 無樣式文本閃爍 (FOUT) – 使用系統字體（無樣式）加載文本內容。 加載自定義字體後，文本會更改為該自定義字體，這可能會導致內容髮生變化，因為文本大小和間距可能不同。

為避免這些問題，您需要優化在網站上加載字體的方式（這也可以對網站的性能產生一些好處）。

本地託管字體和預加載字體

通過在本地託管字體並使用預加載，您可以告訴訪問者的瀏覽器將更高的優先級放在加載自定義字體文件上。

通過在其他資源之前加載字體文件，您可以確保在瀏覽器開始呈現您的內容時字體文件已經加載，這可以防止 FOUT 和 FOIT 出現問題。

要了解如何在 WordPress 本地託管字體，您可以閱讀我們在 WordPress 本地託管字體的完整指南。

從那裡，您可以手動或使用插件設置字體預加載。 大多數性能插件都包含預加載字體的選項，包括 WP Rocket、Perfmatters、Autoptimize 等。

如果您使用的是 Google 字體，您還可以使用免費的 OMGF 插件在本地託管字體並預加載它們。

您還可以通過將代碼添加到站點的<head>部分來手動預加載字體。

這是一個代碼示例——確保將其替換為您要預加載的字體文件的實際名稱/位置：

<link rel="preload" href="https://kinsta.com/fonts/roboto.woff2" as="font/woff2" crossorigin>

您可以使用 WordPress 子主題直接添加它，或者使用 wp_head 掛鉤和代碼片段之類的插件注入它。

將字體顯示設置為可選或交換

CSS Font-Display 屬性可讓您控製網站上字體的呈現行為並避免 FOIT。

本質上，它允許您在自定義字體尚未加載的情況下使用後備字體。

您可以使用兩個主要選項來解決 CLS：

• 交換——在加載自定義字體時使用後備字體，然後在加載字體後將其更改為您的自定義字體。
• 可選——讓瀏覽器根據訪問者的連接速度確定是否使用自定義字體。

使用Swap ，瀏覽器在加載後將始終更改為自定義字體。

雖然Swap完全解決了 FOIT，但它也可能導致 FOUT。 為了盡量減少這種情況，您應該確保後備字體使用與自定義字體相同的間距（至少盡可能多）。 這樣，即使字體樣式發生變化，也不會導致佈局發生變化，因為間距是相同的。

使用Optional ，瀏覽器將為自定義字體提供 100 毫秒的加載時間。 但是，如果屆時自定義字體不可用，瀏覽器將只使用後備字體，永遠不會將其更改為該頁面瀏覽的自定義字體（它將為後續頁面瀏覽使用自定義字體，因為字體很可能到那時文件已經下載並緩存了）。

雖然Optional可以同時解決 FOIT 和 FOUT，但缺點是訪問者可能會在第一次頁面瀏覽時使用後備字體。

如果您覺得使用 CSS 很舒服，您可以在子主題的樣式表中手動編輯 Font-Display 屬性。

如果您覺得這樣做不方便，您還可以找到一些有幫助的插件：

• 交換谷歌字體顯示——輕鬆啟用谷歌字體的字體顯示交換。
• Asset CleanUp – 支持免費的 Google Fonts 和 Pro 版本的自定義本地字體。
• Perfmatters – 為谷歌字體提供一個功能。

如果您使用的是 Elementor，Elementor 還包含一個內置選項來執行此操作。 轉到Elementor → 設置 → 高級。 然後，您可以根據自己的喜好將Google Fonts Load下拉菜單設置為 Swap 或 Optional：

太複雜？ 考慮一個系統字體堆棧！

如果所有關於預加載和字體顯示的討論有點令人困惑，一個簡單的解決方法是只使用系統字體堆棧而不是自定義字體堆棧。

雖然這確實會限制您的設計選項，但它將完全解決 Cumulative Layout Shift 字體問題、FOIT 和 FOUT。 此外，它還可以幫助您的網站加載速度更快。

如果您對此感興趣，請查看 Brian 在 WordPress 上使用系統字體堆棧的指南。

為廣告預留空間（如果使用展示廣告）

如果您使用展示廣告，請務必在網站代碼中為這些廣告預留空間。 這遵循與為圖像、視頻和嵌入保留空間相同的想法。

但是，展示廣告值得特別提及，因為如果您使用任何類型的出價技術，延遲加載展示廣告是很常見的。 這是因為出價技術需要時間來確定要顯示的廣告。

如果您有動態廣告位，這也可能是 AdSense 自動廣告的問題，因為除了出價問題外，AdSense 還會加載不同尺寸的廣告（因此您可能無法提前知道廣告的尺寸）。

如果您使用的是 Mediavine 或 AdThrive 等流行的展示廣告網絡之一，它們應該已經提供了一些工具來幫助您避免廣告佈局發生變化。 例如，如果您打開 Mediavine 的廣告設置區域，您可以啟用切換以針對 CLS 優化廣告：

要針對 Cumulative Layout Shift 優化 AdSense，需要一些技巧。

一種常見的解決方法是在每個廣告單元周圍添加一個 <div> 包裝元素，使用min-height CSS 屬性指定最小高度。 您還可以使用媒體查詢根據用戶的設備更改最小高度。

Google 建議將最小高度設置為等於可能的最大廣告尺寸。 如果投放較小的廣告，這可能會導致空間浪費，但這是消除任何可能發生佈局偏移的最佳選擇。

設置此包裝器元素時，請確保使用 CSS ID 而不是類，因為 AdSense 通常會從父對像中刪除 CSS 類。

CSS 可能如下所示：

AdSense 嵌入可能如下所示：

在前端，您現在會看到您的網站為該廣告保留了空間，即使它是空的：

使用插件動態注入內容時要聰明

很多 WordPress 站點會動態注入功能內容，例如 cookie 同意通知、相關內容、電子郵件選擇加入表單等。

雖然這樣做很好，但您需要小心避免以導致佈局偏移的方式進行。

這裡一個好的網頁設計最佳實踐是永遠不要在現有內容之上註入內容，除非用戶專門進行了交互（例如單擊按鈕）。

例如，如果您要添加 cookie 同意通知，您不想將其插入頁面頂部，因為這會導致內容被下推（除非您已經為 cookie 同意橫幅預留空間） .

相反，您應該在頁面底部顯示通知，這將避免下移可見內容。

要查看問題是否由動態內容引起，您可以使用上面的可視化工具（例如 Layout Shift GIF Generator）。

如果您發現來自特定插件的內容觸發了佈局變化，您可以考慮調整該插件的設置或切換到其他插件。

例如，一些 cookie 同意插件在佈局轉換方面優於其他插件，因此如果您遇到問題，值得嘗試不同的插件。

如果您想更深入地了解插件行為，可以使用應用程序性能監控工具。 如果您使用 Kinsta 託管，Kinsta 的 APM 工具可在您的 MyKinsta 儀表板中免費獲得，或者您可以找到其他 APM 工具。

為了幫助您測試插件，您還可以使用 Kinsta 的暫存站點或 DevKinsta 本地開發工具。

盡可能為動畫使用 CSS Transform 屬性

如果您在網站上使用動畫，這些可能是佈局變化的另一個常見罪魁禍首。

為避免動畫問題導致佈局偏移，您應該對動畫使用 CSS Transform 函數而不是其他策略：

• 與其使用高度和寬度屬性，不如使用transform: scale()
• 如果您想移動元素，請使用transform: translate()而不是top 、 bottom 、 right或left

這更像是一個技術提示，因此除非您要添加自己的 CSS，否則您不太可能需要這樣做。 要了解更多信息，您可以閱讀 Google 關於 CLS 和動畫/過渡的頁面。

概括

如果您的網站具有較高的 Cumulative Layout Shift 分數，那麼修復它對於為您的人類訪問者創造更好的體驗並最大限度地提高您的網站在 Google 搜索結果中的表現非常重要。

兩個最常見的問題是圖像/嵌入的尺寸缺失和字體加載問題。 如果你解決了這些問題，你應該會取得更好的成績。

其他網站可能需要更進一步，深入研究廣告加載、動態內容和動畫。 如果您正在努力自己實施這些類型的優化，您可以考慮與 WordPress 代理商或自由職業者合作。

要了解有關 Core Web Vitals 的更多信息，您可以閱讀完整的 Kinsta Core Web Vitals 指南。

而且，如果您想要一個 WordPress 主機來幫助您創建一個在 Core Web Vitals 中表現良好的高性能網站，請考慮使用 Kinsta 的託管 WordPress 主機——我們將免費遷移您的 WordPress 網站！