瞭解如何避免版面配置突然變動,提升使用者體驗
累計版面配置位移 (CLS) 是 Core Web Vitals 指標的其中一項。這項指標會結合可視內容在畫面上移動的程度,以及受影響元素移動的距離,藉此評估內容的不穩定性。
版面配置位移可能會讓使用者分心。想像一下,當網頁上所有的元素出現突然變換時,導致您找不到某個地方,這時您開始閱讀某篇文章。這很常出現在網路上,包括閱讀新聞或嘗試按一下這些「搜尋」或「加入購物車」按鈕。這類體驗在視覺上造成困擾且令人困擾。這通常是因為頁面元素突然加入其他元素或調整大小,導致這類元素被迫移動。
為提供良好的使用者體驗,網站應力求將 CLS 達到 0.1 或更低,時間至少達 75%。
與其他 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](https://web.developers.google.cn/static/articles/optimize-cls/image/screenshot-pagespeed-ins-1b9715cccc402.png?authuser=19&hl=zh-tw)
找出負載 CLS 問題
如果 PageSpeed Insights 的 CrUX 和 Lighthouse CLS 分數大致保持一致,這通常表示 Lighthouse 偵測到載入 CLS 問題。在本例中,Lighthouse 可協助您進行兩項稽核,針對缺少寬度和高度而造成 CLS 的圖片提供更多資訊,同時也會列出因載入網頁而發生變動的所有元素,以及 CLS 的貢獻。如要查看這些稽核,您可以篩選 CLS 稽核:
![Lighthouse 螢幕截圖,顯示 CLS 稽核,可提供更多資訊,協助您找出並處理 CLS 問題](https://web.developers.google.cn/static/articles/optimize-cls/image/lighthouse-screenshot-sho-1c6eeefdc4b1b.png?authuser=19&hl=zh-tw)
開發人員工具中的效能面板也會醒目顯示「體驗」部分中的版面配置位移。Layout Shift
記錄的「Summary」檢視畫麵包含累計版面配置位移分數,以及顯示受影響區域的矩形疊加層。這對於載入 CLS 問題來說特別有幫助,因為我們可以透過重新載入效能設定檔輕鬆複製這個問題。
![展開「體驗」部分時,Chrome 開發人員工具效能面板中顯示的版面配置位移記錄](https://web.developers.google.cn/static/articles/optimize-cls/image/layout-shift-records-bein-90d4c6c924a25.jpg?authuser=19&hl=zh-tw)
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 原因,以及防範方法。
不含尺寸的圖片
請一律在圖片和影片元素中加入 width
和 height
尺寸屬性。或者,你也可以透過 CSS aspect-ratio
或類似格式預訂所需空間。藉此確保瀏覽器在載入圖片時,能夠在文件中分配正確的空間。
![Lighthouse 報表,顯示設定圖片尺寸後,對「累計版面配置位移」前後的影響](https://web.developers.google.cn/static/articles/optimize-cls/image/lighthouse-report-showing-9556bbb060b37.png?authuser=19&hl=zh-tw)
圖片上的 width
和 height
屬性記錄
在網頁早期,開發人員必須在 <img>
標記中加入 width
和 height
屬性,確保在瀏覽器開始擷取圖片前,網頁上有足夠的空間。這麼做可盡量減少重排和重新版面配置。
<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons">
這個範例中的 width
和 height
不包含單位。這些「像素」可確保瀏覽器在網頁的版面配置中預留 640x360 區域。圖片會延展至符合空間大小,無論實際尺寸為何。
隨著回應式網頁設計的推出,開發人員開始省略 width
和 height
,並開始改用 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 像素
知道圖片的長寬比後,瀏覽器就能計算和保留足夠的空間,容納高度及相關區域。
設定圖片尺寸的新最佳做法
由於新式瀏覽器會根據
圖片的 width
和 height
屬性,可以透過下列方式避免版面配置位移:
請在圖片上設定這些屬性,並在
樣式表。
<!-- set a 640:360 i.e a 16:9 aspect ratio -->
<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons">
這樣所有瀏覽器就會根據元素現有的 width
和 height
屬性,新增預設顯示比例。
系統會根據 width
和 height
屬性,在圖片載入前計算顯示比例。可在開始計算版面配置時提供這些資訊。一旦圖片調整為特定寬度 (例如 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 現在支援在以下瀏覽器上設定 width
和 height
:
指定的 <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é 網站出現非預期版面配置位移的情況](https://web.developers.google.cn/static/articles/optimize-cls/image/examples-dynamic-content-4d11ddda2fa94.png?authuser=19&hl=zh-tw)
動畫
如果變更 CSS 屬性值,瀏覽器可能必須回應這些變更。部分值 (例如 box-shadow
和 box-sizing
) 會觸發重新版面配置、繪製和複合操作。變更 top
和 left
屬性也會導致版面配置位移 (即使移動的元素是在自己的圖層上)。避免使用這些屬性製作動畫。
其他 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-adjust
、ascent-override
、descent-override
和line-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,透過以下部分技巧應能有效減少影響。這樣可避免超出限制,為網站使用者打造更優質的體驗。