发布时间：2025 年 1 月 22 日
QuintoAndar 通过将其 交互到下次绘制 (INP) 降低了 80%，从而显著提高了其 Web 性能，并使年度转化率提高了 36%。 认识到快速响应的站点对于用户参与的重要性，我们实施了“代码黄色警报”，以优先考虑所有团队的性能。
QuintoAndar 使用 真实用户监控 (RUM) 等工具以及 async/await 等技术进行长任务优化和 React 过渡，成功缩短了交互时间并改善了用户体验。 这些更改（包括删除第三方像素和渲染优化）带来了更好的性能指标，现在 78% 的页面达到了 INP 200 毫秒或更低的“良好”阈值，而我们开始时只有 42%，并且只有 6.9% 的页面提供较差的体验，而我们开始时为 32%。
问题
QuintoAndar 是巴西最大的住房平台，其房源也活跃于多个拉丁美洲国家。 搜索是房地产中最大的在线渠道，这意味着获取自然流量对其业务至关重要。 此外，提供出色的用户体验对于保持用户参与度、帮助用户找到他们梦想的家园至关重要。
在 2024 年初，QuintoAndar 意识到，虽然他们可能拥有市场上最好的平台，但他们可以提供更好的用户体验，从而提高转化率。 随着 交互到下次绘制 (INP) 作为核心网页指标的引入，这一点变得显而易见，事实上，与我们的竞争对手相比，QuintoAndar 的 INP 最差。
意识到高 INP 对用户体验的负面影响，QuintoAndar 的 SEO 和 Web 性能团队决定采取行动。 凭借明确的行动计划，他们开始致力于一系列技术和内容改进，这些改进不仅旨在降低 INP，还旨在提高用户参与度和点击率。
这就是 QuintoAndar 如何成功将 INP 降低 80% 的故事，从而显著提高了转化率和用户体验。 在本案例研究中，将探讨实施的策略、面临的挑战以及取得的成果。
代码黄色警报：优先考虑 Web 性能
QuintoAndar 意识到 Web 性能不仅对用户体验至关重要，而且对整体业务成功也至关重要，并且知道快速响应的站点会带来更高的参与度和更好的用户保留率，因此他们理解，要实现这些结果，需要整个组织持续且协调的努力。 这促使 QuintoAndar 设立了“代码黄色警报”。
“代码黄色警报”的概念起源于 Google，是为了响应提高速度的需求，授予指定的领导者权力，可以招募公司内的任何人来协助，无论他们当前的项目是什么。
在 QuintoAndar，“代码黄色警报”充当内部警报系统，旨在优先考虑组织内的 Web 性能改进。 当宣布“代码黄色警报”时，它会触发公司内各个团队立即采取协调行动，以解决与性能相关的问题。
QuintoAndar 如何识别主要机会并应用优化
超过 200 毫秒的延迟对用户来说是明显的，任何超出该范围的显著延迟都会损害良好的用户体验。 这就是 INP 指标如此重要的原因：它通过观察页面生命周期中发生的所有点击、触摸和键盘交互的延迟来评估页面的整体响应速度。
但是，改进此指标需要深入研究细节。 对于 QuintoAndar 来说，第一步是确定用户体验的哪些阶段和元素导致了交互缓慢。 这可以使用 真实用户监控 (RUM) 技术来完成，该技术可以详细跟踪缓慢的交互。 这包括将 INP 分解为子部分，例如 输入延迟、处理时间和呈现延迟，以及分析 长动画帧 (LoAF)。
通过此过程，例如，可以确定属性搜索体验的某些元素在第 75 个百分位（影响 25% 的用户）导致了 4 秒的交互时间。 通过优化长任务，在许多影响 INP 的缓慢交互中取得了显著改进。 这是通过使用 async/await 在 QuintoAndar 的 JavaScript 代码中创建屈服点来完成的。
function yieldToMain () {
return new Promise(resolve => {
setTimeout(resolve, 0);
});
}
通过这种方式，可以更快地发生对用户有用的视觉反馈。 在 QuintoAndar 的案例中，渲染了一个微调器，主线程让位于其他可能更高优先级的任务，然后可以恢复最初要完成的其余工作。
async function handleFilterClick () {
showLoadingSpinner();
await yieldToMain(); // Yield point
await loadFilterData();
showModal();
}
另一种广泛使用的技术（对于那些使用 React 构建应用程序的人来说至关重要）是过渡的使用。 由于 React 现在支持过渡，QuintoAndar 可以使用 useTransition 钩子来更新应用程序状态，而不会阻塞用户界面。
import React, { useState, useTransition } from 'react';
function App() {
const [isPending, startTransition] = useTransition();
const [value, setValue] = useState('');
const onInputChange = event => {
setValue(event.target.value) // high-priority
startTransition(() => {
// Time-consuming task—for example, filter and update the list...
});
}
return (
<div className="App">
<input
value={value}
onChange={onInputChange}
placeholder='Start typing...'
/>
</div>
);
}
export default App;
除了上述技术外，QuintoAndar 还实施了其他改进，例如使用 记忆化、防抖、中止控制器、Suspense，从而提高了 INP。
例如，在之前的代码示例中，可以应用防抖，这是一种延迟函数执行直到经过一定非活动期之后的技术。 这有助于防止用户快速键入时出现不必要的更新。
useEffect(() => {
const handler = setTimeout(() => {
setDebouncedValue(value);
}, 300); // Adjust debounce delay as needed
return () => clearTimeout(handler);
}, [value]);
此外，使用 总阻塞时间 (TBT) 作为 INP 的代理，使 QuintoAndar 能够估计所做的重大结构更改的影响，例如
- 从客户端删除第三方像素。
- 消除 CSS-in-JS。
- 渲染优化。
这些举措非常重要，因为它们直接解决了 输入延迟，即用户开始交互到为其注册的事件处理程序开始运行之间的时间。 当用户开始与页面交互时，如果其他任务正在运行，输入延迟通常会增加。 对于 QuintoAndar 来说，由于初始页面加载期间主线程上运行的大量任务，输入延迟是 INP 的主要贡献因素之一。
Web 性能治理以防止回归
如果无法防止回归，那么优先考虑和解决性能问题是不够的。 当 QuintoAndar 过去面临回归时，他们认识到创建健全的治理机制以防止其性能改进工作倒退的重要性。
第一步是为每个指标建立警报机制，按应用程序类型或体验（或两者兼有）进行细分。 通过从真实用户捕获的指标数据，QuintoAndar 能够监控性能并将此数据发送到时序数据库，在时序数据库中，可以使用工具生成仪表板和细分警报。
除了固定警报外，QuintoAndar 还实施了具有可变阈值的警报，这些警报检测异常结果，以便在条件失控甚至在达到固定阈值之前通知其开发团队。 QuintoAndar 还成立了一个双周委员会来调整这些警报的阈值。
为了处理事件，创建了一个严格遵循使用 运行手册 的流程，运行手册详细说明了每种可能出现的问题类型的处理程序。 工程部门的任何人都可以在这些运行手册的指导下进行操作。
最后，为了防止 INP 问题进入生产环境，QuintoAndar 实施了一个金丝雀发布系统，该系统分阶段向用户交付新版本（例如，从 1%、10%、65% 逐步增加到最终的 100%）。 在每个重新平衡阶段，都会检查金丝雀版本，以查看它是否会导致用户性能下降。 如果是，则会自动发生回滚，从而防止未优化的功能完全投入生产。
回顾一下，采取的主要行动是
- 定义明确的警报（固定和可变），并设有双周委员会进行阈值细化。
- 包含详细运行手册的事件处理程序。
- 带有性能验证的金丝雀发布，以限制潜在性能回归的影响。
结果
在组织内适当优先考虑性能、设立专门的性能团队以及使用优化技术使 INP 降低了 80%，这是在我们的 RUM 数据中测得的。 下图显示了专门针对移动设备的 INP，可以看到最初的快速下降。 这种改进是由针对特别有问题的交互的修复驱动的。 它还突出了全年保持的持续下降，这表明治理流程在防止回归方面的重要性。
这些改进也反映在 CrUX 仪表板 中，QuintoAndar 现在在第 75 个百分位数的 INP 低于 200 毫秒，78% 的页面在此阈值以下运行，并且只有 6.9% 的页面提供较差的体验，这个数字逐月稳步下降。
这一结果对于直接影响 QuintoAndar 的业务至关重要。 QuintoAndar 观察到年度转化量（新潜在客户，在 QuintoAndar 的案例中是指安排了房产参观的人）增加了 36%。 这一结果与他们通过提供更好的用户体验而实现的更高的用户参与度密切相关（但并非完全相关）。
结论
提高 Web 性能具有挑战性。 有时，它甚至可能让人感到难以承受。 当 QuintoAndar 刚开始时，他们并没有所有的答案。 然而，通过分解问题，专注于影响最大的问题，并在团队之间培养协作，他们取得了真正的进展。 并非所有问题都需要一次性解决；即使是小的、渐进式的改变也可能带来有意义的改进。 通过迈出第一步，无论是识别最大的瓶颈、试验优化，还是在团队内建立意识，您都将走上实现更好性能和更好用户体验的道路。