网站的 CLS 分数（累积布局偏移，Cumulative Layout Shift）衡量的是网页在加载过程中页面内容发生移动的程度。较低的 CLS 分数意味着您的网站具有更好的用户体验。
CLS 分数：Google 如何衡量网页视觉稳定性
CLS（Cumulative Layout Shift，累积布局偏移）是 Google 核心网页指标（Core Web Vitals）之一，主要用于检测页面加载过程中可视元素是否发生 unexpected 的移动。
对电商网站而言，促销弹窗、高清产品图、用户视频等动态内容若在加载时挤占原有布局，不仅损害用户体验，还会导致 Google 搜索排名下降。因此，优化 CLS 分数直接关系到获取免费搜索流量的能力。
检测 CLS 主要有两种方式：
- 实验室测试：在模拟环境中运行页面加载，快速得出分数，适合开发阶段自测。
- 实地测试：抓取真实用户在不同设备和网络环境下的访问数据，更能反映实际体验。
以下是四种常用检测工具：
1
Chrome DevTools 性能面板（实验室）
在 Chrome 开发者工具中录制页面加载过程，查看时间轴上的"Experience"行。红色或橙色块代表布局偏移，点击可查看具体引发偏移的元素。
2
Lighthouse（实验室）
Chrome 自带或独立运行的检测工具，生成完整的页面性能报告，包含 CLS 分数及具体改进建议。
3
Google Search Console（实地）
通过后台“核心网页指标”报告，查看哪些页面在真实访问中 CLS 表现不佳。此类问题往往在模拟环境中难以复现。
4
PageSpeed Insights（实验室 + 实地）
输入网址即可获取核心网页指标评估，分别展示移动端和桌面端的 CLS 分数，并定位具体引发问题的元素。
CLS 分数随网站内容更新而变化，可通过以下四个实操方法进行优化：
在 HTML 中为每张图、视频嵌入及 iframe 明确指定宽高属性，确保浏览器在内容加载前预留空间，避免重排。
响应式设计建议使用 CSS 宽高比容器（aspect-ratio），以适应不同屏幕。Shopify 等主流平台主题通常默认优化产品图尺寸并自动转换为 WebP、AVIF 等高效格式。自定义模板需手动检查首页、分类页及产品页的尺寸属性设置。
异步加载内容（如促销横幅、社交插件、弹窗、评论模块等）必须使用固定尺寸的容器预占空间。Google 建议：
自定义字体加载延迟会导致文本块移位。解决方案是在<head>中使用<link rel="preload">预加载字体文件，并配合font-display: optional或font-display: swap属性，减少字体切换引发的布局偏移。
动态内容（如“最近浏览”轮播、“到货通知”）应避免在非用户交互情况下插入页面顶部。优化技巧包括：
- 通知放到底部：将通知横幅设为底部固定覆盖层，不占用布局流空间。
- 提醒提前占位：为“到货通知”等模块预留固定空位，内容加载后直接填充，避免临时插入引发偏移。
- 懒加载区域设最小高度：为首屏下方的懒加载推荐区设置最小高度或使用骨架屏占位，防止页面跳动。
累积布局偏移（CLS）作为 Google 核心网页指标之一，直接反映页面加载过程中的视觉稳定性。较低的 CLS 分数不仅能提升用户体验，还有助于改善搜索排名。通过结合实验室与实地测试工具，并采取规范图片尺寸、预加载字体、合理布局动态内容等措施，可有效优化 CLS 表现。