改善累計版面配置位移

瞭解如何避免版面配置突然變動,提升使用者體驗

累計版面配置位移 (CLS)Core Web Vitals 指標的其中一項。這項指標會結合可視內容在畫面上移動的程度,以及受影響元素移動的距離,藉此評估內容的不穩定性。

版面配置位移可能會讓使用者分心。想像一下,當網頁上所有的元素出現突然變換時,導致您找不到某個地方,這時您開始閱讀某篇文章。這很常出現在網路上,包括閱讀新聞或嘗試按一下這些「搜尋」或「加入購物車」按鈕。這類體驗在視覺上造成困擾且令人困擾。這通常是因為頁面元素突然加入其他元素或調整大小,導致這類元素被迫移動。

為提供良好的使用者體驗,網站應力求將 CLS 達到 0.1 或更低,時間至少達 75%

良好的 CLS 值小於 0.1、值大於 0.25,或是需要改善
良好的 CLS 值在 0.1 以下。較差的數值大於 0.25。

與其他 Core Web Vitals 相比,網站體驗指標是以秒或毫秒為單位測量時間值,但 CLS 分數是無單位值,是根據內容的移動程度和目前距離計算而得。

本指南涵蓋版面配置位移的常見原因。

CLS 不佳最常見的原因如下:

  • 沒有尺寸的圖片。
  • 不含尺寸的廣告、嵌入項目和 iframe。
  • 動態插入的內容,例如廣告、嵌入內容和沒有尺寸的 iframe。
  • 網頁字型。

瞭解版面配置位移的原因

開始查看常見 CLS 問題的解決方案之前,請務必先瞭解 CLS 分數以及變化來源。

實驗室工具中的 CLS 與實際領域

開發人員常常認為 Chrome 使用者體驗報告 (CrUX) 評估的 CLS 有誤,原因是他們透過 Chrome 開發人員工具或其他研究室工具測量的 CLS 有誤。網站效能研究室工具 (例如 Lighthouse) 可能不會顯示網頁的完整 CLS,因為這類工具通常會對網頁進行簡單的載入,藉此評估部分網頁成效指標並提供相關指引 (不過 Lighthouse 使用者流程可讓您評估預設網頁載入稽核之外的項目)。

CrUX 是 Web Vitals 計畫的官方資料集,因此在網頁整個生命週期中都會評估 CLS,而不是在研究室工具一般測量的初始載入期間。

頁面載入過程中經常出現版面配置位移的情況,因為系統會擷取所有必要資源,完成初始顯示頁面,但也可能在初次載入後發生版面配置位移的情況。許多資料載入後變動可能因使用者互動而產生,因此從 CLS 分數中排除,只要這些變動是在該次互動發生 500 毫秒內發生,就會從 CLS 分數排除。

然而,其他沒有符合條件的互動行為,則可能包含使用者未預期的其他載入後位移。舉例來說,如果頁面繼續捲動,並載入延遲載入的內容,就會造成位移。載入後 CLS 的其他常見原因包括轉換互動,例如單頁應用程式需要超過 500 毫秒的寬限期。

PageSpeed Insights 會顯示使用者感知到的 從「發掘實際使用者體驗」部分的網址中取得 CLS區段, 以及研究室負載 CLS 的「診斷效能問題」專區。 這些值之間的差異可能是載入後 CLS 的結果,

PageSpeed Insights 的螢幕截圖,顯示網址層級的資料,明顯大於 Lighthouse CLS 的實際使用者 CLS
在本例中,CrUX 測量的 CLS 遠高於 Lighthouse。
,瞭解如何調查及移除這項存取權。

找出負載 CLS 問題

如果 PageSpeed Insights 的 CrUX 和 Lighthouse CLS 分數大致保持一致,這通常表示 Lighthouse 偵測到載入 CLS 問題。在本例中,Lighthouse 可協助您進行兩項稽核,針對缺少寬度和高度而造成 CLS 的圖片提供更多資訊,同時也會列出因載入網頁而發生變動的所有元素,以及 CLS 的貢獻。如要查看這些稽核,您可以篩選 CLS 稽核:

Lighthouse 螢幕截圖,顯示 CLS 稽核,可提供更多資訊,協助您找出並處理 CLS 問題
Lighthouse 的 CLS 詳細診斷報告。
,瞭解如何調查及移除這項存取權。

開發人員工具中的效能面板也會醒目顯示「體驗」部分中的版面配置位移。Layout Shift 記錄的「Summary」檢視畫麵包含累計版面配置位移分數,以及顯示受影響區域的矩形疊加層。這對於載入 CLS 問題來說特別有幫助,因為我們可以透過重新載入效能設定檔輕鬆複製這個問題。

展開「體驗」部分時,Chrome 開發人員工具效能面板中顯示的版面配置位移記錄
在「Performance」(效能) 面板中記錄新追蹤記錄後,結果的「Experience」(體驗) 部分會填入紅色的長條,顯示 Layout Shift 記錄。只要點選記錄,即可查看「移動自」等詳細資料,進一步瞭解受影響的元素以及「已移至」其他項目

找出載入後的 CLS 問題

CrUX 與 Lighthouse CLS 分數之間存在差異,通常表示載入後 CLS。這些轉變在沒有欄位資料的情況下,可能會難以追蹤。如要瞭解如何收集欄位資料,請參閱「測量欄位中的 CLS 元素」。

透過 Web Vitals Chrome 擴充功能,當您與網頁互動時 (透過抬頭顯示或控制台),即可監控 CLS,並進一步瞭解已移位的元素

除了使用擴充功能之外,您也可以使用 Performance Observer 記錄版面配置位移,並將這項工具貼入控制台。

設定位移監控功能後,您可以嘗試複製所有載入後 CLS 問題。CLS 通常是在使用者捲動網頁時,在延遲載入內容載入完畢且沒有預留空間的情況下發生。另一個常見的 CLS 原因,是使用者將遊標懸停在指標上時,內容發生變動。凡是在這些互動期間發生的內容變動,都會視為非預期的行為,即使是在 500 毫秒內發生也一樣。

詳情請參閱「對版面配置位移進行偵錯」。

找出 CLS 的任何常見原因後,您也可以運用 Lighthouse 的時間範圍使用者流程模式,導入版面配置位移,確保一般的使用者流程不會迴歸。

測量領域中的 CLS 元素

對現場監控 CLS 而言,有助於判斷 CLS 會發生的情況,以及縮小可能原因。與大多數的研究室工具一樣,現場工具只會評估有變動的元素,但通常可提供足夠資訊來找出原因。您也可以使用 CLS 欄位測量,判斷哪些問題最需要優先修正。

web-vitals 程式庫提供歸因函式,可讓您收集這些額外資訊。詳情請參閱「偵錯欄位中的效能」。其他 RUM 供應商也開始以類似的方式收集和呈現這項資料。

CLS 的常見原因

找出 CLS 的成因後,您就可以開始修正問題。本節將介紹一些較常見的 CLS 原因,以及防範方法。

不含尺寸的圖片

請一律在圖片和影片元素中加入 widthheight 尺寸屬性。或者,你也可以透過 CSS aspect-ratio 或類似格式預訂所需空間。藉此確保瀏覽器在載入圖片時,能夠在文件中分配正確的空間。

未指定寬度和高度的圖片。
,瞭解如何調查及移除這項存取權。
已指定寬度和高度的圖片。
,瞭解如何調查及移除這項存取權。
Lighthouse 報表,顯示設定圖片尺寸後,對「累計版面配置位移」前後的影響
Lighthouse 6.0 對 CLS 設定圖片尺寸的影響。

圖片上的 widthheight 屬性記錄

在網頁早期,開發人員必須在 <img> 標記中加入 widthheight 屬性,確保在瀏覽器開始擷取圖片前,網頁上有足夠的空間。這麼做可盡量減少重排和重新版面配置。

<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons">

這個範例中的 widthheight 不包含單位。這些「像素」可確保瀏覽器在網頁的版面配置中預留 640x360 區域。圖片會延展至符合空間大小,無論實際尺寸為何。

隨著回應式網頁設計的推出,開發人員開始省略 widthheight,並開始改用 CSS 調整圖片大小:

img {
  width: 100%; /* or max-width: 100%; */
  height: auto;
}

不過,由於未指定圖片大小,因此必須等到瀏覽器開始下載並決定圖片大小時,才能分配空間。載入圖片時,文字會隨頁面向下移動以騰出空間,這樣會讓使用者感到困惑而造成困擾。

這就派上用場了。圖片的長寬比是指圖片的寬度與高度的比例。常見做法是以半形冒號分隔的兩個數字 (例如 16:9 或 4:3)。以 x:y 顯示比例來說,圖片寬度為 x 寬 x 單位高 y 單位。

也就是說,只要我們知道其中一個維度,就能決定另一個維度。長寬比 16:9:

  • 如果 puppy.jpg 的高度為 360 像素,則寬度為 360 x (16 / 9) = 640 像素
  • 如果 puppy.jpg 寬度為 640 像素,高度為 640 x (9 / 16) = 360 像素

知道圖片的長寬比後,瀏覽器就能計算和保留足夠的空間,容納高度及相關區域。

設定圖片尺寸的新最佳做法

由於新式瀏覽器會根據 圖片的 widthheight 屬性,可以透過下列方式避免版面配置位移: 請在圖片上設定這些屬性,並在 樣式表。

<!-- set a 640:360 i.e a 16:9 aspect ratio -->
<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons">

這樣所有瀏覽器就會根據元素現有的 widthheight 屬性,新增預設顯示比例

系統會根據 widthheight 屬性,在圖片載入前計算顯示比例。可在開始計算版面配置時提供這些資訊。一旦圖片調整為特定寬度 (例如 width: 100%),系統就會使用長寬比來計算高度。

當處理 HTML 時,這個 aspect-ratio 值是由主要瀏覽器計算,而不是使用預設的使用者代理程式樣式表 (請參閱這篇文章深入瞭解原因),因此值顯示方式會有些許不同。舉例來說,Chrome 會在「元素」面板的「樣式」部分顯示以下格式:

img[Attributes Style] {
  aspect-ratio: auto 640 / 360;
}

Safari 的運作方式與使用「HTML 屬性」樣式來源相同。Firefox 不會在「Inspector」面板中顯示計算的 aspect-ratio,但會將其用於版面配置。

上述程式碼的 auto 部分非常重要,因為這會導致圖片尺寸在圖片下載後覆寫預設顯示比例。如果圖片尺寸不同,這仍會造成圖片載入後部分版面配置位移,但這麼做可確保在產生圖片時的長寬比仍會使用,以防 HTML 不正確。即使實際顯示比例與預設顯示比例不同,對於未提供尺寸的圖片,但 0x0 的預設大小仍會導致版面配置位移較少。

若要更深入地查看長寬比,並進一步考慮回應式圖片,請參閱「使用媒體顯示比例進行無資源浪費頁面載入」一文。

如果圖片位於容器中,可以使用 CSS 將圖片調整為容器寬度。我們設定了 height: auto;,以避免對圖片高度使用固定值。

img {
  height: auto;
  width: 100%;
}

回應式圖片呢?

使用回應式圖片時,srcset 會定義要讓瀏覽器選擇的圖片和圖片大小。為確保可設定 <img> 寬度和高度屬性,每張圖片都應使用相同的顯示比例。

<img
  width="1000"
  height="1000"
  src="puppy-1000.jpg"
  srcset="puppy-1000.jpg 1000w, puppy-2000.jpg 2000w, puppy-3000.jpg 3000w"
  alt="Puppy with balloons"
/>

您的圖片您也可根據您的選擇 圖片方向。 舉例來說,加入圖片裁剪,以便縮小顯示範圍。 而且在電腦上顯示完整圖片:

<picture>
  <source media="(max-width: 799px)" srcset="puppy-480w-cropped.jpg" />
  <source media="(min-width: 800px)" srcset="puppy-800w.jpg" />
  <img src="puppy-800w.jpg" alt="Puppy with balloons" />
</picture>

Chrome、Firefox 和 Safari 現在支援在以下瀏覽器上設定 widthheight: 指定的 <picture> 元素中的 <source> 元素:

<picture>
  <source media="(max-width: 799px)" srcset="puppy-480w-cropped.jpg" width="480" height="400" />
  <source media="(min-width: 800px)" srcset="puppy-800w.jpg" width="800" height="400" />
  <img src="puppy-800w.jpg" alt="Puppy with balloons" width="800" height="400" />
</picture>

廣告、嵌入項目和其他延遲載入內容

不是只有圖片類型會導致版面配置位移的內容。廣告、嵌入內容、iframe 和其他動態插入的內容都可能導致內容在向下移動,提高 CLS。

廣告是網路上最大的版面配置位移來源之一。廣告聯播網和發布商通常支援動態廣告大小。廣告大小之所以能夠提高成效/收益,是因為點擊率較高,而且有更多廣告能參與競價。遺憾的是,由於廣告會擠進您瀏覽的頁面內容,導致使用者體驗不佳。

可嵌入的小工具可讓您在網頁中加入可攜式網路內容,例如 YouTube 影片、Google 地圖中的地圖和社群媒體貼文。不過,這些小工具在載入前,通常不知道其內容有多大。因此,提供嵌入功能的平台不一定會為小工具保留空間,導致版面配置在最終載入時位移。

要處理這些問題的技術都很類似。主要差異在於您對插入的內容擁有掌控權。如果這種廣告是由第三方 (例如廣告合作夥伴) 插入,您可能不知道該插入內容的確切大小,也無法控制這些嵌入項目中的任何版面配置位移。

為延遲載入內容保留空間

將延遲載入內容加入內容流程時,可在初始版面配置中保留空間,避免版面配置位移。

其中一個方法是加入 min-height CSS 規則來預訂空間;如果是回應式內容等回應式內容,則應使用 aspect-ratio CSS 屬性,做法與瀏覽器自動將此屬性用於提供尺寸的圖片時,採取類似的方式。

有三部行動裝置在第一部裝置上只有文字內容,第二部裝置會向下移動。保留空間且預留空間,如第三個裝置所示
預留廣告空間可避免版面配置位移

使用媒體查詢時,您可能需要考量不同板型規格的廣告或預留位置大小有細微差異。

在沒有固定高度的內容 (例如廣告) 中,你可能無法確切保留完全消除版面配置位移所需的空間。如果放送較小的廣告,發布商可以設定大型容器的樣式來避免版面配置位移,或是根據歷來資料選擇最有可能的廣告版位大小。這個方法的缺點是會增加網頁上的空白空間。

您可改為將初始大小設為將使用的最小尺寸,並針對大型內容接受一定程度的移位。如前所述,使用 min-height 可讓父項元素視需要擴大,同時降低版面配置位移的影響,但與空白元素的預設大小為 0 像素相比。

請盡量避免收合預留空間,舉例來說,如果沒有傳回任何廣告,就會顯示預留位置。移除元素以外的空間,可能會導致 CLS 與插入內容差不多。

將延遲載入內容置於可視區域較低的位置

動態插入的內容越接近可視區域頂端,通常會導致版面配置位移比在可視區域中較低的位置插入。不過,將內容插入可視區域的任何位置仍會造成些許變動。如果無法保留插入內容的空間,建議您稍後將這些內容放在網頁上,以減少對 CLS 的影響。

避免在使用者未進行互動的情況下插入新內容

網站載入時,使用者介面會在可視區域頂端或底部彈出,導致版面配置發生位移的情況。與廣告類似,常有因橫幅和表單而移開網頁內容的其他部分:

未保留空間的動態內容。

如果您需要顯示這類型的 UI 預設用途,請事先在可視區域中保留足夠的空間 (例如使用預留位置或骨架 (skeleton) 使用者介面,這樣當載入時,就不會造成網頁中的內容出現意外的變動。或者,您也可以在合理的情況下疊加內容,確保元素不屬於文件流程的一部分。如需更多有關這些元件的建議,請參閱「Cookie 通知的最佳做法」一文。

在某些情況下,動態新增內容是使用者體驗中相當重要的一環。例如,在商品清單載入更多產品時,或是更新現行動態饋給內容時。在這類情況下,您可以採取以下幾種做法,避免版面配置意外位移:

  • 在固定大小容器中將舊內容換成新內容,或使用輪轉介面,並在轉換後移除舊內容。請記得在轉換完成前停用所有連結和控制項,以免在新內容播放期間意外點擊或輕觸。
  • 請使用者啟動新的內容載入程序,以免使用者感到不知所措 (例如顯示 [載入更多] 或 [重新整理] 按鈕)。建議您在使用者互動之前預先擷取內容,讓內容立即顯示。提醒您,如果使用者輸入內容在 500 毫秒內發生版面配置位移,則不會計入 CLS。
  • 將內容流暢地載入畫面外,並疊加顯示通知給使用者 (例如使用「向上捲動」按鈕)。
,瞭解如何調查及移除這項存取權。
動態內容載入示例:未造成 Twitter 和 Chloé 網站出現非預期版面配置位移的情況
不會造成非預期版面配置位移的動態內容載入示例。左圖:Twitter 動態消息內容載入中。右圖:「載入更多」例如 Chloé 網站的範例進一步瞭解 YNAP 團隊如何在載入更多內容時針對 CLS 進行最佳化
,瞭解如何調查及移除這項存取權。

動畫

如果變更 CSS 屬性值,瀏覽器可能必須回應這些變更。部分值 (例如 box-shadowbox-sizing) 會觸發重新版面配置、繪製和複合操作。變更 topleft 屬性也會導致版面配置位移 (即使移動的元素是在自己的圖層上)。避免使用這些屬性製作動畫。

其他 CSS 屬性可在不觸發重新版面配置的情況下變更。包括使用 transform 動畫來平移、縮放、旋轉或扭曲元素。

使用 translate 的複合動畫不會影響其他元素,因此不會計入 CLS。非合成動畫也不會造成重新版面配置。如要進一步瞭解哪些 CSS 屬性會觸發版面配置位移,請參閱「高效能動畫」。

網頁字型

一般而言,下載和轉譯網路字型會在下載網路字型之前採用下列其中一種做法:

  • 備用字型會與網路字型替換,產生「未設定文字」(FOUT) 的 Flash。
  • 「隱藏」文字將以備用字型顯示,直到有網路字型且文字可見 (FOIT,隱藏文字)。

這兩種方法都可能導致版面配置位移。即使文字不會顯示,仍然會以備用字型顯示。因此,當網路字型載入時,文字區塊和周圍內容的位移,會和可見字型一樣。

下列工具可協助您盡量減少文字位移:

  • font-display: optional 可避免重新版面配置,因為只有在初始版面配置有可用網頁字型的情況下,系統才會使用網站字型。
  • 確認使用適當的備用字型。舉例來說,使用 font-family: "Google Sans", sans-serif; 可確保在載入 "Google Sans" 時,使用瀏覽器的 sans-serif 備用字型。如未使用 font-family: "Google Sans" 指定備用字型,系統會使用預設字型,而 Chrome 中的預設字型是「Times」(Serif 字型,比預設的 sans-serif 字型還差)。
  • 請使用新的 size-adjustascent-overridedescent-overrideline-gap-override API,盡量減少備用字型和網路字型的大小差異,詳情請參閱「改善字型備用功能」文章。
  • Font 正在載入 API,可減少取得必要字型的時間。
  • 使用 <link rel=preload> 盡早載入重要網路字型。預先載入的字型較有機會看到第一次顯示的畫面,這時版面配置不會發生位移。

如要瞭解其他字型的最佳做法,請參閱「字型最佳做法」。

確認網頁符合 bfcache 的資格,藉此降低 CLS

如要維持低 CLS 分數,最有效的技術就是確保您的網頁符合往返快取 (bfcache) 的資格。

在您離開之後,bfcache 會將網頁保留一小段時間保留在瀏覽器記憶體中,因此下次您返回時,這些頁面就會回復您離開之前的狀態。也就是說,網頁完全載入後即可立即瀏覽,不會因為先前所述的任何原因,在載入期間出現任何變動。

雖然這可能仍表示初始頁面載入時發生版面配置位移,當使用者返回頁面時,不會重複看到相同的版面配置位移。建議您無論在初始載入時都應避免這些變化,不過如果較難完全解決,請至少避免在 bfCache 瀏覽上加以避免,進而減少影響。

許多網站都很常使用上一頁及下一頁瀏覽功能。例如返回內容頁面、類別頁面或搜尋結果。

在 Chrome 推出時,我們發現 CLS 有顯著的改善

所有瀏覽器都預設使用 bfcache,但基於各種原因,某些網站無法使用 bfcache 。請參閱 bfcache 指南,進一步瞭解如何測試並找出導致 bfcache 使用情況的問題,以確保充分利用這項功能,提高網站的整體 CLS 分數。

結論

有許多技術可以識別及改善 CLS,如本指南先前所述。Core Web Vitals 中內建了許可機制,因此即使無法完全排除 CLS,透過以下部分技巧應能有效減少影響。這樣可避免超出限制,為網站使用者打造更優質的體驗。