Lighthouse 报告中 CLS 值很高，但页面看起来没跳动？
我用 Lighthouse 测了一个页面，CLS（累积布局偏移）得分特别低，说是 0.35，但我在浏览器里反复刷新根本看不出内容有突然跳动啊。是不是哪里误报了？
页面里确实有个图片没设宽高，但我加了 width 和 height 属性之后重新测，CLS 还是没变。这是不是 Lighthouse 的 bug？
- 2
回答
58浏览
为什么我的页面CLS总是很高，明明没做什么动态内容？
最近用Lighthouse测性能，发现累积布局偏移（CLS）分数特别差，经常超过0.25。我页面里其实没加什么广告或者异步图片，就是普通的商品列表，每个商品有个标题和价格。 我试过给图片加了固定宽高，...
- 2
回答
61浏览
为什么我的页面布局偏移导致CLS很高？
我最近用Lighthouse测性能，发现CLS（累积布局偏移）特别高，明明没加什么动态内容啊。仔细看发现是图片加载时撑开了布局，但我已经给img加了width和height属性了，怎么还是有偏移？ 这...
- 2
回答
48浏览
为什么我的Vue页面CLS总是超标？图片加载导致布局偏移怎么解决？
我在用Vue做商品列表页，发现Lighthouse测出来的CLS经常超过0.25，主要问题好像是图片加载时没占位，导致下面的内容突然被撑开。我明明给img加了固定宽高，但还是不行。 试过用v-lazy...
- 2
回答
96浏览
图片加载导致CLS分数高，怎么定位和修复？
开发图片列表页时，Lighthouse报告显示CLS有0.5以上，主要问题提示“避免不必要的布局 shifting”。图片都用了懒加载，给img标签设置了固定宽高，但分数还是很高，搞不懂哪里出问题了。...
- 1
回答
56浏览
Lighthouse 报告中 TTI 为什么总是很高？
我用 Lighthouse 测了一个页面，TTI（Time to Interactive）指标一直卡在 8 秒以上，明明首屏内容加载挺快的啊。 我试过删掉一些第三方脚本、加了 async 属性，还把主...
- 1
回答
63浏览
Lighthouse生成报告后内容全是空白怎么办？
在用Chrome开发者工具跑Lighthouse评分时，生成的报告页面全是空白，但之前能正常出结果。试过清除浏览器缓存、重启浏览器，甚至重装Chrome都没用。 用控制台看报错显示：Uncaught ...
- 2
回答
104浏览
Lighthouse生成报告时为什么提示”未运行任何审核”?
我在用Lighthouse API生成报告时，页面一直显示"未运行任何审核"的错误。按照文档写了配置对象，但运行后结果里所有分数都是0，控制台也没报错，这是怎么回事？ 我尝试过这样调用： async ...
- 2
回答
47浏览
Lighthouse CLI 扫描本地 HTML 文件为啥报“无法访问页面”？
我用 Lighthouse CLI 想分析一个本地的静态 HTML 页面，执行命令 lighthouse file:///path/to/index.html 后却提示 “Unable to acce...
- 1
回答
102浏览
Lighthouse 自定义审计怎么获取页面的 DOM 节点？
我在写 Lighthouse 的自定义审计时，想在 audit 方法里拿到页面上某个特定元素，比如 document.querySelector('#my-button')，但直接这么写报错了，说 d...
- 1
回答
34浏览
Lighthouse 报告里 Performance 分数忽高忽低是怎么回事？
我最近用 Chrome DevTools 的 Lighthouse 测自己做的一个静态页面，Performance 分数有时候跑出来 90+，有时候却掉到 60 多，明明代码一点没改。我试过清缓存、开...
你说的图片没设置宽高确实是个常见问题，不过既然改了还没效果，建议看看是不是有其他动态加载的内容。有些脚本在页面渲染完后才插入元素，这种延迟加载也会造成布局偏移。
还有个容易被忽略的地方是字体。如果用到自定义字体，浏览器在下载字体时可能会先用系统默认字体显示文本，等字体下载完成再重排，这也会导致 CLS 上升。
另外可以检查下服务端有没有返回一些会影响首屏渲染的内容，比如过大的 CSS 文件或者阻塞渲染的 JavaScript。把关键资源优先加载能有效改善这个问题。
最后给个建议，用 Chrome DevTools 的 Performance 面板录一段视频，仔细看看具体哪里在变动。有时候肉眼可能看不出的小跳动，Lighthouse 可能捕捉到了。实在不行就多跑几次测试取平均值，毕竟一次测试结果可能存在偶然性。
先说为什么加宽高没用。最可能的情况是你用了懒加载（loading="lazy"），图片在视口外时根本不加载，等你滚动过去才加载，这时候CLS就来了。加宽高只能防止图片加载时预留空间，懒加载导致的延迟加载是另外的问题。
检查一下这几个地方：
第一，看看Network面板里这张图片是不是真的没加载。如果用了懒加载，它可能在页面初始加载时根本不请求。
第二，看是不是有动态插入的内容。广告、推荐位、或者JS动态渲染的组件最容易造成CLS。你可以打开DevTools的Performance面板录制一下，看有没有在页面加载后突然插入DOM的情况。
第三，检查你的CSS有没有覆盖了img的width/height属性。有些人CSS里写了img { width: 100%; }之类的，直接把HTML属性覆盖了。
如果确认是懒加载的问题，有几个方案：一个是给图片容器设个min-height，让它在图片加载前就占好位置；另一个是把首屏图片的loading改成eager；还有就是用aspect-ratio这个CSS属性，比width/height更可靠。
另外提醒一下，排查的时候用Lighthouse的Simulated throttling和Regular 4G模式都跑一下，看看结果差异大不大。有些时候快速网络下CLS低，慢速网络下才暴露出来。
你具体是做什么类型的页面？有没有用React/Vue之类的框架？有些框架的SSR和客户端hydration过程也会造成CLS。