CLS 警报不支持的 CSS 属性在 PageInsights 核心 Web 生命体征

Question

In Google PageSpeed Insights, getting a lot of alerts as Unsupported CSS Property.

Avoid non-composited animations Animations which are not composited can be janky and increase CLS.

Unsupported CSS Property: font-weight Unsupported CSS Property: color Unsupported CSS Property: margin-right Unsupported CSS Property: font-size Unsupported CSS Property: background-position-y Unsupported CSS Property: background-position-x Unsupported CSS Property: margin-bottom. . . So on..

Attaching the image also: Screenshot of the Alerts

Answer 1

For anyone stumbling on this (like me) after spending some time to find a solution:

Here is where you should start looking:

Non-Composited Animations :

A non-composited animation is any animation that triggers one of the earlier steps in the rendering pipeline (Style, Layout, or Paint). Non-composited animations perform worse because they force the browser to do more work.

The linked article is from web.dev an should be reachable for the next few years. The article has a few useful links that might help you search to a solution:

• Stick to Compositor-Only Properties and Manage Layer Count
• How to create high-performance CSS animations

All links point towards web.dev.