文章列表剛出現，準備點卡片，圖片突然載入，把標題和連結往下推了一截。圖片本身可能沒有變形，下載的尺寸也正確；問題是瀏覽器在圖到之前，不知道要替它留多高。
先保留圖片空間，再處理載入速度。這篇看的是圖片出現前後的版面位置，與圖片裁切、響應式選檔是不同工作。卡片比例固定時可用CSS圖框；正文圖片通常先在HTML提供正確的width與height。
用慢一點的圖片，看標題是否移動
下面兩張卡片使用同一張800×450的圖，讓圖片稍後才回應。左邊沒有提供尺寸，右邊在img上填了width與height。其他卡片寬度、字體和段落都相同，先看圖還沒到時的位置。
圖片完成後，左卡的標題會往下移，右卡的標題則停在原位。看的是同一段文字的上緣，不能只憑兩張圖看起來差不多就判斷沒有位移。
在這份1280px寬的畫面裡，左卡標題上緣從343.6875px移到601.3125px，往下約257.6px；右卡前後都是601.3125px。這是此圖框寬度下的結果，不是所有網站的固定距離。你自己的卡片寬度不同，保留的圖片高度也會跟著變。
正文圖片先填實際比例
知道原圖是800×450，就把這兩個值填進HTML。這是在告訴瀏覽器圖像的比例，不要求它一定在畫面上顯示800px寬。配合CSS，圖片仍能縮到正文寬度：
<img src="cover.webp" width="800" height="450"
alt="模板列表的卡片圖片">
.article-body img {
display: block;
max-width: 100%;
height: auto;
}尺寸必須對應實際比例。若原圖是正方形，卻寫800×450，載入後瀏覽器可能按真實比例重新安排高度；你只是先留了一個不合適的空間。圖片來源換了，尺寸中繼資料也要一起更新。
WordPress經媒體庫插入圖片時，常會輸出尺寸屬性；手動貼URL、某些主題卡片或自行寫模板，則應檢視真正HTML。不要只看到媒體庫有尺寸，就推論前台img一定有輸出。
卡片固定比例，用圖框保留位置
文章卡片通常希望整排整齊。若設計本來就是16:9，可由圖片或外層圖框保留比例，等圖片載入後再填入。重點是載入前，容器已經有高度；把比例加到沒有寬度的元素上，仍要查實際佈局。
.article-card__image {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}這裡CSS刻意定義固定圖框。object-fit只處理圖像如何填入這個框，保留空間由尺寸與比例規則負責。如果你需要完整顯示不同長寬比的正文圖，別把這條規則套到全站img；正文可維持自己的真實比例。
外層已經固定比例，又替圖片寫固定height時，先檢視兩者有沒有衝突。使用開發者工具讀取computed width、height，確認是哪一條規則決定圖框。看起來預留了空白，載入後高度仍改變，通常還有尺寸或樣式需要對齊。
延遲載入不會替你保留高度
loading="lazy" 控制瀏覽器何時載入圖片，不能代替width、height或固定比例。圖片離畫面較遠時，訪客可能捲到附近才看到它出現；這時沒有預留空間，更容易感覺內容跳動。
同樣不要把「等待時先顯示一個小圖」當作尺寸已完成。占位圖若和最後圖的比例不同，換圖時仍會改高度。檢查懶載入外掛輸出的佔位元素、真正圖片和替換後的class，讓它們共享同一個圖框。
最容易忽略的是失敗狀態。圖片404或解碼失敗時，卡片也應維持可用的標題與連結；適合的圖框背景可以避免整排忽高忽低。但圖片壞掉仍要修來源，不要只用背景把問題掩蓋。
修完，量同一個元素的前後位置
先選圖片下方的標題，用getBoundingClientRect讀取上緣位置。記下圖片尚未完成與完成後的top；如果頁面沒有同時捲動，兩次差值能描述這個元素移動了多少。這只是單一元素的位置比較，不是整頁CLS分數。
const title = document.querySelector('.article-card__title');
title.getBoundingClientRect().top;在自有測試頁使用較慢網路條件，再重新整理。不要先等所有圖載完才開始看，也不要拿兩次不同捲動位置的座標直接相減。沒有位移之後，繼續檢查圖片比例與內容是否符合需求。
同一個列表至少挑一張寬圖、一張直圖和一張載入較慢的圖。若卡片都採固定16:9，確保主體的裁切還能讀懂；若採自然比例，各張圖的尺寸應按自己的原檔提供。想選cover或contain，可接著看object-fit卡片裁切；下載過大的來源，則另查srcset與currentSrc。
別把所有跳動都算在圖片上
圖片空間保留後，頁面仍可能因廣告、動態提示、字體或後續插入內容移動。先看是哪個元素改變，再處理對應區塊。不要為了讓畫面安靜，把整頁固定高度或隱藏超出範圍的內容，那會截掉真正內容。
固定頁首和圖片跳動也不同。頁首遮住標題，可檢查定位與錨點；圖片到後才推開文字，則看預留空間。錄下問題發生前後的畫面，保留當時的視窗寬度和捲動位置，比較會更準確。
完成這一個卡片的修正後，先在文章、列表與相關推薦裡分別核對，再擴大到同類元件。保留原樣式，只改目標class。若另一處卡片使用不同圖片比例，別直接套用這組固定圖框。
本文的延遲案例能觀察保留空間前後的差別；正式站整體的Core Web Vitals，需要另以真實頁面和訪客資料量測。不要把一張卡片不再移動，寫成整站分數或搜尋排名已經改善。
如果桌機與窄螢幕使用不同裁切比例，也要讓預留框跟著那個設計改變。相同照片在桌機16:9、窄螢幕4:3時，不能只替桌機設定比例。檢視各斷點真正圖片與容器的尺寸，確認切換視窗後不會留下錯誤高度。
另外留意載入後才加上的class。若JavaScript等圖片完成才把aspect-ratio加到容器，等待期間仍然沒有高度，達不到提前保留的目的。必要的框尺寸先由原始HTML與CSS提供，再讓程式處理載入成功或失敗的狀態。
評論0