使用純 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 被扣分。

我們這時把 CSS 改成這樣:

img {
  aspect-ratio: attr(width) / attr(height);
}

這樣圖片就會自動依據寬跟高撐開一個比例,之後再把 max-width: 100% 加上去,就能做響應式的圖片了。

img {
  aspect-ratio: attr(width) / attr(height);
  max-width: 100%;
}

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

課程推薦

和我們交流

加入我們的社群,裡面會有一些技術的內容、有趣的技術梗,以及職缺的分享,歡迎和我們一起討論。