00 OceanWP - 解決 CLS 大於 0.1 秒的技巧 cover 1024x512

【OceanWP】解決 CLS 大於 0.1 秒的方法

  • Post category:WordPress
  • Reading time:12 mins read

使用 PageSpeed Insights 測試網站速度是大多數站長會做的一件事情,而測試分數並不需要太在意,僅供參考即可。但是,測試的項目( Largest Contentful Paint (LCP), First Input Delay (FID), Cumulative Layout Shift (CLS), First Contentful Paint (FCP), Interaction to Next Paint (INP), Time to First Byte (TTFB) )多少能反映出網站存在的問題,這些才是需要花時間解決的地方。

在這篇文章中,將說明如何解決 OceanWP 佈景主題搭配 Ocean Stick Anything 外掛,造成 CLS 遠大於 0.1 秒的問題。解決方法就是:刪除外掛。想知道怎麼找出問題的嗎?對過程感到興趣嗎?當網頁真實數據( CLS = 0.32 )與模擬環境( Lighthouse CLS = 0)不一致的話,如何找出原因呢?歡迎繼續閱讀以下文章內容!

Google Search Console: 網站使用體驗核心指標

Google Search Console 的首頁,前往【體驗】>【網站使用體驗核心指標】可以看到行動裝置桌面的統計報告。以我的例子來說明,是電腦版報告存在 141 個網址需要改善。

01 OceanWP - how to fix CLS large than 0.1 sec issue - Google Search Console Desktop
網站使用體驗核心指標報告: 桌面

在上圖按下【開啟報告】後,就會看到相關提示:CLS 問題 – 超過 0.1 (電腦版)

02 OceanWP - how to fix CLS large than 0.1 sec issue - Google Search Console Desktop report
問題 – 超過 0.1 (電腦版)

幾個驗證 CLS 的網站

看到這麼多網址存在 Cumulative Layout Shift 問題後,當然是前往幾個規模較大的網站來驗證一下。

PageSpeed Insights

網址在過去 28 天的資料收集期間,真實使用者 Cumulative Layout Shift 的統計紀錄的確是超過 0.1 秒。

03 OceanWP - how to fix CLS large than 0.1 sec issue - PageSpeed Insights DT score
PageSpeed Insights

然而在模擬環境 Lighthouse 並沒有偵測到 Cumulative Layout Shift 的問題。

04 OceanWP - how to fix CLS large than 0.1 sec issue - Lighthouse DT score
Lighthouse

在開源的 Lighthouse 中,檢測時使用的是控制數據(Lab data),這是在一個實驗環境中用預先準備好的設備和網路設定收集的資料,用這種資料可以確保偵錯效能問題時更順利;不過在 PageSpeed Insights 中更會使用真實資料(Field data)來測試,這些資料是使用真實的使用者資料(例如可能會從 Chrome 使用者體驗報告蒐集)來驗證,更能貼近真實使用者的經驗。

https://support.google.com/

GTmetrix

在 GTmetrix 沒有偵測到 Cumulative Layout Shift 的問題,原因是它也是使用 Lighthouse 進行模擬。

05 OceanWP - GTmatrix test
GTmetrix

SpeedVitals

跟 GTmetrix 一樣,也是使用 Lighthouse 進行模擬,所以也沒有偵測到 Cumulative Layout Shift 的問題。

06 OceanWP - SpeedVitals Performance Report
SpeedVitals Performance Report

為什麼行動裝置沒有 CLS 問題呢?

找了很多網路資料,想要解決 Cumulative Layout Shift 的問題不外乎是以下幾點:

  • 預留空間給 Adsense 廣告單元、Embeds 與 iFrames
  • 針對圖片與影片添加長與寬的尺寸屬性
  • preload 字型
  • 不要在既有內容上置入內容

基本上,以上這些建議並不適用在我的例子。從下圖可以發現,在初次可視區域( Above the Fold )內,並沒有圖片、影片、Adsense 廣告單元,並且也使用系統預設的字型。

07 OceanWP dt mobile comparison -  Above the Fold
桌面與行動裝置 Above the Fold 的差異

從上圖可以發現,桌面行動裝置在 Above the Fold 最大差異在:
– 選單 ( menu )
– 側欄 ( sidebar )

要如何找出問題是發生在選單側欄或是兩者都有貢獻呢?

Google Chrome 開發者工具抓得到問題嗎?

當網頁中有 Layout Shift 的元件時,在 Chrome 畫面中會出現半透明的藍色方塊覆蓋在元件區域。

15 google chrome dev tool - layout shift

.
使用 Chrome Dev Tool 找出 Cumulative Layout Shift 的流程如下:
.

Total Time: 5 minutes

開啟【開發人員工具】

08-google-chrome-dev-tool

首先要進入 Chrome 瀏覽器右上角的【三個圓點】>【更多工具】>【開發人員工具】
.

新增高網路延遲檔案

09-google-chrome-dev-tool-new-profile-under-network-speed

在【Network】的分頁中,按下【No throttling】右邊的三角形符號,點擊【Add】
.

高網路延遲參數

10-google-chrome-dev-tool-new-profile-with-high-latency

在左手邊【Settings】欄位下,找到【Throttling】,然後輸入:
檔案名稱:high-latency
上傳:50 kbits/s
下載:50 kbits/s
延遲:1000 ms
以上參數可以自行調整。
.

開啟 Rendering

11-google-chrome-dev-tool-rendering

按下鍵盤【ctrl】+【shift】+【p】,搜尋欄位中輸入【rendering】,按下【Drawer】
.

開啟 Layout Shift Regions

12-google-chrome-dev-tool-layout-shift-regions

在【 Layout Shift Regions 】前面的方塊打勾
.

開始驗證,重新載入頁面

13-google-chrome-dev-tool-start-profiling-and-reload-page

在【Performance】分頁中,按下【循環】箭頭開始載入頁面
.

尋找 Layout Shift 的元件

14-google-chrome-dev-tool-cls

載入頁面需要等待幾分鐘,完成後在【Experience】那一列當中,尋找是否有紅色底色並標示 Layout Shift 的提示。通常,當點擊紅色提示區域時,下方會出現詳細的位移資訊。
.

將滑鼠移到左手邊網頁內容的區域,上下移動滑鼠,假使有 Layout Shift 的元件,會出現半透明的藍色方塊覆蓋在元件區域。這時候就開始檢視外掛、CSS、JS 或其他因素,試著找出問題。

以我的例子,右手邊側欄整個都被半透明的藍色方塊覆蓋,花了一些時間才找到原因。因為在最下方的區塊,使用 Ocean Stick Anything 外掛固定在側欄,所以當刪除外掛後,就解決了 Layout Shift 的問題了。

但是,刪除外掛後觀察了一星期,發現 Cumulative Layout Shift 的值並沒有減少,依舊緩慢增加。怎麼辦呢?這個問題該不會是 OceanWP 佈景主題先天上的缺點吧?!有點想要把佈景主題換到 Astra 來使用。但是在網路上卻沒有看到 OceanWP 有這方面問題的文章。

造成 High CLS 的真正原因

當時的確感到沮喪,因為透過所有已知的工具來檢查 Cumulative Layout Shift,都沒找到主因。所以就死馬當活馬醫,保留必要的外掛,繼續刪除非必要的外掛看看有沒有用。

沒錯,造成 High Cumulative Layout Shift 的兇手就是程式碼寫得不佳的外掛!所以,經過 1 個星期的觀察,Cumulative Layout Shift 已經沒有增加的趨勢,反而是每天減少。

常見問題

可使用 Chrome 擴充功能來檢查 Cumulative Layout Shift 嗎?

可以!過程中也使用以下兩個擴充功能來檢查 Cumulative Layout Shift :
1. CLS Checker – Journey Further
2. Core Web Vitals

為何 Lab data 與 Field data 的值不同呢?

Lab data:是在實驗環境中用預先準備好的設備和網路設定收集的資料
Field data:是真實使用者資料
詳細內容

如何避免 Cumulative Layout Shift 呢?

1. 預留空間給 Adsense 廣告單元、Embeds 與 iFrames
2. 針對圖片影片添加長與寬的尺寸屬性
3. preload 字型
4. 不要在既有內容上置入內容
5. 避免安裝冷門外掛

自架網站流程

架站硬體

電腦系統

free desktop pc svgrepo com
click svgrepo com

寬頻網路

globe connection svgrepo com
click svgrepo com

架站工具

軟體懶人包

xampp svgrepo com
click svgrepo com

申請網域

domain www svgrepo com
click svgrepo com

SSL 憑證

certificate ssl svgrepo com
click svgrepo com

商標設計

logo apple ar svgrepo com
click svgrepo com

架站效能

網站設定

setting line svgrepo com 1
click svgrepo com

網站設定

軟體參數微調

快取外掛

shower svgrepo com
click svgrepo com

架站安全

找出惡意爬蟲

crawl svgrepo com
click svgrepo com

網頁標題

quiz title svgrepo com
click svgrepo com

廣告違規

advertisement svgrepo com
click svgrepo com

解決 CLS 大於 0.1 秒的方法

通常,大部分的問題都可以藉由這個章節的建議解決。極少數才會遇到 Lab data、Field data、PageSpeed Insights 與 Google Search Console 的值不同,讓問題變得很複雜。假使你也遇到上述問題時,不防先檢視一下是否有安裝非官方背書的冷門外掛!

24-GTmetrix-Speed-Visualization-with-powered-cache

你也是愛好多合一(all-in-one)快取外掛的使用者嗎?強力推薦 – Powered Cache 快取外掛,網站速度實測結果與設定指南,分享在:Powered Cache 優化指南,輕鬆提升 WordPress 網站速度