發布日期：2025 年 1 月 22 日
QuintoAndar 將 Interaction to Next Paint (INP) 縮短 80%，大幅改善網站成效，轉換量也因此年增 36%。我們深知快速且回應迅速的網站對於提升使用者參與度的重要性，因此實施了「黃色警報」計畫，讓所有團隊都能優先提升成效。
QuintoAndar 使用 真實使用者監控 (RUM) 等工具，並採用 async/await 等技術來進行長時間工作最佳化和 React 轉場，成功縮短互動時間並改善使用者體驗。這些變更 (包括移除第三方像素和最佳化算繪) 讓成效指標獲得改善，現在有 78% 的網頁達到 INP 的「良好」門檻 (200 毫秒以下)，只有 6.9% 的網頁提供不佳的使用者體驗，而這項指標在我們開始時為 32%。
問題
QuintoAndar 是巴西最大的住房平台，在多個拉丁美洲國家/地區也有房源資訊。搜尋是房地產業最大的線上管道，因此取得自然流量對這類商家而言至關重要。此外，提供優質使用者體驗，對於維持使用者參與度、協助使用者找到理想住所至關重要。
2024 年初，QuintoAndar 意識到，雖然他們擁有市面上最好的平台，但仍可提供更優質的使用者體驗，進而提高轉換率。這點在推出 Interaction to Next Paint (INP) 做為 Core Web Vitals 後就顯而易見，事實上，與競爭對手相比，QuintoAndar 的 INP 表現最差。
QuintoAndar 的 SEO 和網站效能團隊瞭解高 INP 對使用者體驗的負面影響，因此決定採取行動。有了明確的行動計畫，他們開始著手進行一系列技術和內容改善工作，不僅要降低 INP，也要提升使用者參與度和點閱率。
本文將說明 QuintoAndar 如何將 INP 降低 80%，進而大幅提升轉換次數並改善使用者體驗。本個案研究將探討實施的策略、面臨的挑戰和取得的成果。
黃色警戒：優先提升網頁效能
QuintoAndar 瞭解網站效能不僅對使用者體驗至關重要，也是整體業務成功的關鍵，且知道快速回應的網站能提高參與度和使用者留存率，因此認為達成這些成效需要全公司持續且協調一致的努力。因此 QuintoAndar 啟動了「黃色警報」。
「黃色警報」概念源自 Google，旨在因應需要加快速度的情況，授權指定主管徵召公司內部任何人協助，不論他們目前負責的專案為何。
QuintoAndar 的「黃色警報」是內部警報系統，用於優先改善公司內部的網站效能。宣布「黃色警報」後，公司內部各團隊會立即採取協調行動，解決與效能相關的問題。
QuintoAndar 如何找出主要商機並進行最佳化
延遲時間超過 200 毫秒就會讓使用者察覺，若延遲時間過長，使用者體驗就會受到影響。因此，INP 指標非常重要：這項指標會觀察網頁生命週期內所有點擊、輕觸和鍵盤互動的延遲時間，評估網頁回應使用者互動的整體效能。
不過，要改善這項指標，就必須深入瞭解詳細資料。QuintoAndar 的第一步是找出使用者體驗的哪個階段和元素導致互動速度緩慢。您可以使用真實使用者監控 (RUM) 技術，詳細追蹤緩慢的互動情形。這包括將 INP 細分為 輸入延遲、處理時間和呈現延遲等子部分，以及分析長動畫影格 (LoAF)。
透過這個程序，我們可以找出房源搜尋體驗中的特定元素，導致第 75 百分位數的互動時間為 4 秒 (影響 25% 的使用者)。透過最佳化長時間工作，我們大幅改善了許多影響 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 也導入了其他改善措施，例如使用記錄、去抖動、中止控制器和暫緩，進而改善 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 的主要原因之一，因為在初始網頁載入期間，主執行緒上會執行大量工作。
網頁效能管理，避免效能迴歸
如果無法避免迴歸，只優先處理和解決效能問題是不夠的。QuintoAndar 過去曾遇到迴歸問題，因此瞭解建立完善的治理機制，以免成效改善工作出現迴歸的風險。
第一步是為每項指標建立警示機制，並依應用程式類型或體驗 (或兩者皆是) 區隔。QuintoAndar 可透過從實際使用者擷取的指標資料，監控成效並將這些資料傳送至時間序列資料庫，以便使用工具產生資訊主頁和區隔式警報。
除了固定鬧鐘，QuintoAndar 也導入了可變臨界值鬧鐘，用於偵測不尋常的結果，即使在達到固定臨界值之前，也能通知開發團隊。QuintoAndar 也每兩週成立一次委員會，調整這些警報的門檻。
為處理事件，我們建立了一個程序，並使用Runbook 嚴格遵循這個程序，其中詳細說明瞭針對可能發生的每種類型問題，應遵循的程序。工程團隊中的任何人都可以遵循這些執行手冊。
最後，為避免 INP 問題進入正式版，QuintoAndar 實作了 Canary 版本發布系統，以分階段的方式向使用者發布新版本 (例如，從 1% 開始，逐步增加到 10%、65% 和 100%)。在每次重新平衡階段，系統都會檢查 Canary 版本，看看是否會導致使用者體驗變差。如果是這樣，系統會自動回復，避免未經最佳化的功能全面進入實際工作環境。
以下是我們採取的主要行動：
- 明確定義的警報 (固定和變數)，並每兩週召開委員會會議，以便調整門檻。
- 事件程序，包括詳細的執行手冊。
- 初期測試版本會進行效能驗證，以限制潛在效能迴歸的影響。
結果
在機構內妥善設定效能優先順序、設立專屬的效能團隊，並運用最佳化技術，我們發現 INP 減少了 80%，這項數據是根據 RUM 資料評估而得。下方圖表顯示行動版的 INP，可見到初始的快速下滑。這項改善是因為修正了互動問題特別嚴重的問題。這也突顯了整年持續下降的趨勢，顯示治理程序在防止回歸方面的重要性。
這些改善也反映在 CrUX 資訊主頁中，QuintoAndar 的 INP 現已降至 200 毫秒以下，且位於第 75 百分位，78% 的網頁效能低於這個門檻，只有 6.9% 的網頁提供不佳的使用者體驗，而且這個數字每月都在持續下降。
這項結果對 QuintoAndar 的業務有直接影響，QuintoAndar 發現轉換量較去年同期增加 36% (新潛在客戶，在 QuintoAndar 的例子中是指預約看房的使用者)。這項結果與他們透過提供更優質的使用者體驗，進而提高參與度有密切關聯 (但並非唯一因素)。
結論
改善網頁效能是一項艱鉅的挑戰。有時甚至會感到無所適從。QuintoAndar 剛起步時，並沒有所有答案。不過，他們將問題細分，並著重於影響最大的問題，同時促進各團隊之間的協作，因此取得了實質進展。並非所有問題都需要立即修正；即使是小幅的漸進式變更，也能帶來顯著的改善。無論是找出最大的瓶頸、嘗試最佳化，或是讓團隊成員瞭解相關資訊，只要採取第一步，就能提升成效和使用者體驗。