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

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

Tomoki Kiraku
Tomoki Kiraku
Milica Mihajlija
Milica Mihajlija
Shunya Shishido
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 元素中指定 widthheight 屬性,並使用新型瀏覽器提供的 CSS aspect-ratio 屬性,避免版面配置位移。但 Yahoo!JAPAN News 不僅必須支援新式瀏覽器,也須支援安裝在相對舊作業系統 (例如 iOS 9) 中的瀏覽器。

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

文章詳細資料頁面的螢幕截圖,顯示 CLS 最佳化作業前後的對照比較。
左:頁面頂部的圖片保留空白。右側:在保留空間中載入主頁橫幅,不會移動版面配置。

結果

在 Search Console 中,效能不佳的網址數量減少了 98%,研究室資料中的 CLS 數量也從 0.2 減少為 0。更重要的是,業務指標也有多項相關改善

Search Console 報表顯示有效能問題的網頁大幅下滑。
經過改善的 Search Console。

Yahoo!JAPAN News 比較了 CLS 最佳化前後的使用者參與度指標,發現多項改善項目:

15.1%

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

13.3%

工作階段持續時間較長

1.72%*

跳出率較低 (*百分比點)

藉由改善 CLS 和其他網站體驗核心指標,Yahoo!JAPAN News 在 Chrome Android 的內容選單中也有「快速頁面」標籤

Android 版 Chrome 的快速頁面標籤。
Android 版 Chrome 中的「快速網頁」標籤。

版面配置位移會導致使用者感到困擾,也妨礙使用者閱讀更多頁面,但可以使用適當的工具、找出問題及採用最佳做法來改善相關做法。改善 CLS,就有機會改善業務。

詳情請參閱 Yahoo!JAPAN 工程團隊的文章