发布时间：2025 年 1 月 22 日
QuintoAndar 将 Interaction to Next Paint (INP) 缩短了 80%，从而显著提升了网站性能，使转化次数同比增长了 36%。我们深知快速响应的网站对提高用户互动度的重要性，因此实施了“代码黄色”机制，以便所有团队都将提升网站性能作为优先事项。
QuintoAndar 使用 Real User Monitoring (RUM) 等工具以及 async/await 等技术来优化长任务和 React 转换，成功缩短了互动时间并改善了用户体验。这些变更（包括移除第三方像素和渲染优化）带来了更出色的效果指标：现在，符合 INP 的“良好”阈值（200 毫秒或更短）的网页从 42% 提高到了 78%，只有 6.9% 的网页提供的体验较差，而开始实施这些变更时这一比例为 32%。
问题
QuintoAndar 是巴西最大的住房平台，其房源还在多个拉丁美洲国家/地区活跃展示。搜索是房地产行业最大的在线渠道，这意味着获取自然流量对其业务至关重要。此外，提供出色的用户体验对于保持用户互动度、帮助用户找到理想住宅至关重要。
2024 年初，QuintoAndar 意识到，虽然他们可能拥有市场上最好的平台，但仍可以提供更好的用户体验，从而提高转化率。在将 Interaction to Next Paint (INP) 引入为 Core Web Vitals 指标后，这一点就变得显而易见了。事实上，与竞争对手相比，QuintoAndar 的 INP 最差。
由于意识到 INP 较高会对用户体验产生负面影响，QuintoAndar 的 SEO 和网站效果团队决定采取行动。有了明确的行动计划，他们开始着手进行一系列技术和内容改进，目的不仅是降低 INP，还要提高用户互动度和点击率。
本文将介绍 QuintoAndar 如何将 INP 降低了 80%，从而显著提高了转化次数并改善了用户体验。在本案例研究中，我们将探讨所实施的策略、所面临的挑战以及取得的成果。
代码黄色：优先考虑 Web 性能
QuintoAndar 深知，网站性能不仅对用户体验至关重要，对整体业务成败也至关重要。他们还知道，网站速度快且响应迅速有助于提高互动度和用户留存率。因此，QuintoAndar 明白，要想取得这些成效，需要整个组织持续协调一致地努力。这促使 QuintoAndar 发起了“黄色警报”。
“黄色警报”一词源自 Google，旨在应对提高速度的需求，授权指定的领导者可以招募公司内的任何人来提供协助，无论他们目前正在负责哪些项目。
在 QuintoAndar，这项“黄色警报”功能充当了内部提醒系统，旨在优先改进组织内的 Web 性能。宣布“黄色警报”后，公司内的各个团队会立即协调行动，解决与性能相关的问题。
QuintoAndar 如何发现重大优化机会并进行优化
超过 200 毫秒的延迟会被用户察觉，超过此延迟时间的任何明显延迟都会影响良好的用户体验。因此，INP 指标至关重要：它通过观察网页生命周期内发生的所有点击、点按和键盘互动的延迟时间，评估网页对用户互动的总体响应情况。
不过，若要提升此指标，就需要深入了解相关详情。对于 QuintoAndar，第一步是确定用户体验的哪些阶段和元素导致互动缓慢。为此，您可以使用实时用户监控 (RUM) 技术，以便详细跟踪缓慢的互动。这包括将 INP 细分为输入延迟、处理时间和呈现延迟等子部分，以及分析长动画帧 (LoAF)。
例如，通过此流程，我们发现房源搜索体验的某些元素导致第 75 个百分位数的互动时长为 4 秒（影响了 25% 的用户）。通过优化长任务，我们显著改善了影响 INP 的许多缓慢互动。为此，我们在 QuintoAndar 的 JavaScript 代码中使用 async/await 创建了收益点：
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 还实现了其他改进，例如使用记忆化、取消、中止控制器、挂起，从而改进了 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 的主要原因之一，因为在初始网页加载期间，主线程上运行的任务数量很多。
网站性能治理以防止出现回归问题
如果无法防止出现性能回归问题，仅仅优先解决性能问题是不够的。在过去 QuintoAndar 遇到回归问题时，他们认识到建立强大的治理机制以防止效果提升工作出现回归问题的重要性。
第一步是为每个指标建立提醒机制，并按应用类型或体验（或两者兼有）进行细分。通过从真实用户捕获的指标数据，QuintoAndar 能够监控效果并将这些数据发送到时序数据库，在该数据库中，可以使用工具生成信息中心和细分警报。
除了固定闹钟之外，QuintoAndar 还实现了具有可变阈值的闹钟，用于检测异常结果，以便在条件失控（甚至在达到固定阈值之前）时通知其开发团队。QuintoAndar 还成立了一个每两周召集一次的委员会，负责调整这些提醒的阈值。
为了处理突发事件，我们创建了一个流程，并使用运行手册严格遵循该流程。运行手册详细说明了针对可能出现的每种类型的问题应遵循的步骤。工程团队中的任何人都可以按照这些 Runbook 操作。
最后，为了防止 INP 问题进入生产环境，QuintoAndar 实现了 Canary 版本发布系统，该系统会分阶段向用户提供新版本（例如，从 1%、10%、65% 逐步增加到 100%）。在每次重新平衡阶段，系统都会检查 Canary 版本，以确定该版本是否会导致用户的性能下降。如果存在，系统会自动回滚，以防止未经过优化的功能全面投入生产。
我们采取的主要措施如下：
- 定义明确的提醒（固定和可变），每两周召集一次委员会来优化阈值。
- 包含详细 Runbook 的突发事件处理流程。
- 带有性能验证的 Canary 版本，以限制潜在性能回归的影响。
结果
RUM 数据表明，该组织在组织内正确确定了性能优先级，配备了专门的性能团队，并使用了优化技术，使 INP 降低了 80%。下图显示了仅限移动设备的 INP，其中可以看到最初的快速下降。这项改进得益于对存在严重问题的互动进行了修复。报告还突出显示了全年持续下降的趋势，这表明治理流程在防止回归方面的重要性。
这些改进也反映在 CrUX 信息中心中，QuintoAndar 现在的 INP 在第 75 个百分位数以下，78% 的网页的性能低于此阈值，只有 6.9% 的网页提供的体验较差，这一数字逐月稳步下降。
这一结果对于直接影响 QuintoAndar 的业务至关重要。QuintoAndar 发现，转化量同比增长了 36%（新潜在客户，在 QuintoAndar 的案例中是指安排了房源参观的用户）。这与他们通过提供更好的用户体验而实现的互动度提升密切相关，但并非完全如此。
总结
提高网站性能是一项具有挑战性的任务。有时，您甚至可能会感到不堪重负。QuintoAndar 刚起步时，并不能解决所有问题。不过，通过对问题进行细分、着重解决影响最大的问题，并促进各团队之间的协作，他们取得了实质性进展。并非所有问题都需要立即解决；即使是小幅渐进的变化，也能带来实质性的改进。无论是找出最大的瓶颈、尝试优化还是在团队中建立认知，只要迈出第一步，您就将踏上提升性能和用户体验的道路。