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

這個頁面中的內容
找出問題
改善圖片的 CLS
結果

將 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 News 這項改善對業務關鍵參與度指標帶來重大正面影響。

如要進一步瞭解他們如何改善 CLS，請參閱 Yahoo!JAPAN News 工程團隊的貼文。

找出問題

監控 Core Web Vitals (包括 CLS) 是找出問題並找出問題來源的關鍵。在 Yahoo!JAPAN News 使用 Search Console 提供的網頁成效問題群組概覽，並透過 Lighthouse 找出各網頁可改善的網頁體驗。使用這些工具後，他們發現文章詳細資料頁面的 CLS 不佳。

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

Lighthouse 避免大型版面配置位移稽核顯示的 DOM 元素，這些元素對網頁的 CLS 影響最大。 — Lighthouse 的「避免大量版面配置轉移」稽核會顯示哪些元素會影響 CLS 分數，以及影響程度。

請務必留意「累計版面配置轉移」的累積部分，系統會在整個網頁生命週期中擷取分數。在實際情況中，分數可能會納入因使用者互動 (例如捲動網頁或輕觸按鈕) 而發生的位移。為了從現場資料收集 CLS 分數，團隊整合了 web-vitals JavaScript 程式庫報表。

團隊使用 Chrome 開發人員工具，找出哪些元素會在頁面上造成版面配置變動。開發人員工具中的「Layout Shift Regions」會在版面配置移位發生時，以藍色矩形醒目顯示導致 CLS 的元素。

文章詳細資料頁面，主圖片和文字上方有藍色矩形覆蓋。 — 以圖示呈現版面配置位移。

他們發現，在文章頂端的主頁橫幅圖片為首次檢視畫面載入後，版面配置就會發生變動。

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

在上例中，圖片載入完畢後，文字會向下移動 (紅線表示位置變更)。

改善圖片的 CLS

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

他們使用了顯示比例方塊，這是一種使用標記的方法，可在圖片載入前預留網頁上的空間。這個方法需要事先知道圖片的顯示比例，而他們可以從後端 API 取得這項資訊。