CLS問題優化是網站SEO一定要考慮的因素，本文以文章圖片使用外部圖床為範例，介紹沒有標記寬度高度可能造成SEO的不良影響，進而說明Perfmatters外掛如何修正。
一、網站文章檢視
贊贊小屋部落格的文章格式千篇一律，大標題、文字段落、一張圖片，接下來再來一次標題、段落、圖片，依照這樣的結構規則看到這裡的截圖，應該會覺得很奇怪，標題之間竟然沒有圖片！
二、CLS是什麼？
過了很短的一段時間之後，圖片出來了，出來方式有點粗暴，在網頁中硬生生擠進去，把上個步驟看到的截圖上下兩端撐開，不熟悉贊贊小屋網站的讀者一看，也許會覺得疑惑，怎麼這個網頁說變就變，就算是熟悉贊贊小屋網站的讀者一看，也會覺得這網頁不怎麼優質，閱讀體驗不好。
雖然只是很短一段時間，似乎不算重大問題，但是網站界老大哥Google不這麼看，在它眼下，所有網站都應該是優等生，速度必須和它的搜索引擎一樣快，以毫秒計，才算是好的服務，因此這個短暫的頁面跳動是不能被接受的，至少不被Google接受。
Google給這種不良情況一個專有的名稱CLS，全名是「Cumulative Layout Shift」，字面解釋是累積的版面位移大小，實際上本文第一和第二步驟截圖所看到的狀況，Google把它列入搜索引擎排行榜的打分數考核表中，不良就扣分，誰分數高誰排行高，這就是所有網站經營者都很講究的SEO優化。
三、PageSpeed Insights
Google老大哥不但嚴格，還很熱心，評估標準實在，提供了很實在的工具：「PageSpeed Insights」，網址貼上去會立刻打分數，更貼心的是，改錯兼錯題教學，告訴你有哪些可以改進的地方，以這篇文章範例而言，是因為圖片沒有明確的寬度跟高度所導致。
瀏覽器依照HTML原始碼呈現網頁的時候，要處理很多內容素材，例如一定會有的文字跟圖片，文字的速度一定比圖片快，兩者時間差導致先前第一步驟的特殊景觀：文字先顯示出來了，圖片趕在後頭冒了出來，而且是推擠出來，於是造成網頁佈局的大風吹。
其實有個辦法可以避免大風吹，瀏覽器如果一開始就知道圖片的高度寬度，它可以在第一時間預留圖片位置，一個框架先擺在那裡，等會圖片上來就是在畫框擺上去，如此不致於造成網頁版面佈局的跳動，這便是Google苦口婆心建議圖片事先標註大小尺寸的緣故。
四、Core Web Vitals
當我們吃一道菜的時候，給這道菜打分數，同時也會給整間餐館打分數，兩者之間有一定關聯性，Google也是如此，它主要針對單一網頁進行評估，因為瀏覽者看的是一張一張的網頁，可是一個網站可能會產生很多網頁，類似餐廳與餐點的關係，Google也會考量整體網站的狀況。
上個步驟所看到的報告，其實是 Google在一個類似像實驗室的虛擬環境進行的評估測試，而在這個步驟的「瞭解實際使用者體驗」則是問卷調查，真實使用者體驗訪談所得到的分數。注意到最右邊有個切換選項：「這個網址」跟「來源」。「這個網址」指的是目前所輸入的特定網頁，「來源」就是整個網站。
既然是問卷調查，通常是抽樣，大部分網頁沒有被抽到，目前「這個網址」按鈕是反灰的，代表它沒有被抽到，不會有實際的使用者體驗資料。而某些網頁有實際資料，Google會以這些有被抽到的網頁為基礎，樣本代表性加權計算，得到整個網站「來源」的評估分數。
這裡的結果是紅字：失敗。截圖可見主要分成LCP、INP、CLS三個核心指標，專業術語是Core Web Vitals，目前網站是因為CLS大量版面配置轉移，測量值「0.15」太高了，因此失敗。至於CLS為何如此高，正是因為圖片沒有設定高度寬度，突然間冒出來造成板面跳動，所有網站文章都是相同結構，整個網站的分數都是不及格。
五、Perfmatters外掛
這個問題其實不難解決，HTML添加圖片同時加入高度寬度的參數值即可，但是網站這麼多文章，手動一一加入是在挑戰自己的耐性跟聰明度。因為其實圖片檔原本就隱含了寬度高度的資訊，最好是使用程式碼的方式自動補充。
WordPress架設網站的話，自動化開發非常簡單，它有許多特異功能豐富的外掛，輕鬆安裝快速增加輔助功能。例如在此加裝的是SEO優化工具：Perfmatters。
WordPress控制台進入相關的設定頁面，在 「Lazy Loading」頁面最下方有一個 「Add Missing Image Dimensions」的功能切換開關，趕快將它開啟。
六、外部圖床連結
上個步驟設定好了，實際測試卻發現並沒有作用，仔細檢查網頁，原來贊贊小屋一直都是使用WordPress超連結圖片方式，將網頁文章所使用到的圖片另外放在一個圖床網站上。
Perfmatters和大部分的外掛一樣，只有直接在WordPress上傳的圖片才起到作用，贊贊小屋這裡使用外部圖床連結，因此沒有發生自動添加高度寬度的預期效果。
七、WordPress上傳圖片
瞭解了病因於是對症下藥，既然外部圖床不行，那就直接上傳圖片吧。從這裡的網址很容易看得出來它就是WordPress媒體庫中的圖片，贊贊小屋已經在背後動了手腳。
八、CLS問題優化
調整好了之後，再請 Google老大哥幫忙打分數，總算過關，糟糕列表中不再有圖片缺乏寬度高度這項不良指標。
文章圖片的經驗分享
贊贊小屋自從架設網站以來，一直都是使用外部圖床，而且並非一般免費的圖片網站，是另外再付費使用的圖片連結服務，當初考量點是聽說這樣子會比較快一點。
多年之後，這個聽說證明是胡聽八道。
快是相對的。外部圖床也就是另外一個網站的網頁，所以其實只要自己的網站夠快，使用比較高規格的WordPress網站主機，何必外部連結多此一舉，將圖片上傳到自己網站的媒體庫就好了，省了一道請求第三方網站內容的手續，況且從這篇文章所看到的，還可以享受到很多外掛的豐富功能，包括關鍵的自動為圖片增加必要資訊，以上贊贊小屋曾經糊塗和終於覺醒的經驗提供給讀者參考。
贊贊小屋網站架設服務：
