core-web-vitals - 在不损害 CLS 指标的情况下支持 A/B 测试

Question

我们是第 3 方供应商，可向我们客户的网站添加组件/UI 元素。我们有时会根据上下文参数或作为 A/B 测试的一部分在运行时隐藏/更改此容器的大小。

在我们拥有所有上下文数据之前，网站所有者不可能知道元素的最终大小，因此不能在服务器端设置高度。

为了尽量减少对 CLS 的影响，网站所有者可以为容器设置一个初始高度，但这有两个问题:

1. 它并没有完全消除 CLS，只是稍微降低了它
2. 它创建了一个糟糕的用户体验，页面加载时出现空白，然后空白消失/改变高度

消除此类元素的 CLS 影响的推荐方法是什么？

Answer 1

We sometimes hide/change the size of this container in run-time, based on contextual parameters or as part of A/B testing.

任何时候在运行时更改内容的大小，都可能会移动页面上的其他内容，这会对使用体验产生负面影响。在您花费大量时间尝试为您的用例“修复”CLS 之前，您可能需要考虑您的用例是否适合用户体验。

如果您无法更改您的系统，只想尽量减少它对 CLS 的影响，这里有一些选择:

• 仅在用户输入后折叠该区域(可能要求用户关闭容器，或者等待页面重新布局的其他预期原因)。
• 只有当所有受影响的内容都在视口(viewport)之外时才折叠。听起来您已经在非首屏上这样做了？对于首屏内容，您可以同时删除内容和调整滚动位置完全相同的量。

而且，也许一些更广泛的替代方案是:

• 不要折叠该区域，而是将其替换为一些不能失败的默认内容。
• 可能不是一个选项，但也许有一些方法可以延迟显示内容，直到您知道是否需要条件内容？这取决于加载内容的延迟时间，如果您不能快速回答该成功测试，将会对加载性能产生负面影响...