使用純 CSS 設定圖片樣式，優化 CLS(Cumulative Layout Shift)

現在做網站 Google 已經把 Core Web Vitals(網站核心指標)列為影響 SEO 很重要的因素，而對前端來說除了一些開啟速度要注意外，CLS(Cumulative Layout Shift) 都是很容易因為一開始沒有規劃所以會造成後來的麻煩。

這邊就來就如何從 CSS 的樣式設定來讓圖片不會因為讀取的時候讓版面發生太多變化，避免 CLS(Cumulative Layout Shift) 被扣分。

首先圖片會需要有長寬比的資訊，一般來說就是把 width 跟 height 帶入，像是：

<img src="dog.jpg" width="640" height="360" alt="小狗" />

但近年來因為 RWD 的關係，我們常常是像這樣設定圖片 CSS :

img {
  width: 100%; /* or max-width: 100%; */
  height: auto;
}

這樣就能夠讓圖片最多跟容器一樣寬，而高度會自動調整，但這樣寫的話就會遇到圖片寬度會先跟容器一樣寬後，高度才展開，這樣頁面就會不斷變長以致 CLS 被扣分，而圖片帶有 width 跟 height 的話也會自動調整比例。

不過更多的應該是把圖片設定最大寬度 100%，才不會因為圖片太小又被拉寬而變模糊。

img {
  max-width: 100%;
  height: auto;
}

由於現在 Core Web Vitals 對 SEO 影響頗大，能夠早一點在開發時就考慮到對於網站經營來講是一定有幫助的。