首頁 / SEO 優化行銷 / 網站核心指標 :如何解決 CLS (Cumulative Layout Shift) 問題

網站核心指標 :如何解決 CLS (Cumulative Layout Shift) 問題

如何解決CLS-指標問題

CLS (Cumulative Layout Shift),是 Google Search Console 和 Google PageSpeed Insights 評估網頁效能的三大核心指標之一,近年來,Google 對使用者體驗的檢核越發嚴苛,CLS 指標也越受到 SEO人員的重視,今天就讓將能帶大家好好地認識這個指標,識別 CLS 的問題,並學習如何解讀資訊,優化網站!

CLS (Cumulative Layout Shift) 是什麼?

CLS (Cumulative Layout Shift) ,中文:累積版面配置轉移,是 Google 在 2020 年提出的網站體驗指標之一,用來衡量網頁在載入過程中,頁面內容的「非預期元素」移動程度。

欲評估 CLS (Cumulative Layout Shift)程度,到 Google PageSpeed 頁面,輸入網址,就可以得到評估分數,CLS 分數越高,代表頁面內容移動程度越嚴重,使用者體驗越差。

版面配置轉移情境舉例:

當使用者進入頁面,想要點擊某個按鈕,在點下去的瞬間,有一則廣告跳出,導致按鈕被往下推移,最終點擊到該則廣告。

因網頁使用了自定義字型,而這些字型的載入速度不同,影響相鄰文字的排列,導致版面發生位移,打亂文字閱讀的順序,使用者需要轉動滑鼠,需要重新找回剛剛閱讀的段落。

如何計算 CLS 累計版面配置轉移

CLS 的計算考慮了在載入過程中發生的所有佈局(包括:字體、圖像、影片、聯繫表單或是按鈕等)位移事件,並通過考慮它們的影響範圍和變化量,綜合評估網頁的視覺穩定性。

CLS 值的計算公式如下:

  • CLS 分數 = 影響面積比例 * 位移比例 
  • 影響面積比例 = 影響面積 / 可視範圍
  • 位移比例 = 位移距離 / 總距離

CLS 累積版面配置轉移試算範例:

CLS 累積版面配置轉移試算

Impact fraction 影響範圍比例:是指佈局位移的影響範圍相對於視窗的比例。

如上圖所示,畫面中的文字元素佔據了整個畫面的一半(50%)可視區域。在下一個畫面中,該元素向下移動至可視區域高度的 25%。兩個頁框中元素可見區域的聯集由一個紅色虛線矩形表示,也就是說元素的移動範疇佔總畫面75%,其影響比例即為 0.75。

CLS 累積版面配置轉移 2

Distance fraction 佈局位移比例:是指可見區域內的元素位置變動的量,其影響視覺穩定性。佈局位移的計算涉及到元素的幾何變化,如位置、大小等。

如上圖所示,此不穩定文字元素位置下移至「可視區域高度的 25%」,因此距離比例為 0.25。

在這個範例中,影響範圍比例為 0.75,佈局位移比例為 0.25,因此版面配置位移分數為 0.75 * 0.25 = 0.1875。

識別 CLS 問題的原因

CLS 合格分數

CLS 合格分數

Google 建議頁面 CLS 值應低於 0.1。CLS 值越低,代表頁面內容移動程度越小,使用者體驗越好。

Google 之所以將 CLS 合格分數設置為 0.1,是因為根據 Google 的研究,當 CLS 值超過 0.1 時,使用者會開始注意到頁面內容的移動,並對使用者體驗產生負面影響,像是注意力分散、操作失誤、體驗下降等。

CLS 分析工具

Google LighthouseWebPageTesPageSpeed Insights、GTmetrix 分析網站的 CLS 值,提供 CLS 值的詳細資訊,包括造成 CLS 問題的元素、影響範圍和移動距離等。
分析網站的程式碼和 CSS找出可能導致 CLS 問題的元素和屬性。
Layout Instability API找出可能導致 CLS 問題的元素和屬性。
Chrome DevTools Firefox DevTools檢查網站的渲染過程。觀察頁面內容在載入過程中的移動情況。

CLS 如何影響 SEO 

使用者體驗: Google 將使用者體驗視為搜尋排名的重要因素之一,CLS 分數過高,可能會影響使用者體驗,以及他們與網站的互動,進而影響 SEO:

  • 注意力分散:可能會花費更多時間來尋找被移動的元素,影響他們對頁面內容的理解。
  • 操作失誤:可能會點擊錯誤位置,影響操作效率。
  • 體驗下降:可能會感到不舒服,影響他們的使用意願。

核心網頁信號: CLS 是 Google 評估網站品質的核心信號之一,如果您的網站上存在 CLS 問題,可能會導致排名下降。

Google 搜尋中的標籤提示: Google 搜尋結果中的某些頁面可能會出現「最新」、「視覺穩定」等標籤提示,這顯示了 Google 對這些網站在使用者體驗方面的關注。如果網站優化不足,可能會影響這些提示,進而影響搜尋結果中的可見性。

行動裝置搜尋優先考量: Google 已經宣布行動裝置搜尋結果中的頁面體驗將更為重要。而 CLS 通常在行動設備上更為明顯,因此可能對移動搜尋的 SEO 影響更大。

如何優化 CLS 問題

網站版面

  • 預先獲取資源尺寸:對於圖片、影片等資源,在載入之前就獲取其尺寸,避免在渲染時發生意外移動。
  • 使用固定尺寸:對於字體、圖像等元素,使用固定尺寸或比例,避免在渲染時發生意外移動。
  • 優化動態調整位置的元素:對於需要動態調整位置的元素,使用 CSS 動畫或 JavaScript 等方法,避免在載入時發生意外移動。

網站廣告

目前大多數網站已經轉為響應式網頁,在這樣的基礎上,為了提升使用者體驗,網頁會自動偵測使用裝置,自動改變網頁排版佈局,勢必會造成大量的版面位移。

若網站中嵌入網路廣告,因無法事先知道廣告大小,因此無法控制其版面位移程度,面對這樣的情形,你可以重新檢視網站內開放廣告的版位,將影響較大的版位關閉,或在手機版本中隱藏,以優化行動裝置 CLS 狀況。

結語

為了最大程度地維護良好的 SEO,開發者和網站擁有者應該關注和優化核心網頁信號,包括降低 CLS 分數,提供更好的使用者體驗,並確保網站在各種設備上都能提供穩定的視覺表現。

要達到此目的,需要檢視、調整、優化的項目並不少,若您想提升 CLS 分數,但無從手,或不熟悉程式語言、對依據檢測工具建議進行調整有困難,都可以諮詢將能,我們的團隊有著深厚 SEO 經驗,面對各式網站都可以為您評估,並提出最佳優化方案!

延伸閱讀:

返回頂端