CLS 是否会惩罚使用动画 HTML 元素的网站？答案

【问题标题】：Does CLS penalize websites using animated HTML elements?CLS 是否会惩罚使用动画 HTML 元素的网站？
【发布时间】：2022-02-09 12:40:32
【问题描述】：

许多在线游戏都使用 HTML 元素的动画作为核心游戏机制。例如，纸牌游戏可能对游戏板上的每张牌都有一个 DIV 元素或一个 IMG 元素。玩家将这些卡片拖放到整个棋盘上，游戏通常会显示持续几秒钟的动画。这种动画的一个例子是发牌，即在游戏开始时将它们从牌组分配到游戏板上的适当位置。这通常在 1) 没有用户交互的情况下，在进入网站时完成，然后 2) 在用户交互之后，在完成一个游戏并开始另一个游戏时完成。

这些动画超过 500 毫秒，因此（据我所知）在此之后完成移动的元素将计入 CLS，无论用户是否启动了动画。此外，在网站上与用户打招呼的发牌动画完全计入 CLS。这可以通过强制用户在初始动画之前与网站交互来解决，但这是一个糟糕的用户体验，因为这对用户来说是额外的不必要且可能令人讨厌的点击。有很多东西要写，但现在，我只想说显示（不是用户发起的）问候动画是在这种情况下最好的 UX 实践，它被最流行的游戏（也使用画布）。

基于 HTML 元素的游戏网站非常受欢迎，包括纸牌、麻将、扫雷等。有些网站在 Google 搜索结果中排名靠前，每月拥有数十万用户。我怀疑其他非游戏相关的网站也可能会使用用户欣赏的有用的 HTML 元素移动动画。因此，我一般会问：

我是否正确理解这种 HTML 元素的动画，尽管是用户所期望的，但被当代 CLS 测量错误分类为意外？
CLS 措施的设计者是否有意惩罚此类网站行为？我特别问的是 SEO，因为我怀疑 CLS 可能会被某些排名算法用作一个因素。

【问题讨论】：

标签： javascript animation core-web-vitals cls

【解决方案1】：

如果不知道您是如何实现动画的，很难确切地说出是什么导致了您的问题，但是如果您使用 CSS transform 属性制作动画或过渡，那么它不应该对 CLS 有贡献，因为它不会触发页面的重新布局。

一般来说，这是平滑动画的最佳做法，因此即使您的 CLS 很好，我也会推荐它。

在此处查看更多详细信息：https://web.dev/optimize-cls/#animations

【讨论】：

想想 jQuery.animate 用 display:block 和 position:absolute 改变 IMG 的顶部和左侧 CSS 属性。这不会触发页面的重新布局，因为这些元素只是“悬停”在内容之上。尽管如此，它仍然计入 CLS。因此，从这个答案中，我了解到当前的 CLS 措施实施不正确，唯一的解决方法是重写其他完美产品的游戏引擎。那是对的吗？ IE。我的第一个问题的答案是“是”。第二个问题的答案是什么？这是故意的还是 CLS 将来会改进？
为绝对位置元素的顶部和左侧动画仍然会触发布局，因为它无法在合成器线程上完成（与变换不同）。见csstriggers.com。