发布时间：2025 年 1 月 22 日
QuintoAndar 将 Interaction to Next Paint (INP) 降低了 80%，从而显著提升了网站性能，转化次数也随之年同比增加了 36%。我们认识到快速、自适应网站对用户互动度的重要性，因此实施了“黄色代码”计划，在所有团队中优先考虑性能。
通过使用真实用户监控 (RUM) 等工具，以及 async/await 等长任务优化和 React 过渡技术，QuintoAndar 成功缩短了互动时间并改善了用户体验。这些更改（包括移除第三方像素和渲染优化）带来了更好的性能指标，现在有 78% 的网页达到 INP 的“良好”阈值（200 毫秒或更短），而之前只有 42%；只有 6.9% 的网页提供不佳体验，而我们刚开始时这一比例为 32%。
问题
QuintoAndar 是巴西最大的住房平台，其房源信息也覆盖多个拉丁美洲国家/地区。搜索是房地产行业最大的线上渠道，这意味着获取自然流量对该公司的业务至关重要。此外，提供出色的用户体验对于保持用户互动度、帮助用户找到理想家园至关重要。
2024 年初，QuintoAndar 意识到，虽然他们可能拥有市场上最好的平台，但他们可以提供更好的用户体验，从而提高转化率。随着 Interaction to Next Paint (INP) 成为 Core Web Vitals 指标，这一点变得更加明显。事实上，与竞争对手相比，QuintoAndar 的 INP 得分最差。
QuintoAndar 的 SEO 和 Web 性能团队意识到高 INP 对用户体验的负面影响，因此决定采取行动。有了明确的行动计划后，他们开始着手进行一系列技术和内容改进，不仅旨在降低 INP，还旨在提高用户互动度和点击率。
本文将介绍 QuintoAndar 如何成功将 INP 降低 80%，从而显著提高转化率并改善用户体验。在本案例研究中，我们将探讨所实施的策略、面临的挑战以及取得的成果。
Code Yellow：优先考虑网页性能
QuintoAndar 意识到，网站性能不仅对用户体验至关重要，对整体业务成功也同样关键。他们深知，快速且响应迅速的网站能够带来更高的互动度和更好的用户留存率。因此，QuintoAndar 明白，要实现这些成果，需要整个组织持续不断地协同努力。这促使 QuintoAndar 启动了“黄色代码”计划。
“Code Yellow”概念起源于 Google，旨在满足提高速度的需求，赋予指定领导者招募公司内任何人协助的权力，无论他们当前的项目是什么。
在 QuintoAndar，“Code Yellow”是一个内部警报系统，旨在优先提升组织内的 Web 性能。“Code Yellow”一旦发布，就会触发公司内部各个团队立即采取协调一致的行动，以解决与性能相关的问题。
QuintoAndar 如何发现重大机遇并应用优化措施
超过 200 毫秒的延迟会让用户明显察觉到，而任何超过该值的显著延迟都会损害良好的用户体验。这就是 INP 指标如此重要的原因：它通过观察在网页生命周期内发生的所有点击、点按和键盘互动的延迟时间，评估网页对用户互动的总体响应情况。
不过，若要提升此指标，需要深入探究细节。对于 QuintoAndar 而言，第一步是确定用户体验的哪些阶段和元素导致了互动缓慢。这可以通过真实用户监控 (RUM) 技术来实现，该技术可以详细跟踪缓慢的互动。这包括将 INP 细分为输入延迟时间、处理时间和呈现延迟时间等子部分，以及分析长动画帧 (LoAF)。
通过此过程，可以确定（例如）房源搜索体验的某些元素导致第 75 百分位（影响 25% 的用户）的互动时间为 4 秒。通过优化长任务，许多影响 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 onInput>Change = event = {
setValue(event.target.value) // high-priority
star>tTransition(() = {
// Time-consuming task—for example, filter and update the list...
});
}
< return (
div> classNam<e="App"
input
value={value}
onChange={onInputChange}
placeholder=&>#39;Sta<rt t>yping...'
/
/div
);
}
export default App;
除了上述技术外，QuintoAndar 还实施了其他改进，例如使用记忆、去抖动、中止控制器、Suspense，从而改进了 INP。
例如，在上一个代码示例中，可以应用去抖动，这是一种将函数执行延迟到经过一段非活动期之后的技术。这有助于防止在用户快速输入时进行不必要的更新。
useEffect(() => {
const handler = setTimeout(() => {
setDebouncedValue(value);
}, 300); // Adjust debounce delay as needed
return () => clearTimeout(handler);
}, [value]);
此外，QuintoAndar 还使用总阻塞时间 (TBT) 作为 INP 的代理指标，来估算所做的重大结构性更改的影响，例如：
- 从客户端中移除第三方像素。
- 消除 CSS-in-JS。
- 渲染优化。
此类举措非常重要，因为它们直接解决了输入延迟问题，即用户开始互动到为该互动注册的事件处理脚本开始运行之间的时间。当用户开始与网页互动时，如果其他任务正在运行，输入延迟时间通常会增加。对于 QuintoAndar 而言，输入延迟是导致 INP 的主要因素之一，因为在初始网页加载期间，主线程上运行了大量任务。
Web 性能治理，防止性能下降
如果无法防止性能下降，那么仅仅确定性能问题的优先级并加以解决是不够的。QuintoAndar 过去曾遇到过性能下降的情况，因此他们认识到，必须建立一个强大的治理机制，以防止性能改进工作出现倒退。
第一步是为每个指标建立提醒机制，并按应用类型或体验（或两者）进行细分。通过从真实用户那里捕获的指标数据，QuintoAndar 能够监控性能并将这些数据发送到时序数据库，在该数据库中，可以使用工具生成信息中心和分段警报。
除了固定警报之外，QuintoAndar 还实现了具有可变阈值的警报，这些警报可检测异常结果，以便在情况失控时（甚至在达到固定阈值之前）通知其开发团队。QuintoAndar 还成立了一个双周委员会，负责调整这些警报的阈值。
为了处理突发事件，我们创建了一个流程，并严格按照运行手册执行，其中详细说明了针对可能出现的每种类型的问题应遵循的程序。工程团队中的任何人都可以遵循这些 Runbook。
最后，为了防止 INP 问题进入生产环境，QuintoAndar 实施了 Canary 版本发布系统，该系统会分阶段向用户发布新版本（例如，从 1%、10%、65% 逐步增加，最后达到 100%）。在每个重新平衡阶段，系统都会检查 Canary 版本，以确定它是否会导致用户体验变差。如果是，系统会自动回滚，防止未优化的功能完全进入生产环境。
回顾一下，我们采取的主要措施包括：
- 明确定义了提醒（固定和可变），并设立了双周委员会来优化阈值。
- 包含详细 Runbook 的突发事件流程。
- 通过 Canary 版本进行性能验证，以限制潜在性能下降的影响。
成效
根据 RUM 数据衡量，在组织内适当确定性能优先级、设立专门的性能团队并使用优化技术，使 INP 降低了 80%。下图显示了移动设备上的 INP，可以看到最初出现了快速下降。这一改进得益于对特别容易出现问题的互动的修复。此外，它还突显了全年持续下降的趋势，这表明治理流程在防止回归方面的重要性。
这些改进也反映在 CrUX 信息中心中，QuintoAndar 的 INP 现已降至 200 毫秒以下（第 75 百分位），78% 的网页性能低于此阈值，只有 6.9% 的网页体验不佳，这一数字还在逐月稳步下降。
这一结果对 QuintoAndar 的业务产生了直接影响，至关重要。QuintoAndar 发现，转化量（新潜在客户，在 QuintoAndar 的案例中，是指预约看房的用户）同比增长了 36%。这一结果与他们通过提供更好的用户体验而实现的互动度提升密切相关，但并非唯一原因。
总结
提升网站性能并非易事。有时，您甚至可能会感到不知所措。QuintoAndar 刚起步时，并没有找到所有问题的答案。不过，通过将问题分解、专注于影响最大的问题，并促进跨团队协作，他们取得了实质性进展。并非所有问题都需要一次性解决，即使是微小的、渐进式的改变也能带来有意义的改进。无论是找出最大的瓶颈、尝试优化，还是在团队中建立意识，只要迈出第一步，您就能走上提升性能和改善用户体验的道路。