WordPress 版面跳動怎麼救？實戰 fix cumulative layout shift 範例
- 最後更新日期：
🚀 讀者專屬工具
立即開啟 →
在開始閱讀前，先用 AI 自動生成您的網站架構圖？
你有沒有遇過這種狀況，頁面剛打開，手指要點「加入購物車」，按鈕卻因為 unexpected movement 而突然往下跳，結果點到別的東西？這種「版面突然位移」就是 Cumulative Layout Shift (CLS)。
這篇會用 WordPress 的真實情境，帶你一步步 fix cumulative layout shift，系統性地解決這些 layout shifts 以達成 visual stability，從「先抓到是哪個元素在動」，再到圖片、字型、內嵌內容、Lazy-load、動態 UI 的修法。你可以直接照做，改完也能驗證是否真的改善。
先把光手抓出來，用工具定位 CLS 偏移元素
CLS (layout shift score) 不是一個抽象分數，它一定有「造成位移的元素」，這分數是由 impact fraction 和 distance fraction 的乘積計算而來。先定位，後面每一刀才砍得準。一般來說，CLS ≤ 0.1 才算穩定，超過就會讓人覺得網站「不精緻」。如果你想快速理解 CLS 怎麼計分與常見原因，可以參考這篇 CLS 指標解釋與門檻。
實務上，建議你同時看兩種資料，幫助改善 Core Web Vitals 和 PageSpeed Insights 分數：
- 實驗室數據：PageSpeed Insights 或 Lighthouse，適合抓問題、看改動有沒有立刻變好。
- 真實用戶數據 (field data)：來自 Chrome UX Report 的 Search Console Core Web Vitals 報告，反映真實訪客 28 天左右的體感。
接著用這個順序找出位移來源(很像抓漏水點，先找到水從哪裡滴)，以提升整體 Core Web Vitals 和 PageSpeed Insights 表現：
- 用 PageSpeed Insights 跑一次目標頁(首頁、產品頁、文章頁各挑一頁)。
- 打開 Chrome DevTools，進入 performance panel 或 Lighthouse，重跑一次並觀察 Layout Shift 相關提示。
- 回到頁面本身，用 Chrome DevTools 的慢速網路模式(Network 設 Slow 4G)重整一次，肉眼看「哪裡先跳」。
最常見的誤判是「只看分數，不看是哪個元素在動」。先抓到元素，修復會快很多。
如果你想用更系統的方式檢查 WordPress 的 Core Web Vitals 組合問題，這份 WordPress 的 Core Web Vitals 優化指南也很適合拿來當排查清單。
圖片與媒體是 CLS 最大宗，WordPress 你要這樣修
在 WordPress，CLS 最大宗通常不是外掛，而是「瀏覽器不知道圖片或區塊要占多少空間」。等圖片載入後，原本的文字和按鈕就被擠開，造成 viewport 內的 layout shifts 和 Cumulative Layout Shift。
先給你一個最常見的「前後對照」，添加 width and height attributes 就能大幅改善，很多案例改這個就差很多：
- Before：
<img src="hero.jpg" alt="..."> - After：
<img src="hero.jpg" width="1200" height="675" style="aspect-ratio:1200/675" alt="...">
幾個 WordPress 會踩雷的場景，這裡用真實例子講清楚：
第一，精選圖片(Featured Image)或首頁首屏大圖(LCP hero)。很多主題會用 background-image 當首圖，結果沒有高度，文字先上來，圖再撐開。解法是替容器先保留空間，例如加 min-height 或 aspect-ratio，並確保首屏圖別被 lazy loading 延後。
第二，WooCommerce 商品列表。商品圖如果大小不一，或圖片尺寸資訊缺失，價格與按鈕列會一排排跳。做法是統一 responsive images 的縮圖比例(例如 1:1)，並在 CSS 指定圖片容器 aspect-ratio，讓每張商品卡高度一致。
第三，文章內相簿或多欄圖片。當圖片逐張載入時，每列高度可能重算。你可以在區塊編輯器選固定尺寸，或用樣式把相簿圖片包在固定比例容器，並搭配 responsive images 設定。
你可以用一個很直白的檢查表，快速掃過網站常見圖片位移點，這些技巧能幫助在 viewport 內 reserve space，防止 Cumulative Layout Shift 和進一步的 layout shifts：
- 媒體庫與內容圖片：確認輸出的
<img>有width、height，或至少有aspect-ratio。 - 首屏大圖：不要 lazy loading 首屏 hero，必要時加
fetchpriority="high"，並先保留容器高度，使用min-height。 - 背景圖區塊：替區塊設定固定比例或
min-height，不要等圖載入才撐開。 - 輪播第一張：第一張圖要先占位，否則標題與按鈕會被推開。
如果你需要更深入的圖片處理與尺寸策略(包含 WordPress 圖片最佳化流程)，可以延伸看 Cloudinary 的 CLS 與圖片優化指南。
字型、內嵌、Lazy-load 與動態 UI，一次把剩下的位移清乾淨
圖片穩了之後，第二波 CLS 常見來源是 web fonts 與「載入後才插入的內容」。它們不一定每次都發生，所以更容易讓人覺得難抓。
字型，先避免 FOIT，再減少 FOUT 的跳動
web fonts 的常見問題是 FOIT(字消失一段時間)或 FOUT(字型替換造成行高改變)。在 2026 的做法很務實：
- 讓字先顯示：在
@font-face加font-display: swap;或在更保守的情境用optional，這樣 fallback font 就能馬上頂上。 - 把主要 web fonts preload：只 preload 1 到 2 個最關鍵的 woff2，別全家桶。
- 需要更講究時，讓 fallback font 的度量接近：使用
size-adjust、ascent-override等，降低換字型的行高改變，減少 layout shifts。
簡短前後對照如下(概念示意)：
- Before：
@font-face{font-family:Brand;src:url(brand.woff2)} - After：
@font-face{font-family:Brand;src:url(brand.woff2);font-display:swap;size-adjust:102%;ascent-override:90%}
在 WordPress 你可以放的位置也很清楚：區塊主題優先用 theme.json 管字型載入策略，傳統主題則放在子主題的 functions.php 或站點專用外掛(比直接改主題安全)。
Ads and Embeds：內嵌內容與廣告，用「固定容器」先占位
YouTube、地圖、社群 feeds、AdSense 都可能載入後變高。原則很簡單，先讓頁面知道它會占多少空間，避免 viewport 內的 layout shifts。
- 影片常用：外層容器先加
aspect-ratio: 16/9;，YouTube 或 Google Maps 的 iframes 填滿容器。 - 廣告常用：先放固定尺寸的容器，例如 300×250，不要等廣告回來才撐開。
- 動態區塊(評論、推薦商品、社群的 dynamically injected content)：先放 skeleton screens 占位，載入後再替換內容。
只要是「載入後才出現」的東西，都要先占位，這句話幾乎能解掉一半的 CLS。
Lazy-load、輪播與動態 UI 的小陷阱
Lazy-load 很好，但首屏用錯就會害你。首屏的 hero、首張輪播圖、首個產品圖，別延後載入，因為它們一延後就會推內容。
動態 UI 也一樣常見：Cookie 同意條、公告條、黏性導覽列、聊天氣泡。想要不推內容，做法是「覆蓋」而不是「擠開」，另外若在 500ms 內有 user interaction，就不會影響分數：
- Cookie/公告：用
position: fixed疊在底部或頂部，同時預留不遮住重要按鈕的空間。 - Sticky header：一開始就保留固定高度，別等滾動後才插入一個新列。
- 聊天工具：讓它浮在角落，避免載入後改變頁面流式排版。
最後，確認改善要用同一套方法收尾：改一項就測一次，用 Lighthouse 的 PageSpeed Insights 重跑幾次看趨勢，Search Console 觀察接下來幾週的 field data (Core Web Vitals)，確認真實用戶的 layout shifts 有下降。需要更快收斂時，把改動先放在 staging，再推正式站。
結語：CLS 修好後，網站看起來會「貴」很多
CLS，即 Cumulative Layout Shift 的本質是「別讓版面突然變形」。透過改善 visual stability，能提升 user interaction 並提高 conversion rates。先抓到偏移元素，套用 width and height attributes、優化字型載入、內嵌容器與動態 UI 等修復方式，就能消除這些 frustrating 的 layout shifts。
