Search code examples
pagespeed-insights

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

I run Google PageSpeed Insight on my page https://www.datanumen.com

It reports the following issues:

enter image description here

I check back with my page, and find these are not animations at all, instead, they are just buttons. When mouse hovers on them, they will change color. Why they are taken as non-composited animation and how to solve the issues?

Solution

  • According to https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count you have to remove the transition effects for your buttons.

    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; */