PubConsent CMP 如何通过使用浏览器 Scheduler API 的 Yield 策略，修复使用 Chrome DevTools 识别出的响应性问题，从而将其客户的 INP 降低高达 64%。
Consent Management Platform (CMP) 是一种工具，通过获取用户对 Cookie 和跟踪技术使用的同意，帮助网站遵守隐私法规。除了确保法律合规性的主要目标外，CMP 作为第三方脚本，还必须确保对性能和用户体验的影响最小。
PubConsent CMP 是 PubTech 的最新产品。PubConsent CMP 的工程设计主要侧重于性能，旨在轻量级，确保最佳用户体验，并将对整体网站性能的影响降至最低。
Interaction to Next Paint (INP) 指标的引入使 PubTech 能够发现其 CMP 的响应性问题。在本案例研究中，PubTech 展示了他们如何解决 PubConsent CMP 平台中的响应性问题，以及他们如何在 INP 于 2024 年 3 月成为 Core Web Vitals 之一之前改进 INP，这展示了他们坚定不移地致力于在 CMP 产品中提供尽可能最佳的性能。
PubTech 为什么关心性能？
PubConsent CMP（与大多数 CMP 一样）提供作为站点页面上的第三方脚本实现的 Consent Management 功能。减轻我们的 CMP 产品（包括响应性）的性能影响对于保证 CMP 集成的成功至关重要。
通过优先考虑性能并保持 PubConsent CMP 脚本的轻量级，网站所有者可以在整合有价值的 Consent Management 功能与保持用户体验质量之间取得微妙的平衡。
鉴于 CMP 提供的功能的重要性以及它可能对性能产生的影响，PubTech 设定了以下目标
- 最大限度地减少 PubConsent CMP 产品对 INP 的影响。
- 减少归因于 CMP 产品的长任务。
- 减少 Total Blocking Time (TBT)，这可能对页面的 INP 产生负面影响。
如何测量 INP
PubTech 使用 Chrome DevTools 进行初步分析，并手动诊断了缓慢的交互。此工作流程使 PubTech 能够查明影响页面响应性的具体问题。例如，在 CMP 产品中单击“接受所有 Cookie”并随后关闭 Cookie 同意对话框的交互会导致一个长任务，该任务延迟了用户界面的渲染更新。从下图可以看出，用户界面直到长任务完成后才更新以显示对话框已关闭。
与“接受所有 Cookie”按钮类似，“拒绝所有 Cookie”或“自定义 Cookie 首选项”按钮在 PubConsent CMP 架构中都遵循相同的工作流程。因此，本案例研究中详述的改进影响了 CMP 产品中的一系列用户交互。
这种延迟导致在任务期间面板处于锁定状态的视觉感知。因为它在感知到的较长时间内阻止了渲染更新，所以页面的 INP 受到了负面影响。
PubTech 如何优化按钮和链接的 INP
为了改进 INP，PubConsent CMP 中采用了不同的 Yield 策略。
Yield 高优先级任务
以下代码片段中显示的 yieldToMainUiBlocking 方法旨在通过在 scheduler.yield 可用时使用它来 Yield 高优先级 JavaScript 任务，但如果 postTask 可用，则回退到具有 user-blocking（高）优先级的 postTask，最后回退到无。
此处避免使用 setTimeout，因为 yieldToMainUiBlocking 方法旨在处理内部 CMP 设置操作和高优先级工作，这些工作应在 Yield 时保留此类优先级。这确实意味着只有实现这些调度 API 的浏览器（在撰写本文时，目前仅在基于 Chromium 的浏览器中可用）才能从本案例研究中详述的改进中受益。即便如此，这种方法被认为是这些高优先级任务的可接受的渐进增强。
function yieldToMainUiBlocking () {
return new Promise((resolve) => {
if ('scheduler' in window) {
if ('yield' in window.scheduler) {
return window.scheduler.yield().then(() => resolve(true));
}
if ('postTask' in window.scheduler) {
return window.scheduler.postTask(() => resolve(true), { priority: 'user-blocking' });
}
}
resolve(false);
});
};
Yield 中等和后台任务
以下代码片段中显示的 yieldToMainBackground 方法用于分解具有 user-visible（中）或 background 优先级的长任务。该逻辑实现了 scheduler.yield()（如果可用），但不同之处在于它使用具有中等优先级的 postTask，最后回退到非 Chromium 浏览器上的 setTimeout。
function yieldToMainBackground () {
return new Promise((resolve) => {
if ('scheduler' in window) {
if ('yield' in window.scheduler) {
return window.scheduler.yield().then(() => resolve(true));
}
if ('postTask' in window.scheduler) {
return window.scheduler.postTask(() => resolve(true), { priority: 'user-visible' });
}
}
setTimeout(() => { resolve(true) }, 0);
});
};
yieldToMainBackground 进行 Yield 如何使浏览器能够更快地渲染下一个绘制（在本例中为关闭 CMP UI）的可视化表示。PubTech 如何通过渲染布局优化进一步减少 TBT
应用 Yield 策略后，发现 CMP 的 INP 得到了显着改善。实际上，在显着减少事件处理程序的处理持续时间之后，发现有机会为关闭 UI 操作的下一个绘制进行进一步的渲染改进。此操作最初旨在从 DOM 中删除元素。这带来了挑战，尤其是在具有大量 DOM 节点的网站上，导致渲染工作意外增加。
为了解决从 DOM 中删除元素所需的渲染工作量增加的问题，引入了一个团队称为“惰性取消渲染”的解决方案。此方法首先在用户同意隐藏 CMP 同意对话框后，将 display: none CSS 规则应用于 CMP 同意对话框。然后，使用 requestIdleCallback 将与 CMP 对话框关联的 DOM 节点的删除转移到浏览器空闲时的稍后时间点。事实证明，这种方法比在用户关闭同意对话框时删除 DOM 节点要快得多。
PubTech 如何通过改进 IAB TCF 库进一步减少 INP
在成功解决 CMP 的大多数响应性问题后，在其主要依赖项之一：IAB Transparency and Consent Framework (TCF) 库中发现了进一步的改进机会。
该库中计算量最大的组件是“构建字符串”和“分发同意”。这些组件是 IAB TCF 库的组成部分。以下针对这些组件的优化已在专门针对 PubTech 需求的单独分支中应用
- 重用解码过程的计算结果，该过程针对每个需要读取用户同意的第三方回调执行。
- 避免和减少发布商限制编码过程中的不必要循环，该过程在用户表示同意时执行。
这些优化中的第一个优化减少了 CMP 在每个挂钩到 IAB TCF 库的第三方回调上花费的时间。第二个优化减少了“构建字符串”组件产生的处理持续时间。事实上，此优化允许每次用户表示同意时执行的循环减少高达 60%。
结果
通过先前的 Yield 策略和新的渲染布局优化，CMP 的 INP 提高了高达 65%。因此，PubConsent CMP 用户体验的响应性得到了极大的改善，并且对于某些广告，通过优化广告请求的时间，可见度甚至提高了 1.5%。
除了这些改进之外，在 IAB 的 TCF 库中，观察到移动设备上的 INP 提高了高达 77%，这是由于 TCF 引起的长任务减少了高达 85%。这有助于显着减少页面整个生命周期中执行的每个第三方回调的开销。
使用 PubConsent CMP 时，通过 INP 的来源数量提高了 400% 以上，从移动设备上的 13% 提高到 55%。对于某些客户而言，由于 PubTech SDK 的优化，页面 INP 减少了一半以上，从 470 毫秒减少到 230 毫秒。
结论
PubTech 的客户很快认识到我们的优化工作带来的积极 INP 性能和业务指标结果，PubConsent CMP 的进一步性能改进正在考虑中，利用来自其客户的宝贵的真实用户监控 (RUM) 数据。此数据密切跟踪回归和进展，推动 PubTech 的持续改进工作。
作为第三方，PubTech 也意识到他们有机会大规模提高 Web 性能并提供更好的响应性，同时避免对业务 KPI 产生负面影响。开始实施这些类型的改进永远不会太晚！
特别感谢 PubTech CTO Luca Coppola 对这项创新工作的支持，以及来自 Google 的 Jeremy Wagner、Michal Mocny 和 Rick Viscomi。