我们是向客户网站添加组件/UI 元素的第三方供应商。我们有时会根据上下文参数或作为 A/B 测试的一部分在运行时隐藏/更改此容器的大小。
在我们拥有所有上下文数据之前，网站所有者不可能知道元素的最终大小，因此无法在服务器端设置高度。
为了尽量减少对 CLS 的影响，网站所有者可以为容器设置初始高度，但这有两个问题：
- 它并没有完全消除 CLS，只是略微降低了它
- 它创建了一个糟糕的用户体验，页面加载了一个空白区域，然后消失/改变高度
消除此类元素的 CLS 影响的推荐方法是什么？
问问题
160 次
1 回答
1
我们有时会根据上下文参数或作为 A/B 测试的一部分在运行时隐藏/更改此容器的大小。
每当您在运行时更改内容的大小时，您都会冒着移动页面上其他内容的风险，这可能会对使用体验产生负面影响。在您花费大量时间尝试为您的用例“修复” CLS 之前，您可能需要考虑您的用例是否适合用户体验。
如果您无法更改您的系统并且只想尽量减少它对 CLS 的影响，这里有一些选项：
- 仅在用户输入后折叠区域（可能要求用户关闭容器，或者等待页面重新布局的其他预期原因）。
- 仅当所有受影响的内容都在视口之外时才折叠。听起来您已经为首屏这样做了？对于首屏内容，您可以同时删除内容并以完全相同的量调整滚动位置。
而且，也许一些更广泛的选择是：
- 不要折叠该区域，而是将其替换为一些不会失败的默认内容。
- 可能不是一个选项，但也许有办法延迟显示内容，直到您知道是否需要条件内容？这取决于加载内容的延迟时间，并且如果您无法快速回答成功测试，则会对加载性能产生负面影响......
于 2021-03-22T16:42:15.310 回答