16/07/2026
網站圖片會「移位」？問題可能比你想像中更嚴重。
這種情況在 SEO 和網站體驗上叫做 Cumulative Layout Shift（CLS，累積版面配置偏移）。
簡單來說，就是當網頁載入時，圖片、廣告、影片或字體突然出現，令原本的文字和按鈕被推開、移位。對用戶來說，這會令人覺得網站不穩定，甚至可能誤按按鈕；對 Google 來說，CLS 亦是 Core Web Vitals 的其中一個重要指標，分數太差會影響網站體驗評分，間接拖低 SEO 表現。
最常見的原因，是圖片沒有預先設定尺寸。瀏覽器一開始不知道圖片會佔多少空間，等圖片載入完成後才重新排版，結果整個畫面就會突然跳動。
一個簡單的設定，就能避免這個問題：為圖片預留固定比例或尺寸。
```css
/* 方法 1：為圖片設定固定寬高比例，避免載入後跳位 */image-wrapper {
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
}
image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* 方法 2：如果已知道圖片尺寸，可直接設定 width / height */
img {
max-width: 100%;
height: auto;
display: block;
}
```
如果是 HTML 圖片，也建議直接加上 `width` 和 `height`，讓瀏覽器在圖片載入前已經知道要預留多少空間：
```html
```
👇 想知道如何改善？查看下方 Description，或聯絡 Flowtura，讓我們幫你打造更快、更穩定、更符合 SEO 的網站。
#網站 #搜尋引擎優化
