为什么Google PageSpeed Insight 会将按钮（带有悬停效果）作为动画？

Question

我运行 Google 我页面上的 PageSpeed Insight https://www.datanumen.com

它报告了以下问题：

我回头查看我的页面，发现这些根本不是动画，而只是按钮。当鼠标悬停在它们上面时，它们会改变颜色。为什么它们被视为非合成动画以及如何解决问题？

Answer 1

根据https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count，您必须删除按钮的过渡效果。

a.btn, a.button, .inner-page-contact form button, .testimonial-form-holder button, input[type="button"], input[type="reset"], input[type="submit"] {

    /* -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out; */

为什么Google PageSpeed Insight 会将按钮（带有悬停效果）作为动画？

Why Google PageSpeed Insight will take button(with hover effect) as animation?

pagespeed-insights