透過 INP 最佳化，redBus 的銷售業績提升約 7%
網路及其功能正快速演進。您現在可以在網路上建立豐富且功能齊全的體驗，實現原生應用程式提供的大部分功能。
JavaScript 是網路互動的主要驅動力，但如果使用不當，互動可能會變得緩慢，使用者可能會認為網站沒有回應或完全無法使用。幸好，Interaction to Next Paint (INP) 指標是為瞭解決這個特定使用者體驗問題而建立。
INP 會評估網頁生命週期內與網頁發生的所有互動，並回報單一值，代表網站回應使用者輸入內容的速度。簡單來說，如果網頁的 INP 達到或低於良好的閾值，則可說網頁的所有互動都相當快速。
redBus 是一家位於印度的巴士預訂和售票網站，他們在 INP 仍被視為實驗指標的時期，就已下足了一番功夫來改善網站的 INP。他們的努力讓銷售業績成長了 7%，再次證明網站成效與業務健康狀況之間的關係。以下是 redBus 改善網站 INP 的做法。
主要目標
redBus 在著手改善網站的 INP 時，有三個目標：
- 無論網路速度和裝置功能如何，請著重於互動延遲，為使用者提供更優質的使用者體驗。
- 盡可能加快網站速度，讓互動過程更流暢。
- 請確保 API 的回應盡可能輕量，確保資料能快速傳輸至前端。
旅程
redBus 將互動延遲時間分為兩種：
- 在用戶端封鎖 JavaScript 導致的互動延遲時間。如果互動使用過多的 JavaScript 而導致主執行緒阻斷，轉譯作業就會延遲，進而影響網頁的 INP。
- API 呼叫造成的網路延遲。雖然網路活動並非 INP 評估的項目，但如果互動行為需要呼叫遠端 API，在網路速度較慢的情況下，或是要求產生大量回應時，可能會感覺速度較慢。
redBus 一開始相當有信心，認為自家網站的 INP 表現會不錯，但真實使用者監控 (RUM) 資料顯示，這項指標的 95 百分位數並非如此。
redBus 如何評估 INP
redBus 採用 Google 建構的 web-vitals JavaScript 程式庫，不僅追蹤 INP，還追蹤網站上所有網頁的所有重要使用者體驗指標。除了 web-vitals JavaScript 程式庫之外，redBus 也使用 ELK 分析前端收集到的 INP 資料。
不過，您在實際情況中追蹤網站 INP 的方式，可能與 redBus 解決問題的方式大不相同。強烈建議您先閱讀如何在實務中找出緩慢的互動，瞭解如何為網站追蹤 INP，然後如何在實驗室中重現這些互動，再開始改善互動。
在 redBus 建立追蹤 INP 的系統後，他們便能分析資料，進一步瞭解哪些地方的互動速度較慢。
用途
使用者在 redBus 網站上搜尋票價時，可以變更搜尋頁面上的日期，篩選所需目的地的票價。這個頁面上變更日期的互動速度很慢，導致 INP 不佳。
此外，當使用者捲動價格時，系統會從 API 延遲載入其他價格。雖然捲動本身不會納入 INP 的評估方式，但 scroll 事件監聽器本身會排定許多必須在主執行緒上執行的工作。這項工作會導致主執行緒發生爭用情形，進而增加互動延遲時間，導致搜尋頁面出現 INP 不佳的情形。
redBus 如何為搜尋頁面進行 INP 最佳化
為改善搜尋頁面的 INP，redBus 進行了幾項最佳化調整：
scroll事件處理常式已去抖動，以減少事件回呼在特定期間內觸發的次數。降低scroll事件回呼執行的頻率後，主執行緒就能更快速地回應搜尋頁面上的使用者互動。- 我們使用
requestAnimationFrame回呼，為產生的轉譯工作排定優先順序。requestAnimationFrame會告訴瀏覽器，回呼中的作業必須在下一個影格之前完成。
此外，我們也對搜尋結果頁面進行了以下進一步的最佳化：
- 在搜尋結果頁面上，我們會在倒數第二張資訊卡擷取新批次的結果，藉此提早觸發延後載入功能，進而改善使用者體驗和視覺效能。
- 在延遲載入期間，每個網路呼叫擷取的結果較少。將擷取次數從 30 次降至 10 次後，我們發現 INP 範圍從 870 到 900 降至 350 到 370。
雖然這些變更大幅改善了搜尋頁面的 INP，但仍有問題：搜尋頁面輸入欄位的 change 事件會呼叫耗用大量資源的縮減函式，用來更新使用者介面。這會導致不必要的使用者介面重新算繪作業，進而影響網頁的 INP。
為了最佳化這項互動，redBus 會在本機管理輸入元件的狀態，並只在輸入的 blur 事件觸發時，將其與 Redux 儲存庫同步。這項變更減少了重新算繪次數，並透過減少呼叫減算器的頻率，避免不必要的使用者介面重新算繪。
這項異動讓網頁的 INP 提升了 72%，使用者體驗也變得更快速流暢，更能吸引使用者互動。
業務影響
商家健康度與網頁成效之間的關係眾所皆知。雖然與其他 Core Web Vitals 相比，INP 是相對較新的指標，但 redBus 發現，專注於改善這項以使用者為本的重要成效指標，可帶來更出色的業務成果。整體銷售額因此成長 7%。
簡而言之，INP 有助於瞭解 redBus 網站的執行階段效能問題。在瞭解需要改善的部分後，redBus 便能觀察問題、重現問題，並利用這些重要資訊進行最佳化，為 redBus 及其業務帶來好處。