CLS 提醒 PageInsights Core Web Vitals 中不支持 CSS 属性

Question

在 Google PageSpeed Insights 中，收到大量“不支持的 CSS 属性”警报。

避免非合成动画 未合成的动画可能会很卡顿并增加 CLS。

不支持的 CSS 属性：font-weight 不支持的 CSS 属性：颜色 不支持的 CSS 属性：margin-right 不支持的 CSS 属性：font-size 不支持的 CSS 属性：background-position-y 不支持的 CSS 属性：background-position-x 不支持的 CSS 属性：margin-bottom 。 。 。 就这样..

还附上图片：

Answer 1

对于任何在花了一些时间寻找解决方案后遇到这个问题的人（像我一样）：

您应该从这里开始寻找：

非合成动画:

非合成动画是触发渲染管道中较早步骤之一（样式、布局或绘制）的任何动画。非合成动画的性能较差，因为它们迫使浏览器做更多的工作。

链接的文章来自 web.dev，应该在未来几年内可以访问。本文有一些有用的链接，可以帮助您搜索解决方案：

• 坚持仅合成器属性和管理层计数
• 如何创建高性能 CSS 动画

所有链接都指向 web.dev。

Answer 2

感谢分享这篇文章。也参观