搜尋

  1. 首頁
  2. »
  3. 軟體
  4. »
  5. 瀏覽器
  6. »
  7. 二款 Google 網站核心指標 CLS 檢測器外掛,方便檢視網頁區塊問題並進行優化與修正

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

2021/06/10

梅問題-二款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的區塊有那些,同時左下角還會有即時的統計數字。
梅問題-二款Google網站核心指標 CLS檢測器外掛,讓你方便檢視網頁那邊出了問題並進行修正
Step2
當安裝完畢後,開啟網頁再讀取完畢時,點Core Web Vitals的圖示,這時畫面就會出現橘色框與綠色框,同時左下角也會立即顯示,目前CLS的分數,而這時只要檢查橘色框框中,看是那邊出問題就可以了。
梅問題-二款Google網站核心指標 CLS檢測器外掛,讓你方便檢視網頁那邊出了問題並進行修正
Step3
除了那一隻以外,梅干會建議再安裝CLS Checker
梅問題-二款Google網站核心指標 CLS檢測器外掛,讓你方便檢視網頁那邊出了問題並進行修正
Step4
一樣在安裝完畢後,開啟網頁,再點CLS Checker圖示,並選擇Check the page
梅問題-二款Google網站核心指標 CLS檢測器外掛,讓你方便檢視網頁那邊出了問題並進行修正
Step5
在檢測完畢後,就會列出有問題的區塊,再點後方的Toggle鈕,這時就會將有問題的區塊上方,蓋上一層半透明的色塊。
梅問題-二款Google網站核心指標 CLS檢測器外掛,讓你方便檢視網頁那邊出了問題並進行修正
Step6
當檢測到這時,梅干猜測應該是上方的選單所造成的,因為當滑動超過180像素時,上選單才滑出並蓋在區塊上方。
梅問題-二款Google網站核心指標 CLS檢測器外掛,讓你方便檢視網頁那邊出了問題並進行修正
Step7
所以梅干就試著把上方的選單設為固定看看,在設定完畢後,再點Core Web Vitals時,無論滾動幾次,下方的CLS值總算固定下來了,同時數值也在範圍內。
梅問題-二款Google網站核心指標 CLS檢測器外掛,讓你方便檢視網頁那邊出了問題並進行修正
Step8
當用CLS Checker一檢測後,才發現原來是我圖片外圍加了一些邊距,所造成的版塊的位移,由於這個移動的範圍相當的小,所以梅干也就不再作修正了,而每當修正完畢時,透過Search Console重新審核時,需要28天才知道結果,因此透過這二隻外掛,方便各位找出網頁那邊有問題,有這困擾的朋友,也趕快安裝並檢測看看囉!
梅問題-二款Google網站核心指標 CLS檢測器外掛,讓你方便檢視網頁那邊出了問題並進行修正


精選文章

友好網站  樂活大方 | 男丁格爾

回應本文