如何改進 WordPress 的累積佈局轉換 (CLS)

大多數網站都是為從具有不同屏幕尺寸和分辨率的各種設備訪問而構建的。 因此，在多個平台上保持相同的體驗可能很困難。 WordPress 使跨平台的網頁設計更容易。 然而，在任何形式的軟件開發中，構建一個萬能的解決方案都可能很複雜。

在 Web 開發的情況下，用戶在網站上從一個頁面導航到另一個頁面有時可能會遇到所謂的累積佈局轉換 (CLS)。 當頁面的視覺元素發生突然變化或加載不正確時。 突然文本變大或變小，圖像改變它們的位置，或者整個頁面佈局改變。

為什麼會發生這種情況，我們該如何解決？ 在本指南中，我們將探討 CLS 是什麼以及如何在您的網站上阻止它。

什麼是累積佈局移位？

CLS 最常見的可感知形式是圖像加載滯後。 在包含大量視覺元素的複雜網站上，您經常會注意到文本在媒體元素之前加載。 此外，當最終加載所有視覺元素時，網頁的佈局會發生變化。 無論您是否滾動，這些事件都會發生。

當網頁具有較高的 CLS 分數時，很難確定它何時已完全加載。 網站越複雜，媒體越多，體驗佈局轉變的可能性就越大。

例如，視覺元素很少的簡單搜索引擎網頁幾乎沒有 CLS。 但是，這並不意味著所有復雜或功能繁重的網站都具有高 CLS 分數。 例如，亞馬遜的在線商店充滿了小部件、圖像和鏈接，但加載速度很快，沒有任何明顯的變化。

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

CLS 之所以會發生，是因為 Web 瀏覽器會在不同時間按順序加載元素。 此外，您網站上的媒體元素可能具有未知屬性（例如尺寸）。

如果您不指定媒體元素（例如圖像）的寬度或高度，您的網絡瀏覽器將不知道要分配多少空間，直到網頁完全加載。 因此，佈局發生了劇烈的轉變。 總之，大多數 CLS 的主要原因是加載效率低下。

需要注意的是，即使您沒有註意到佈局的實時變化，也不一定意味著沒有發生任何變化。 Web 瀏覽器通常會緩存網站數據，因此在您重新訪問網頁時更容易加載網頁。 衡量 CLS 分數是確定您的網站是否經歷重大佈局變化的最佳方法。

如何衡量您網站的 CLS 分數

CLS 分數表示網頁在其整個生命週期中經歷的佈局轉換次數。 我們可以從所謂的會話窗口中得出 CLS 分數。 會話窗口描述了在五秒間隔內發生的佈局轉換次數。 要計算 CLS 分數，我們需要將距離分數乘以影響分數：

 CLS 分數 = 距離分數 x 影響分數

影響分數描述了不穩定元素對兩幀之間可感知區域的影響程度。 距離分數描述了元素在幀之間移動的量。 0.10 及以下 (0.0 – 0.10) 的 CLS 分數非常好。 CLS 得分高於 0.10 但低於 0.25 (0.10 -0.25) 屬於中等，需要改進，而 CLS 得分高於 0.25 (0.25 <) 則較差。

這些概念可能有點難以理解。 幸運的是，您不必手動計算網站的 CLS。 有許多在線（和離線）工具可以為您計算 CLS 分數。

目前，衡量網頁 CLS 的最流行方法是通過 Google 的 PageSpeed Insights。 它允許您確定您網站的移動和桌面迭代的用戶體驗統計數據。

其他 CLS 工具包括：

• GT Metrix
• Google Web Vitals CLS 調試器
• Google Chrome Web Vitals 擴展程序
• 谷歌燈塔
• 網頁測試

由於 Google 的 PageSpeed Insights 是最熟悉的，因此我們將使用它作為示例。

要衡量您的 CLS 分數，請導航到 PageSpeed 洞察主頁，將您網頁的 URL 插入頂部文本字段，然後單擊分析按鈕。 根據您網站的受歡迎程度和互聯網速度，PageSpeed Insights 應該會在幾秒鐘內為您提供報告。

要查找您的 CLS 分數，請向下滾動到 Core Web Vitals Assessment 部分。

如果我們以亞馬遜的主頁為例，我們很可能會發現 CLS 分數低於 0.10。 在我們的測試中，我們發現移動網站的 CLS 得分為 0.01，而桌面版的得分為 0.05。

但是，當他們的網站資源如此密集時，他們是如何做到的呢？ 讓我們看看如何獲得類似亞馬遜的 CLS 分數。

如何優化 CLS

查看哪些元素導致您的 CLS 高分的最佳方法是使用 Google Web Vitals CLS 調試器。 它向您展示了您網站上所有轉換功能的 GIF。 廣告和媒體文件是 CLS 高分最常見的罪魁禍首。 其他原因可能包括字體、異步 CSS、動畫和 Iframe。 要提高您的 CLS 分數，您必須優化這些元素。

確保您的網站具有受人尊敬的 CLS 與確保其具有強大的本地 SEO 和相關內容同樣重要。 谷歌的搜索引擎傾向於優先考慮提供良好用戶體驗和優化的網站。

為此，以下是提高網站 CLS 分數的幾個步驟：

為所有媒體文件添加維度屬性

如果您上傳具有未知屬性的媒體文件，則會增加佈局偏移的風險，因為您的 Web 瀏覽器需要在加載後確定圖像的大小並確定佈局方向。 對於大型高分辨率圖像和文件，這些情況更有可能發生。

通過上傳缺少大小屬性的媒體文件，您將太多的工作交給了網絡瀏覽器。 您必須為上傳的每個可視媒體文件添加高度和寬度屬性。 您可以通過查看源代碼並手動添加寬度和高度屬性來完成此操作。

確保字體在本地加載

在字體加載期間文本必須保持可見。 實現這一目標的第一步是確保字體在本地加載，而不是從第三方字體網站拉取。

如果您發現您的字體​​是從第三方網站提取的，您可以使用 OMGF 等插件在本地託管它們並更快地加載它們。 這不僅會提高您的 CLS 分數，而且也是朝著環保設計邁出的一步。

避免 FOIT 和 FOUT

當您未能指定備用字體時，會出現不可見文本閃爍 (FOIT)。 當您的網絡瀏覽器嘗試加載您的字體或尋找替代字體時，用戶將看到一個空白區域，該區域應該是文本。

在無樣式文本 (FOUT) 閃爍期間，您將看到 Web 瀏覽器的默認後備字體，直到它可以加載您指定的字體。 要解決此問題，您可以添加屬性font-display: swap 。

如果您曾經從 Google 下載過字體，您會注意到它會將此標籤添加到每個 URL 的末尾。 自己添加此屬性的最簡單方法是使用 WP 上的 Swap Google Fonts Display 插件。

但是，請記住，此插件僅適用於 Google 字體，它會自動將顯示交換屬性附加到這些 URL。 如果您在本地託管字體，則可以使用字符串定位器插件來查找所有字體文件並更改它們。 您需要在 WP 中打開字體樣式表並進行修改。

或者，您可以使用緩存插件，例如通過添加字體交換屬性為您自動優化字體的插件。

預加載字體

為確保您在本地託管字體，您可以使用以下插件預加載字體：

• WP火箭
• 前*派對資源提示
• 事項

如果您負擔不起使用這些插件的費用，您可以通過編輯 header.php 文件來預加載字體。 只需確保在預加載字體後徹底測試您的網站。 預加載過多的字體可能會損害您的網站。 因此，與任何主要的後端機會一樣，我們建議您事先備份您的 WordPress 網站。

禁用 CSS 交付優化

如果您使用 WP Rocket 優化 CSS 交付或使用 LiteSpeed Cache 異步加載 CSS，則可能會導致無樣式內容 (FOUC) 的閃爍。 如果您想提高您的 CLS 分數，我們建議您在各自的插件中禁用這些選項。

或者，您可以設置所謂的後備關鍵 CSS。 這涉及使用關鍵路徑 CSS 生成器等工俱生成關鍵後備腳本。

刪除渲染阻止腳本也可能會降低您的 CLS 分數。 我們建議您先在啟用 CSS 交付優化的情況下測試您的 CLS，然後在禁用它時進行測試以進行比較。

禁用動畫

如果您使用動畫，我們建議您為您的網站的移動版本禁用它們，因為動畫會阻礙您網站的加載時間。 如果您堅持為您的網站添加動畫，我們建議使用 CSS 轉換和翻譯選項。

或者，您可以使用 Happy Addons Elementor 插件。 這允許您在不引起佈局變化的情況下為元素設置動畫。

消除大多數佈局偏移的最佳方法是修改網頁的加載方式。 反過來，您可以提高 WordPress 網站的速度和效率。 與往常一樣，它是關於改善用戶體驗的。 您的網站響應速度越快，用戶收藏並重新訪問它的可能性就越大。