二款 Google 網站核心指標 CLS 檢測器外掛，方便檢視網頁區塊問題並進行優化與修正

　　最近身旁有不少朋友，問到關於 Google Search Console 網站使用體驗核心指標中的CLS，而什麼是CLS是全名為Cumulative Layout Shift，官方解釋為 累計版面配置轉移 簡稱(CLS)，雖然寫的都是中文，但卻實在難以了解，這到底是什麼意思，其實簡單的來說CLS，就是區塊堆疊所造成畫面移動的比例，比方說當頁面透過Javascript 動態產生了一個區塊，或是圖片沒設寬高，網頁面載入時，一開始圖片區塊會縮起來，當讀取完畢後再展開，這時就會造成版面的錯位。

因此把圖片加入寬高值，算是最基本的，當已加入寬高，還是出現CLS分數太高的話，那就有可能是區塊的問題了，這時就得一一的檢測，因此為了方便檢測，最近梅干發現在Chome瀏覽器中，有二款還不錯的CLS檢測器，方便快速幫你找出問題點，並加以修正，因此若你也為CLS感到困惑的話，這二款外掛不妨可試試看。

---

第一款：Core Web Vitals

---

第二款：CLS Checker

---

Step1
首先，先來介紹Core Web Vitals這外掛，透過這套外掛，可以快速知道，目前網站造成CLS的區塊有那些，同時左下角還會有即時的統計數字。

---

Step2
當安裝完畢後，開啟網頁再讀取完畢時，點Core Web Vitals的圖示，這時畫面就會出現橘色框與綠色框，同時左下角也會立即顯示，目前CLS的分數，而這時只要檢查橘色框框中，看是那邊出問題就可以了。

---

Step3
除了那一隻以外，梅干會建議再安裝CLS Checker。

---

Step4
一樣在安裝完畢後，開啟網頁，再點CLS Checker圖示，並選擇Check the page。

---

Step5
在檢測完畢後，就會列出有問題的區塊，再點後方的Toggle鈕，這時就會將有問題的區塊上方，蓋上一層半透明的色塊。

---

Step6
當檢測到這時，梅干猜測應該是上方的選單所造成的，因為當滑動超過180像素時，上選單才滑出並蓋在區塊上方。

---

Step7
所以梅干就試著把上方的選單設為固定看看，在設定完畢後，再點Core Web Vitals時，無論滾動幾次，下方的CLS值總算固定下來了，同時數值也在範圍內。

---

Step8
當用CLS Checker一檢測後，才發現原來是我圖片外圍加了一些邊距，所造成的版塊的位移，由於這個移動的範圍相當的小，所以梅干也就不再作修正了，而每當修正完畢時，透過Search Console重新審核時，需要28天才知道結果，因此透過這二隻外掛，方便各位找出網頁那邊有問題，有這困擾的朋友，也趕快安裝並檢測看看囉！