如何解决在不损害 CLS 指标的情况下支持 A/B 测试
我们是向客户网站添加组件/用户界面元素的第 3 方供应商。我们有时会在运行时根据上下文参数或作为 A/B 测试的一部分隐藏/更改此容器的大小。
在我们拥有所有上下文数据之前,网站所有者不可能知道元素的最终大小,因此无法在服务器端设置高度。
为了尽量减少对 CLS 的影响,网站所有者可以为容器设置初始高度,但这有两个问题:
- 它并没有完全消除 CLS,只是稍微减少了它
- 它会造成糟糕的用户体验,页面加载时出现空白,然后消失/改变高度
消除此类元素的 CLS 影响的推荐方法是什么?
解决方法
我们有时会根据上下文参数或作为 A/B 测试的一部分在运行时隐藏/更改此容器的大小。
任何时候您在运行时更改内容的大小,都有可能会移动页面上的其他内容,这可能会对使用体验产生负面影响。在您花费大量时间尝试为您的用例“修复”CLS 之前,您可能需要考虑您的用例是否为用户提供了正确的体验。
如果您无法更改系统,而只想尽量减少其对 CLS 的影响,这里有一些选项:
- 仅在 用户输入后才折叠区域(可能要求用户关闭容器,或者等待页面重新布局的其他预期原因)。
- 仅当所有受影响的内容都在视口之外时才折叠。听起来你已经为低于倍数这样做了吗?对于首屏内容,您可以同时移除内容并以完全相同的量调整滚动位置。
而且,也许一些更广泛的替代方案是:
- 不要折叠该区域,而是将其替换为一些不会失败的默认内容。
- 可能不是一个选项,但也许有办法延迟显示内容,直到您知道是否需要条件内容?这取决于加载内容的延迟时间,如果您无法快速回答成功测试,则会对加载性能产生负面影响...
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。