为什么Google PageSpeed Insight会将带hover效果的按钮识别为动画？

• Google PageSpeed Insights 的非合成动画检测逻辑不区分动画触发场景，只要元素绑定了CSS transition/animation属性，且过渡/动画的属性不属于GPU合成层支持的属性（如transform、opacity），就会被标记为非合成动画问题。
• 你使用的hover变色按钮绑定了颜色类属性（color/background-color等）的过渡效果，而颜色类属性需要触发主线程重绘无法直接通过GPU合成渲染，因此被工具误识别为需要优化的非合成动画，实际上交互触发的过渡不会影响页面初始加载性能。

• 方案1：调整CSS过渡属性范围，仅给合成层属性添加过渡效果，不需要过渡的颜色类属性不纳入过渡范围：

/* 错误写法：所有属性都加过渡，包含无法合成的颜色属性 */
.btn {
  transition: all 0.3s ease;
}
/* 正确写法：仅指定合成属性开启过渡 */
.btn {
  transition: transform 0.3s ease, opacity 0.3s ease;
}
/* hover状态下直接修改颜色，无过渡不会触发误报 */
.btn:hover {
  color: #新的字体色值;
  background-color: #新的背景色值;
}

• 方案2：如果需要保留颜色过渡效果，可以给元素添加will-change: background-color属性提示浏览器提前做渲染优化，同时可以手动在PageSpeed Insights的检测规则中忽略该类交互触发的非合成动画提示，该类提示对页面实际加载性能无影响。
• 方案3：如果不需要颜色过渡效果，直接移除按钮绑定的transition属性即可消除该报错。

内容的提问来源于stack exchange，提问作者alancc