什麼是累積佈局偏移 (CLS) 及應該如何優化提升

想象一下：你正在載入一個網站，它看起來已經準備好了。您單擊部落格特色圖片閱讀文章，突然整個頁面都發生了變化，因為剛剛載入了其他內容。然後您單擊完全不同的內容並載入一個您從未想過的頁面。如果您自己遇到過這個問題，您就會知道累積佈局偏移 (CLS) 如何對站點的使用者體驗 (UX)產生負面影響。

累積佈局偏移，簡稱CLS，是谷歌Core Web Vitals的一個指標。

簡而言之，它衡量一個網頁的內容有多少是 “意外 “移動的。一個高的CLS分數可以表明一個糟糕的使用者體驗，也可以拖累你的網站的SEO。

累積佈局偏移(CLS) 是頁面佈局在載入時發生多少偏移的術語，在本文中，我們將深入探討它的含義。我們將向您展示如何衡量CLS，並解釋什麼是好分數。然後我們將討論如何優化您網站的CLS分數。

什麼是累積佈局偏移 (CLS)？

累積佈局偏移是衡量你的網站上的一個頁面在使用者訪問期間意外移動的程度，由佈局不穩定性API（一個標準化的效能測試API）來衡量。

累積佈局偏移（CLS）是谷歌核心網路生命力計劃中的三個指標之一，另外還有最大內容繪畫（LCP）和首次輸入延遲（FID）。

為了理解累積佈局轉移的含義，有必要從總體上討論佈局轉移。

當你的網站上的內容意外地 “移動 “或 “轉移 “時，就會發生布局轉移。

或者，用技術術語來說，它是指任何在視口中可見的元素在兩個框架之間改變其起始位置。

一個常見的例子是，你正在閱讀一個文字塊……但隨後一個遲來的廣告突然出現，把文字內容推到了頁面的下方。

下面是谷歌提供的另一個例子，展示了這種情況的發生。

谷歌提供的一個累積佈局轉變的例子

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

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

*在谷歌做了一些改變之後，確切的衡量標準變得更加技術化了，但這仍然是基本的想法。如果你對這些細節感興趣，你可以在這裡瞭解更多資訊。

沒有比視覺示例更好的方法來說明高CLS分數（意味著來自Google PageSpeed Insights的任何超過0.10的任何內容）代表什麼。這是一個佈局隨著頁面載入而不斷變化的網站。請注意，我們在捕獲它時根本沒有滾動。我們的視口保持不變，但頁面本身發生了巨大的變化：

作為訪問此網站的使用者，您可能不確定它何時真正完成載入。你可能會嘗試點選一個新聞故事，但佈局卻發生了巨大的變化。結果你最終在錯誤的頁面上，你不得不浪費時間回去。根據頁面的不同，這可能會發生多次。如果是這樣，你很有可能會離開。

您的使用者也將如此。

網站越複雜，就越有可能獲得高CLS分數。對於標誌性的Google主頁等簡單佈局，沒有CLS，因為它們包含的元素很少：

這並不是說所有複雜的網站都有很高的CLS分數。以亞馬遜為例。沒有人會說這家電子商務巨頭使用簡單的網頁設計。然而，在瀏覽其目錄時幾乎看不到佈局變化。

佈局變化的發生是因為瀏覽器傾向於非同步載入頁面元素。更重要的是，您的頁面上可能存在初始尺寸未知的媒體元素。這種組合意味著瀏覽器在載入完成之前不知道單個元素將佔用多少空間。因此，劇烈的佈局轉變。

CLS的有趣之處在於它可以使用各種工具進行客觀測量，但它也是以使用者為中心的，因為每個使用者的裝置都會影響您網站佈局的變化方式。雖然您無法控制該方面，但您當然可以採取預防措施，使其影響最小。

CLS（英文全稱Cumulative Layout Shift）是Google 衡量的三個核心Web要素之一，可幫助其確定您的網站是否提供強大的使用者體驗 (UX)。Core Web Vitals其他兩個要素是First Input Delay (FID)和Largest Contentful Paint (LCP)，它們也絕對值得您為優化付出任何努力。

為什麼累積佈局偏移是個糟糕的事情？

累積佈局偏移不好的主要原因是，它在你的網站上創造了一個糟糕的使用者體驗。

在最好的情況下，它對你的訪問者來說是溫和的煩擾。在最壞的情況下，它可能導致訪問者執行他們不想採取的行動。

例如，想象一下，如果一個使用者想點選 “取消”，但卻不小心點選了 “確認”，因為在他點選的時候，佈局的改變改變了按鈕的位置。

除了影響你的人類訪客的體驗之外，累積佈局偏移的分數也會拖累你的網站在搜尋引擎上的排名。

從谷歌的頁面體驗更新（在2021年8月完成推出）來看，谷歌使用核心網頁指標作為其SEO排名因素之一。因為累積佈局偏移是核心網頁指標的一部分，這意味著它可以影響你的網站的搜尋效能。

基本上，修復您網站上的任何累積佈局偏移問題將有助於使它對人類訪問者和搜尋引擎都更有利。

那麼–什麼會導致累積佈局偏移呢？讓我們接下來討論這個問題…

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

下面是一個關於佈局偏移最常見的原因的簡要介紹。

• 沒有為圖片、iframe、視訊或其他嵌入物設定尺寸。
• 自定義字型載入的問題，這可能導致文字不可見或在自定義字型載入時改變大小。
• 提供不同尺寸的響應式廣告（例如AdSense）（並且沒有為這些廣告保留空間）。
• 用外掛動態地注入內容（cookie同意通知、線索生成表格等）。
• 使用沒有CSS Transform屬性的動畫。

在這篇文章的後面，我們會更深入地探討這些問題，因為我們會告訴你如何解決每個常見問題。

如何測量累積佈局偏移CLS

確定您的網站是否顯示明顯的佈局變化相對簡單。首先，我們建議您嘗試從各種裝置訪問您的網站，並要求其他人也這樣做。這樣做時，您可以觀察頁面載入時佈局是否保持一致。

您可能會發現CLS的體驗可能會有很大差異。這不僅取決於您的網站的優化程度，還取決於您使用的裝置。考慮到這一點，衡量網站CLS的最佳工具是PageSpeed Insights。這與Google的Core Web Vitals直接相關，因此您可以直接瞭解您的CLS分數如何影響Google如何看待您的網站。

通過此服務，您可以輸入一個 URL並根據 Google過去28天收集的資料接收該URL的總體效能得分。該分數考慮了幾個指標，包括 CLS、FCP和LCP。

對於這個測試，我們選擇了一個沒有明顯CLS的網站。PageSpeed Insights證實了我們的懷疑，因為它以強大的CLS得分返回了壓倒性的積極結果。

請注意，PageSpeed Insights為每個分數提供了一個百分比細分。在這種情況下，91%的使用者在載入測試網站時經歷了零布局偏移。然而，其餘的參觀者確實經歷了某種程度的佈局轉變。

當涉及到CLS和其他Core Web Vitals時，這是意料之中的。使用者體驗會因他們訪問的裝置、網際網路連線和許多其他因素而有很大差異。幾乎沒有辦法考慮到沒有使用者體驗過CLS，但您絕對可以採取預防措施來優化它，使百分比儘可能低。

在現場資料之上，PageSpeed Insights還提供它所謂的實驗室資料。這些是基於單次測試的效能分數，而不是長時間收集的資料（被視為現場資料）。

在我們的測試中，我們的CLS分數為零，這意味著沒有佈局偏移。對於這一特定的測試。現在讓我們將它與另一個沒有獲得如此高CLS分數的網站進行比較。

為了符合Google的標準，您的CLS分數應低於0.10。以上任何內容都意味著佈局中存在顯著的、明顯的變化，這會導致糟糕的使用者體驗。

除了通過PageSpeed Insights測量累積佈局偏移，您還可以結合Chrome Developer Tools、Google Search Console和Layout Shift GIF Generator三個工具進行測量。

Chrome Developer Tools

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

首先，您可以執行Lighthouse審計，檢視您網站的CLS得分。具體方法如下。

1. 開啟Chrome開發工具。
2. 轉到Lighthouse標籤。
3. 配置你的測試。
4. 點選 “Analyze page load“按鈕來執行測試。

經過短暫的等待後，你應該看到常規的Lighthouse稽覈介面（看起來很像PageSpeed Insights）。

如何在開發工具中執行Lighthouse審計

然而，Chrome開發者工具還可以讓你通過其Rendering分析更深入地挖掘CLS。這將讓你突出顯示你的網站中的個別佈局轉變區域，這有助於你對它們進行除錯。

1. 點選Chrome開發工具介面右上角的 “三個點 “圖示。
2. 選擇 “More Tools“→”Rendering“，這應該在底部開啟一個新介面。
3. 勾選Layout Shift Regions的方框。

如何在開發工具中檢視CLS渲染

現在，重新載入你想測試的頁面，Chrome瀏覽器應該用一個藍色的框來突出任何有佈局變化的區域。這些亮點會在內容載入時出現在實際頁面上，並在轉變完成後消失。

如果高亮顯示的速度太快，你無法跟上，你可以放慢網站的速度，使用 “Performance“選項卡逐幀觀察它的載入。

Google Search Console

雖然谷歌搜尋控制檯不能讓你執行實驗室測試來確定累積佈局偏移，但它確實給了你一個簡單的方法來檢視你網站上的累積佈局偏移問題，正如Chrome使用者體驗報告所衡量的那樣。

與其他工具相比，使用Google Search Console的好處是，它可以讓你快速檢視整個網站的問題，而不是逐頁測試。

以下是如何檢視您網站上的潛在問題：

1. 轉到谷歌搜尋控制檯。如果你還沒有驗證你的網站，你可以按照我們的指南來驗證Google Search Console。
2. 開啟體驗下的核心網頁指標報告。
3. 點選移動或桌面旁邊的 “開啟報告“，這取決於你想分析的內容。

Search Console中的核心網頁指標報告

如果適用，谷歌將突出顯示有問題的累積佈局偏移分數的URL。

如何在Search Console中看到有CLS問題的URL

Note – 只有當您的網站每月有足夠的流量被納入Chrome使用者體驗報告時，您才能在這裡看到資料。

Layout Shift GIF Generator

顧名思義，Layout Shift GIF Generator可以生成你網站上的GIF佈局變化，這樣你就可以準確地看到哪些內容造成了問題。它還會給你打分，儘管這不是該工具的主要重點。

你所做的只是新增你想測試的URL，並選擇移動或桌面。然後，它將生成一個你的網站的GIF，用綠色高亮顯示正在移動的確切元素。

通過檢視哪些元素在移動，並對你的累計佈局移動得分做出貢獻，你可以知道在改善你的網站得分時，到底應該把重點放在哪裡。

該工具用綠色突出了個別佈局的偏移

如何才算好的累積佈局偏移得分

根據谷歌的核心網頁指標，一個好的累積佈局偏移分數是0.1或更少。

如果你的累計佈局偏移分數在0.1和0.25之間，谷歌將其定義為 “需要改進”。

如果你的累計佈局偏移得分高於0.25，谷歌將其定義為 “差”。

這裡有一張來自谷歌核心網頁指標網站的圖片，直觀地展示了這些分數。

谷歌對CLS分數的建議

如何確定導致佈局偏移的原因

如果您想確定哪些元素導致您網站上的佈局發生變化，您可以使用Chrome開發工具。如果您開啟工具 (CTRL-SHIFT-I) 並跳轉到效能 選項卡，您將能夠在瀏覽網路時記錄效能測試。

停止錄製後，Chrome Dev Tools將返回一個時間軸，顯示載入時間、單個請求和 Core Web Vitals。從此時間線中，您可以選擇在Experience下列出的各個Layout Shift事件。這樣，您就可以看到它們對應於哪些元素。

一旦你知道是什麼元素導致了佈局變化，你就可以採取措施來解決這個問題。我們將在下一節討論這一點。

如果您想監控您網站的Core Web Vitals，我們建議您設定一個Google Search Console帳戶。您將能夠從Search Console監控效能指標和Core Web Vitals，這對於搜尋引擎優化 (SEO) 來說是一個福音。我們認為定期監控Search Console符合您的最佳利益，無論如何，但擁有您正在跟蹤的特定指標永遠不會有什麼壞處。

如何優化您網站的CLS分數

總的來說，高CLS分數有兩大罪魁禍首：媒體檔案和廣告。例如，如果您上傳一個解析度很高的圖片檔案，但沒有指定它的高度和寬度，則很可能會破壞您的頁面佈局。

在網站效能方面，最好使用已經是您將要顯示的精確尺寸的影象。這樣，瀏覽器就不必花費處理能力（和時間）來適當地調整它們的大小。然而，這並不總是可能的。如果不是，您應該為您顯示的每個影象設定寬度和高度屬性。這樣，使用者的瀏覽器將準確地知道影象適合的位置，並且不需要在最後一秒移動佈局。

以下是這些屬性在 HTML 中的外觀：

<img src="http://imageurl.com" alt="Image Alt Text">

如果您使用WordPress，一些影象優化外掛可以在您上傳檔案時自動調整檔案大小，這會負責設定必要的寬度和高度屬性。

當涉及到響應式影象時，您可以依靠CSS而不是手動宣告寬度和高度。CSS使您能夠使用max-width屬性來告訴瀏覽器影象應該佔據視口的哪個百分比：

img {
max-width: 90vw;
height: auto;
}

在這個例子中，我們告訴瀏覽器縮放影象，使其佔據使用者視口的 90%。同時，我們將height屬性設定為auto，以便瀏覽器根據影象的新寬度和縱橫比計算理想的高度。

與影象相同的基本原理適用於廣告。通常，您將使用iframe，有時廣告網路會使用動態大小的元素。這可能會對您的頁面佈局造成嚴重破壞。

您可以為它們保留區域，而不是讓廣告網路決定您網站上的廣告應該有多大。這意味著宣告廣告區域的寬度和高度屬性並設定回退以防它們不載入，因此空白空間不會導致佈局偏移。

您可以對任何您想要的廣告容器使用相同型別的CSS和內嵌樣式，無論投放什麼廣告，都可以將其鎖定在適當的位置。

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

現在你明白了累積佈局偏移發生了什麼，是時候轉向一些關於如何修復WordPress的累積佈局偏移的可操作的提示了。

雖然這些提示是來自WordPress的角度，但它們都是通用的，你可以把它們應用到其他網站建設工具上。

始終指定影象的尺寸

佈局移動最常見的原因之一是延遲載入的影象移動內容，特別是當你使用懶載入等策略時。

為了避免這種情況，你可以在嵌入圖片時在程式碼中指定圖片的尺寸。這樣，即使影象還沒有載入，訪問者的瀏覽器也會保留該空間，這意味著影象不需要移動內容。

如果你通過WordPress編輯器（無論是Gutenberg區塊編輯器還是經典的TinyMCE編輯器）嵌入圖片，就不需要手動指定圖片尺寸，因為WordPress會自動為你做這個。

流行的頁面生成器外掛，如Elementor、Divi、Beaver Builder等也是如此。

然而，如果你使用自己的程式碼手動嵌入圖片，可能會出現問題，這可能發生在你向一個外掛新增內容，編輯你的子主題的模板檔案，等等。

一個基本的圖片嵌入的HTML程式碼看起來像這樣：

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

為了指定其尺寸，你可以新增height和width引數。下面是一個600x300px的圖片的例子：

<img src="https://www.wbolt.com/tw/example-image.jpg" alt="An example image" width="600">

許多WordPress的效能外掛也包括自動化功能，例如WP Rocket或Perfmatters中的新增缺失影象尺寸功能。

始終為視訊、iframes和其他嵌入物指定尺寸

就像圖片一樣，當你新增視訊、iframes或其他嵌入內容時，你也要指定尺寸。

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

例如，如果你看一下YouTube的嵌入程式碼，你會看到它包括尺寸。

嵌入程式碼中iframe尺寸的一個例子

許多其他服務也是如此。

然而，如果你的嵌入程式碼沒有指定高度和寬度，你可以手動新增這些尺寸到嵌入程式碼中。

修復和優化字型載入

字型載入和優化的問題可以通過兩個潛在的問題成為佈局偏移的另一個常見來源：

• Flash of invisible text (FOIT) – 頁面最初載入時根本沒有任何文字內容出現。一旦載入了自定義字型，文字就會突然出現（這可能會導致現有的內容發生偏移）。
• Flash of unstyled text (FOUT) – 文字內容使用系統字型（無樣式的）載入。一旦載入了自定義字型，文字就會變為該自定義字型，這可能會導致內容發生偏移，因為文字大小和間距可能不同。

為了避免這些問題，你需要優化你在網站上載入字型的方式（這對你網站的效能也有一些好處）。

本地託管字型和預載入字型

通過在本地託管字型並使用預載入，你可以告訴訪問者的瀏覽器把載入自定義字型檔案的優先順序提高。

通過在其他資源之前載入字型檔案，你可以確保當瀏覽器開始渲染你的內容時，字型檔案已經被載入，這可以防止出現FOUT和FOIT的問題。

要了解如何在WordPress中本地託管字型，你可以閱讀我們關於在WordPress中本地託管字型的完整指南。

在那裡，你可以手動設定字型預載入，或者使用一個外掛。大多數效能外掛都包括預載入字型的選項，包括WP Rocket、Perfmatters、Autoptimize和其他。

如果你使用谷歌字型，你也可以使用免費的OMGF外掛，在本地託管字型並預裝它們。

你也可以通過在你網站的<head>部分新增程式碼來手動預裝字型。

下面是一個程式碼的例子–請確保用你想預裝的字型檔案的實際名稱/位置來替換它：

<link href="https://www.wbolt.com/tw/fonts/roboto.woff2" as="font/woff2" crossorigin>

你可以直接使用WordPress的子主題新增它，或者用wp_head鉤子和Code Snippets這樣的外掛來注入它。

將字型顯示設定為Optional或Swap

CSS Font-Display屬性可以讓你控制你網站上字型的渲染行為，避免FOIT。

從本質上講，它可以讓你在你的自定義字型尚未載入的情況下使用一個後備字型。

你可以用兩個主要的選項來解決CLS問題：

• Swap – 在自定義字型載入時使用一種後備字型，一旦字型載入完畢，就將其改為您的自定義字型。
• Optional – 讓瀏覽器根據訪問者的連線速度來決定是否使用自定義字型。

有了Swap，一旦載入字型，瀏覽器就會一直改成自定義字型。

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

有了Optional，瀏覽器會給自定義字型100毫秒的載入時間。但是，如果到那時自定義字型還不可用，瀏覽器就會堅持使用後備字型，而不會在該頁瀏覽時將其改為自定義字型（它將在隨後的頁瀏覽中使用自定義字型，因為那時很可能已經下載並快取了字型檔案）。

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

如果你對CSS工作感到滿意，你可以在你的子主題的樣式表中手動編輯Font-Display屬性。

如果你覺得這樣做不舒服，你也可以找一些外掛來幫忙。

• Swap Google Fonts Display – 輕鬆啟用谷歌字型的字型顯示為Swap.
• Asset CleanUp – 支援免費的谷歌字型和專業版的自定義本地字型。
• Perfmatters – 為Google Fonts提供一個功能。

如果你使用的是 Elementor，Elementor 也包括一個內建的選項來做這個。轉到 Elementor → Settings → Advanced。然後你可以根據你的喜好，將Google Fonts Load下拉設定為交換或可選：

Elementor字型顯示選項

太複雜了？請考慮使用系統字型堆疊

如果所有這些關於預載入和字型顯示的討論都有點令人困惑，那麼一個簡單的解決辦法就是使用一個系統字型堆疊而不是一個自定義字型堆疊。

雖然這確實限制了你的設計選擇，但它將完全解決累積佈局轉移字型問題、FOIT和FOUT。此外，它還會幫助你的網站載入得更快。

如果你對此感興趣，請檢視Brian關於在WordPress上使用系統字型棧的指南。

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

如果你使用顯示廣告，你必須在你的網站程式碼中為這些廣告保留空間。這與為圖片、視訊和嵌入物保留空間的想法相同。

然而，顯示廣告值得特別一提，因為如果你使用任何型別的競價技術，顯示廣告延遲載入是非常常見的。這是因為競價技術需要時間來工作並找出要顯示的廣告。

如果你有動態廣告位，這也可能是AdSense自動廣告的一個問題，因為除了競價問題，AdSense也會載入不同尺寸的廣告（所以你可能不會提前知道廣告的尺寸）。

如果你使用的是流行的顯示廣告網路之一，如Mediavine或AdThrive，他們應該已經提供了一些工具來幫助你避免廣告的佈局轉變。例如，如果你開啟Mediavine的Ad Settings區域，你可以啟用一個切換按鈕，以優化廣告的CLS。

Mediavine優化廣告的CLS設定

要優化AdSense的累積佈局偏移，就比較麻煩了。

一個常見的解決方法是在每個廣告單元周圍新增一個<div>包裝元素，使用min-height CSS屬性指定一個最小高度。你也可以使用媒體查詢來改變基於使用者裝置的最小高度。

谷歌建議將最小高度設定為最大可能的廣告尺寸。雖然這可能會導致在提供較小的廣告時浪費空間，但這是消除任何發生佈局變化的機會的最佳選擇。

在設定這個包裝元素時，確保使用一個CSS ID而不是一個類，因為AdSense通常會從父物件中剝離CSS類。

下面是CSS可能看起來像什麼：

一些廣告wrapper的CSS例子

然後，這裡是AdSense的嵌入可能的樣子：

把AdSense的廣告程式碼包在一個div裡

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

你的網站現在將在前臺為該廣告保留空間

在使用外掛動態注入內容時要謹慎行事

很多WordPress網站都會為一些功能動態地注入內容，如cookie同意宣告、相關內容、電子郵件選擇表格等等。

雖然這樣做很好，但你要小心避免這樣做導致佈局的改變。

在這裡，一個好的網頁設計的最佳實踐是，除非使用者專門進行了互動（如點選一個按鈕），否則不要在現有的內容上面注入內容。

例如，如果你要新增一個cookie同意通知，你不想把它放在頁面的頂部，因為這將導致內容被推倒（除非你已經為cookie同意的橫幅保留了空間）。

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

要看動態內容是否造成了這個問題，你可以使用上面的視覺化工具（如Layout Shift GIF Generator）。

如果你發現某個特定外掛的內容引發了佈局偏移，你可以考慮調整該外掛的設定或切換到另一個外掛。

例如，當涉及到佈局偏移時，一些cookie同意外掛比其他外掛更好，所以如果你有問題，值得嘗試不同的外掛。

如果你想更深入地挖掘外掛的行為，你可以使用一個應用程式效能監控工具。

儘可能為動畫使用CSS變換屬性

如果你在你的網站上使用了動畫，這可能是另一個導致佈局偏移的常見原因。

為了避免動畫導致佈局偏移的問題，你應該對動畫使用CSS Transform函式，而不是其他策略。

• 與其使用height和寬度width 屬性，不如使用transform: scale()
• 如果你想移動元素，使用transform: translate()而不是top, bottom, right, 或者 left

這更像是一個技術提示，所以你不太可能需要這樣做，除非你要新增自己的CSS。要了解更多，你可以閱讀谷歌關於CLS和動畫/過渡的說明。

累積佈局偏移 (CLS) 常見問題

CLS可能比LCP和FCP指標更難掌握。考慮到這一點，讓我們回顧一下使用者對CLS的一些常見問題，以確保您不會遺漏任何關鍵資訊。

CLS如何影響我網站的效能？

從理論上講，您可以擁有一個速度非常快的網站，但其CLS分數仍然相對較低。與其他Core Web Vitals一樣，CLS分數可能與整體網站效能沒有直接關係。您的網站可能執行得非常快，但在載入時，它會像手風琴一樣展開。即便如此，大的佈局變化肯定會對網站的使用者體驗產生負面影響。谷歌認為這非常重要。這就是為什麼谷歌如此重視這個資料點的原因。

CLS比FCP或LCP分數重要嗎？

很多使用者比CLS更關注FCP和LCP分數。這是因為這兩個指標更容易與網站效能相關聯。儘管FCP也是一個以使用者為中心的指標，但CLS很難在大量使用者中進行一致的衡量。

這三個指標構成了Google Core Web Vitals。這意味著，如果您忽略其中之一，您將面臨在相關搜尋結果中排名較低的風險。確保您的站點針對低CLS進行了優化通常只會對LCP和FCP等站點效能產生積極影響。如果最大的內容繪製在使用者看到後立即被推下螢幕，那麼快速的載入時間有多大用處？

怎樣才算好的CLS分數？

從數字上看，谷歌認為低於0.10的任何東西都是一個很好的CLS分數。但是，如果您採取正確的步驟，獲得0的CLS分數並不是不可能的，並且在優化良好的網站中這相對普通。但是請記住，即使是經常得分為0的網站，也可能有一小部分使用者經歷了變化。這是您無法控制的，您所能做的就是說明大多數使用者的CLS為 0。

小結

在您的網站上提供強大的使用者體驗有很多因素。理想情況下，它應該載入速度快。應該很容易互動。它不應該在元素出現時移動佈局位置。劇烈的佈局變化會導致挫折和誤點選。這些會導致更高的跳出率。這對任何網站都不利。

CLS是Google用來衡量您網站整體使用者體驗的核心網頁指標要素之一。使用者首先是您擁有網站的全部原因。他們的經驗是優先順序1。低CLS分數（低於0.10）意味著您的網站應該可以流暢地載入，並且其佈局的每個方面都會從一開始就出現在正確的位置。

如果你的網站有一個很高的累計佈局偏移分數，重要的是要解決這個問題，為你的人類訪客創造一個更好的體驗，並最大限度地提高你的網站在谷歌搜尋結果中的表現。

兩個最常見的問題是影象/嵌入的尺寸丟失和字型載入的問題。如果你解決了這些問題，你應該會得到一個更好的分數。

其他網站可能需要更進一步，挖掘廣告載入、動態內容和動畫的問題。如果你自己在實施這些型別的優化方面有困難，你可以考慮與一個WordPress機構或自由職業者合作。

要想了解更多關於核心網頁指標的資訊，你可以閱讀關於核心網頁指標的完整指南。