CLS 布局偏移修复：图片尺寸、广告位与字体加载导致的跳动

引言：正读到一半文字突然下移

最烦的体验莫过于文章读一半，突然插进一张图或广告，后面文字全往下跳，你找不到刚才读到哪。这就是 CLS（累积布局偏移）超标。Google 要求全站 ≥75% URL 的 CLS≤0.1。

原理分析：偏移怎么算出来的

每当一个可见元素在两帧之间改变了位置，就产生一次偏移，分数 = 元素面积占比 × 移动距离占比。三大来源：① 图片/视频没给宽高，加载后撑开；② 广告、iframe、嵌入没预留占位；③ 字体加载时 fallback 与最终字体高度不同（FOIT/FOUT）。

保姆级实操

1. 所有图片显式给尺寸，WordPress 默认已加 width/height，但若用自定义 <img> 必须补：

<img src="/a.jpg" width="800" height="450" alt="示例">
<!-- 或用 aspect-ratio 占位 -->
<div style="aspect-ratio:16/9;background:#eee"></div>

2. 广告/嵌入预留最小高度：

.ad-slot { min-height: 250px; }

3. 字体用 swap 并限制切换跳动：

@font-face { font-display: swap; }
/* 用 size-adjust 让 fallback 与最终字体尺寸接近 */

4. 动态插入内容放预留容器，不要在已有内容上方插入。

常见踩坑

1. 只给 width 不给 height，浏览器仍算不出比例，照样跳。
2. 懒加载图片忘设尺寸，加载瞬间撑开。
3. 案例：某站 CLS 0.35，查 PSI 发现文章内广告位没占位，每次广告加载把正文顶下去几十像素。给 .ad-slot 设固定 min-height 后，CLS 降到 0.05。
4. 用 display:none 控制字体加载，反而造成 FOIT 黑块。
5. CMS 块编辑器插入无尺寸图，需在主题里统一加尺寸钩子。

总结

判断标准：CLS≤0.1 且全站 ≥75% 达标。行动清单：PSI 看偏移来源 → 图片全加尺寸 → 广告/嵌入留占位 → 字体 swap → 动态内容用预留容器。详见Core Web Vitals 三指标详解。