CLS 最佳化功能如何提升 Yahoo!JAPAN News' 單次工作階段的網頁瀏覽量提高 15%

將 CLS 最佳化 0.2 後，每個工作階段的網頁瀏覽量增加了 15%，工作階段持續時間增加 13%，跳出率則下降 1.72%。

Tomoki Kiraku

Milica Mihajlija

Shunya Shishido

Yahoo! JAPAN 是日本最大的媒體公司之一，每月提供超過 790 億的網頁瀏覽次數。該公司的新聞平台 Yahoo! JAPAN News 每月的網頁瀏覽次數超過 220 億次，工程團隊致力於改善使用者體驗。

藉由持續監控網站體驗核心指標，他們可將網站的累計版面配置位移 (CLS) 分數建立關聯，每個工作階段的網頁瀏覽量增加 15%，工作階段持續時間增加 13%。

0.2

改善 CLS

15.1_%

單次工作階段網頁瀏覽量增加

13.3_%

工作階段持續時間較長

網頁內容突然移動，通常會導致意外點擊、網頁方向改變，最終讓使用者感到不悅。而不悅的使用者通常不會停留很久。為了維持使用者滿意，網頁版面配置在使用者歷程的整個生命週期中應保持穩定。Yahoo!JAPAN 最新消息

如想進一步瞭解他們如何改善 CLS，請參閱 Yahoo!JAPAN 新聞工程團隊的文章。

找出問題

監控網站體驗核心指標 (包括 CLS) 是找出問題及辨別問題來源的關鍵。Yahoo!JAPAN News、Search Console 針對有效能問題的網頁群組提供實用的總覽，Lighthouse 可以為每頁找出改善網頁體驗的機會。在使用這些工具後，他們發現文章詳細資料頁面的 CLS 不佳。

Google Search Console 網站體驗核心指標報告：文章詳細資料頁面顯示較高的 CLS 值。 — Google Search Console 網站體驗核心指標報告。

Lighthouse 避免執行大型版面配置位移稽核作業，藉此顯示網頁中對 CLS 帶來最大影響的 DOm 元素。 — Lighthouse 的「避免大型版面配置位移」稽核功能會顯示哪些元素會影響 CLS 分數，以及影響程度。

請務必注意累計版面配置 Shift 的「累積」部分，也就是透過整個頁面生命週期擷取分數。實際分數會納入因使用者互動 (例如捲動頁面或輕觸按鈕) 而產生的偏移。為了從欄位資料收集 CLS 分數，團隊整合了 web-vitals JavaScript 程式庫報表。

該團隊使用 Chrome 開發人員工具找出網頁上的版面配置位移。開發人員工具的版面配置位移區域：每當版面配置位移時，就會以藍色矩形醒目顯示用於 CLS 的元素，以視覺化方式呈現。

文章詳細資料頁面，主頁橫幅和文字上方有藍色矩形。 — 以視覺化方式呈現版面配置位移。

他們發現，在針對第一個檢視畫面載入文章頂端的主頁橫幅後，版面配置會位移。

文章詳細資料頁面的螢幕截圖，顯示版面配置位移前後的並排比較。 — 文章詳細資料頁面的版面配置位移。

在上述範例中，當圖片載入完畢後，文字會往下推 (位置變更會以紅線表示)。

改善圖片的 CLS

針對固定大小的圖片，您可以在 img 元素中指定 width 和 height 屬性，並使用新型瀏覽器提供的 CSS aspect-ratio 屬性，避免版面配置位移。但 Yahoo!JAPAN News 不僅必須支援新式瀏覽器，也須支援安裝在相對舊作業系統 (例如 iOS 9) 中的瀏覽器。

他們使用長寬比方塊，也就是在圖片載入前使用標記保留網頁空間。這個方法需要事先知道圖片的長寬比，亦即可從後端 API 取得的圖片。