將 CLS 最佳化 0.2 後,每個工作階段的網頁瀏覽量增加了 15%,工作階段持續時間增加 13%,跳出率則下降 1.72%。
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 值。](https://web.dev/static/case-studies/yahoo-japan-news/image/google-search-console-cor-65713bd9c58c3.png?authuser=19&hl=zh-tw)
![Lighthouse 避免執行大型版面配置位移稽核作業,藉此顯示網頁中對 CLS 帶來最大影響的 DOm 元素。](https://web.dev/static/case-studies/yahoo-japan-news/image/lighthouse-avoid-large-la-23c5555fd5f8f.png?authuser=19&hl=zh-tw)
請務必注意累計版面配置 Shift 的「累積」部分,也就是透過整個頁面生命週期擷取分數。實際分數會納入因使用者互動 (例如捲動頁面或輕觸按鈕) 而產生的偏移。為了從欄位資料收集 CLS 分數,團隊整合了 web-vitals JavaScript 程式庫報表。
該團隊使用 Chrome 開發人員工具找出網頁上的版面配置位移。開發人員工具的版面配置位移區域:每當版面配置位移時,就會以藍色矩形醒目顯示用於 CLS 的元素,以視覺化方式呈現。
![文章詳細資料頁面,主頁橫幅和文字上方有藍色矩形。](https://web.dev/static/case-studies/yahoo-japan-news/image/article-details-page-blu-565ff494e023.png?authuser=19&hl=zh-tw)
他們發現,在針對第一個檢視畫面載入文章頂端的主頁橫幅後,版面配置會位移。
![文章詳細資料頁面的螢幕截圖,顯示版面配置位移前後的並排比較。](https://web.dev/static/case-studies/yahoo-japan-news/image/screenshots-the-article-b6de7e5cb4ab7.jpg?authuser=19&hl=zh-tw)
在上述範例中,當圖片載入完畢後,文字會往下推 (位置變更會以紅線表示)。
改善圖片的 CLS
針對固定大小的圖片,您可以在 img
元素中指定 width
和 height
屬性,並使用新型瀏覽器提供的 CSS aspect-ratio
屬性,避免版面配置位移。但 Yahoo!JAPAN News 不僅必須支援新式瀏覽器,也須支援安裝在相對舊作業系統 (例如 iOS 9) 中的瀏覽器。
他們使用長寬比方塊,也就是在圖片載入前使用標記保留網頁空間。這個方法需要事先知道圖片的長寬比,亦即可從後端 API 取得的圖片。
![文章詳細資料頁面的螢幕截圖,顯示 CLS 最佳化作業前後的對照比較。](https://web.dev/static/case-studies/yahoo-japan-news/image/screenshots-the-article-5191c90be0709.jpg?authuser=19&hl=zh-tw)
結果
在 Search Console 中,效能不佳的網址數量減少了 98%,研究室資料中的 CLS 數量也從 0.2 減少為 0。更重要的是,業務指標也有多項相關改善。
![Search Console 報表顯示有效能問題的網頁大幅下滑。](https://web.dev/static/case-studies/yahoo-japan-news/image/search-console-report-sho-a2a53f06e3baf.png?authuser=19&hl=zh-tw)
Yahoo!JAPAN News 比較了 CLS 最佳化前後的使用者參與度指標,發現多項改善項目:
15.1%
單次工作階段網頁瀏覽量增加
13.3%
工作階段持續時間較長
1.72%*
跳出率較低 (*百分比點)
藉由改善 CLS 和其他網站體驗核心指標,Yahoo!JAPAN News 在 Chrome Android 的內容選單中也有「快速頁面」標籤。
![Android 版 Chrome 的快速頁面標籤。](https://web.dev/static/case-studies/yahoo-japan-news/image/fast-page-label-chrome-da3bd8521a851.png?authuser=19&hl=zh-tw)
版面配置位移會導致使用者感到困擾,也妨礙使用者閱讀更多頁面,但可以使用適當的工具、找出問題及採用最佳做法來改善相關做法。改善 CLS,就有機會改善業務。
詳情請參閱 Yahoo!JAPAN 工程團隊的文章。