[ad_1]
大多數網站都是為從具有不同屏幕尺寸和解析度的各種設備訪問而構建的。 因此，在多個平台上保持相同的體驗可能很困難。 WordPress 使跨平台的網頁設計更容易. 然而，在任何形式的軟體開發中，構建一個通用的解決方案都可能很複雜。
在 Web 開發的情況下，用戶在網站上從一個頁面導航到另一個頁面有時可能會遇到所謂的累積布局偏移 (CLS)。 當頁面的視覺元素髮生突然變化或載入不正確時。 突然文本變得更大或更小，圖像改變它們的位置，或者整個頁面布局改變。
為什麼會發生這種情況，我們該如何解決？ 在本指南中，我們將探討什麼是 CLS 以及如何在您的網站上防止它。
什麼是累積布局偏移？
CLS 最常見的可感知形式是 圖片載入滯後. 在具有大量視覺元素的複雜網站上，您經常會注意到文本在媒體元素之前載入。 此外，當最終載入所有視覺元素時，網頁的布局會發生變化。 無論您是否滾動，這些事件都會發生。
當網頁的 CLS 分數很高時，很難確定它何時完全載入。 網站越複雜，媒體越多，體驗布局變化的可能性就越大。
例如，具有很少視覺元素的簡單搜索引擎網頁幾乎沒有 CLS。 然而，這並不意味著所有複雜或功能豐富的網站都具有高 CLS 分數。 例如，亞馬遜的在線商店充滿了小部件、圖像和鏈接，但載入速度很快，沒有任何可察覺的變化。
什麼導致累積布局偏移？
CLS 往往會發生，因為 Web 瀏覽器在不同的時間順序載入元素。 此外，您的網站上可能有具有未知屬性（例如尺寸）的媒體元素。
如果您沒有指定媒體元素（例如圖像）的寬度或高度，您的 Web 瀏覽器將不知道要分配多少空間，直到網頁完全載入完畢。 因此，劇烈的布局轉變。 總之，大多數 CLS 的主要原因是載入效率低下。
需要注意的是，即使您沒有實時注意到布局發生變化，也不一定意味著沒有發生任何變化。 Web 瀏覽器通常會緩存網站數據，因此在您重新訪問網頁時可以更輕鬆地載入它們。 測量 CLS 分數是確定您的網站是否經歷了大量布局轉換的最佳方法。
如何衡量您網站的 CLS 分數
CLS 分數表示網頁在其整個生命周期中經歷的布局轉換次數。 我們可以從所謂的會話窗口中得出 CLS 分數。 會話窗口描述了在 5 秒間隔內發生的布局轉換次數。 要計算 CLS 分數，我們需要將距離分數乘以影響分數：
CLS 分數 = 距離分數 x 影響分數
這 影響分數 描述了不穩定元素對兩幀之間的可感知區域的影響程度。 距離分數描述了元素在幀之間移動的量。 0.10 及以下 (0.0 – 0.10) 的 CLS 分數很好。 CLS 分數高於 0.10 但低於 0.25 (0.10 -0.25) 是中等的，需要改進，而高於 0.25 (0.25 <) 的 CLS 分數很差。
這些概念可能有點難以理解。 幸運的是，您不必手動計算網站的 CLS。 有許多在線（和離線）工具可以為您計算 CLS 分數。
目前，衡量網頁 CLS 的最流行方法是通過 Google 的 PageSpeed Insights。 它允許您確定您網站的移動和桌面迭代的用戶體驗統計數據。
其他 CLS 工具包括：
由於 Google 的 PageSpeed Insights 是最熟悉的，因此我們將在示例中使用它。
要衡量您的 CLS 分數，請導航到 PageSpeed Insight 主頁，將您網頁的 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 與確保它具有 強大的本地搜索引擎優化 和相關內容。 Google 的搜索引擎傾向於優先考慮提供出色用戶體驗且優化良好的網站。
為此，以下是提高網站 CLS 分數的幾個步驟：
為所有媒體文件添加維度屬性
如果您上傳屬性未知的媒體文件，則會增加布局偏移的風險，因為您的 Web 瀏覽器需要在載入後確定圖像的大小並確定布局方向。 對於大型高解析度圖像和文件，這些情況發生的可能性更大。
通過上傳缺少大小屬性的媒體文件，您已經將過多的工作交給了 Web 瀏覽器。 您必須為您上傳的每個視覺媒體文件添加高度和寬度屬性。 您可以通過查看源代碼並手動添加寬度和高度屬性來完成此操作。
確保字體在本地載入
在字體載入期間文本必須保持可見。 實現這一目標的第一步是確保字體在本地載入，而不是從第三方字體網站拉取。
如果您發現您的字體是從第三方網站拉取的，您可以使用 OMGF 等插件在本地託管它們並更快地載入它們。 這不僅會提高您的 CLS 分數，而且也是朝著 環保設計.
避免 FOIT 和 FOUT
當您未能指定後備字體時，會出現不可見文本 (FOIT) 閃爍。 當您的 Web 瀏覽器嘗試載入您的字體或尋找替代字體時，用戶將看到一個空白區域，文本應該在其中。
在無樣式文本 (FOUT) 閃爍期間，您將看到 Web 瀏覽器的默認後備字體，直到它可以載入您指定的字體。 要解決此問題，您可以添加屬性 font-display: swap。
如果您曾經從 Google 下載過字體，您會注意到它會將此標記添加到每個 URL 的末尾。 自己添加此屬性的最簡單方法是使用 WP 上的 Swap Google Fonts Display 插件。
但是，請記住，此插件僅適用於 Google 字體，它會自動將顯示交換屬性附加到這些 URL。 如果您在本地託管字體，則可以使用 String Locator 插件來查找所有字體文件並對其進行更改。 您需要在 WP 中打開字體樣式表並進行修改。
或者，您可以使用 緩存插件，例如通過添加字體交換屬性為您自動優化字體。
預載入字體
為確保您在本地託管字體，您可以使用以下插件預載入字體：
如果您負擔不起使用這些插件的費用，您可以通過編輯 header.php 文件來預載入您的字體。 只需確保在預載入字體後徹底測試您的網站。 預載入太多字體可能會損害您的網站。 因此，對於任何主要的後端機會，我們建議您 備份您的 WordPress 網站 預先。
禁用 CSS 交付優化
如果您使用 WP Rocket 優化 CSS 交付或使用 LiteSpeed Cache 非同步載入 CSS，則可能會導致無樣式內容 (FOUC) 閃爍。 如果您想提高 CLS 分數，我們建議您在各自的插件中禁用這些選項。
或者，您可以設置所謂的後備關鍵 CSS。 這涉及使用類似的工具生成一個關鍵的回退腳本 關鍵路徑 CSS 生成器.
刪除 渲染阻塞腳本 也可能會降低您的 CLS 分數。 我們建議您首先在啟用 CSS 交付優化的情況下測試您的 CLS，然後在禁用它進行比較時進行測試。
禁用動畫
如果您正在使用動畫，我們建議您為網站的移動版本禁用它們，因為動畫會阻礙您網站的載入時間。 如果您堅持要為您的網站添加動畫，我們建議您使用 CSS 轉換和翻譯 選項。
或者，您可以使用 Happy Addons Elementor 插件。 這使您可以在不引起布局偏移的情況下為元素設置動畫。
消除大多數布局偏移的最佳方法是修改網頁的載入方式。 反過來，你可以 提高 WordPress 網站的速度 和效率。 與往常一樣，這是關於改善用戶體驗。 您的網站響應速度越快，用戶將其添加為書籤並重新訪問它的可能性就越大。