文章目录
什么是 CLS？
CLS（Cumulative Layout Shift，累积布局偏移） 是 Google Core Web Vitals 的三大核心指标之一，用于衡量页面在加载过程中视觉稳定性的好坏。
简单说：当你正在阅读或点击页面时，元素突然发生位移——这就是布局偏移，会导致极差的用户体验。
CLS 评分标准
| 评分 | 范围 |
|---|---|
| ✅ 良好 | < 0.1 |
| ⚠️ 需改进 | 0.1 ~ 0.25 |
| ❌ 较差 | > 0.25 |
CLS 计算公式
</> PLAINTEXT
CLS = 影响分数 × 距离分数
- 影响分数：偏移元素占视口的面积比例
- 距离分数：元素偏移距离占视口高度的比例
CLS 的常见成因
- 图片未设置尺寸 —— 图片加载后撑开页面
- 广告/嵌入内容动态插入 —— 内容突然出现推开文字
- Web Font 闪烁（FOIT/FOUT） —— 字体替换导致文字跳动
- 动态注入的内容 —— 如 Cookie 弹窗、通知条
- CSS 动画触发 Layout —— 使用了
top/margin等触发重排的属性
WordPress 优化 CLS 的实用方法
1. 为所有图片设置 width 和 height
WordPress 5.5+ 已自动为 <img> 添加 width 和 height 属性，但需确认主题没有覆盖此行为。
</> HTML
<!-- 正确做法 -->
<img src="photo.jpg" width="800" height="600" alt="示例图片">
在 functions.php 中可强制保留尺寸属性：
</> PHP
// 禁止主题移除图片尺寸属性
add_filter('wp_lazy_loading_enabled', '__return_true');
2. 为广告位和嵌入内容预留空间
使用 CSS 为广告容器预设最小高度，防止广告加载后撑开页面：
</> CSS
.ad-container {
min-height: 250px; /* 根据广告尺寸设置 */
width: 100%;
background: #f5f5f5; /* 可选占位背景色 */
}
3. 优化 Web Font 加载
在主题 <head> 中添加字体预加载，并使用 font-display: swap：
</> HTML
<link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin>
</> CSS
@font-face {
font-family: 'MyFont';
src: url('/fonts/myfont.woff2') format('woff2');
font-display: swap; /* 先用系统字体，加载完成后替换 */
}
4. 使用推荐插件
| 插件 | 作用 |
|---|---|
| WP Rocket | 综合性能优化，内置 CLS 修复 |
| Autoptimize | CSS/JS 优化，减少渲染阻塞 |
| Imagify / ShortPixel | 图片压缩并保留尺寸属性 |
| OMGF（Host Google Fonts Locally） | 本地化 Google Fonts，减少字体偏移 |
5. 避免在页面顶部动态插入内容
Cookie 横幅、通知条等应使用 fixed 定位，避免占用文档流空间：
</> CSS
.cookie-banner {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 9999;
}
6. CSS 动画使用 transform 代替位置属性
</> CSS
/* ❌ 会触发 Layout，导致 CLS */
.box {
transition: margin-top 0.3s;
}
/* ✅ 只触发 Composite，不影响 CLS */
.box {
transition: transform 0.3s;
transform: translateY(0);
}
如何测量 WordPress 的 CLS
线上工具
- PageSpeed Insights —— 输入网址即可分析
- Google Search Console —— 查看真实用户数据（字段数据）
- WebPageTest —— 详细瀑布图分析
浏览器调试
打开 Chrome DevTools → Performance 面板 → 录制加载过程，在 Experience 行可以看到每一次布局偏移事件。
也可在控制台运行：
</> JAVASCRIPT
new PerformanceObserver((list) => {
list.getEntries().forEach(entry => {
console.log('CLS entry:', entry.value, entry);
});
}).observe({ type: 'layout-shift', buffered: true });
总结
| 优化项 | 优先级 |
|---|---|
| 图片设置 width/height | ⭐⭐⭐ 高 |
| 广告/嵌入内容预留空间 | ⭐⭐⭐ 高 |
| 字体 font-display: swap | ⭐⭐ 中 |
| 动态内容改用 fixed 定位 | ⭐⭐ 中 |
| CSS 动画改用 transform | ⭐ 低 |
将 CLS 控制在 0.1 以下，不仅能提升用户体验，还有助于 Google 搜索排名。建议每次发布新页面后都用 PageSpeed Insights 跑一遍，养成性能检测的习惯。
评论