INP 最佳化成功讓 redBus 的銷售量提升了約 7%
網頁及其功能正快速演進,您現在可以在網路上建立功能豐富且功能完整的網路體驗,以在功能方面實現許多原生應用程式。
JavaScript 是促進網路互動的主要動力,但如果不適合使用,互動可能會讓人覺得不太適應,並讓使用者認為網站沒有回應或完全毀損。幸好,我們建立「與下一個顯示的內容互動 (INP)」指標來解決這項特定使用者體驗問題。
INP 會評估在網頁生命週期中,與網頁互動的所有互動,並記錄一個代表網站回應使用者輸入內容速度的單一值。簡單來說,如果網頁的 INP 低於良好門檻,與同一個網頁的互動速度都能相當快速。
redBus 是印度的巴士訂票和售票網站,他們投入了大量心力改善自家網站的 INP,即使當時仍是實驗性指標也一樣。成果使他們提升了 7% 的銷售額,再次證明網站效能和業務健全度之間的關係。瞭解 redBus 採取哪些行動來改善自家網站的 INP。
首要目標
RedBus 決定將網站的 INP 最佳化時,心中只有一個目標:
- 無論網路速度和裝置功能為何,都應將重點放在互動延遲時間,讓使用者享有更優質的使用者體驗。
- 將網站最佳化,以盡快維持互動。
- 請確保 API 發出的回應盡可能精簡,進而確保資料快速傳輸至前端。
旅程
RedBus 將互動延遲時間分類的方式有兩種:
- 在用戶端封鎖 JavaScript 造成的互動延遲。如果互動使用過多的 JavaScript 會封鎖主執行緒,則轉譯作業會延遲,且會影響網頁的 INP。
- API 呼叫造成的網路延遲。雖然 INP 評估的網路活動不是 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 的系統後,他們就能分析資料,以便更好地瞭解互動現象發生在何處。
![ELK 記錄系統回報 INP 值進行分析的螢幕截圖。](https://web.developers.google.cn/static/case-studies/redbus-inp/image/a-screenshot-the-elk-log-c6a6705d23588.png?authuser=3&hl=zh-tw)
用途
使用者在 redBus 網站上搜尋票價時,可以在搜尋頁面上變更日期,篩選已預定目的地的票價。變更這個頁面上日期的互動速度緩慢,而且是 INP 品質不佳的原因。
此外,當使用者捲動瀏覽票價時,系統會從 API 延遲載入其他票價。雖然捲動本身不會考量 INP 的測量方式,但 scroll
事件監聽器本身會安排許多必須在主執行緒上執行的工作。這項工作導致主要執行緒發生爭用情形,導致互動延遲增加,導致搜尋網頁上的 INP 不佳。
redBus 如何最佳化搜尋頁面的 INP
為改善搜尋網頁的 INP,redBus 進行了多項最佳化:
- 為減少事件回呼在特定時間內觸發的次數,
scroll
事件處理常式已遭去彈跳。降低執行scroll
事件回呼的頻率後,主執行緒就能更迅速地回應搜尋網頁上的使用者互動。 - 產生的轉譯工作會使用
requestAnimationFrame
回呼優先處理。requestAnimationFrame
會告知瀏覽器必須在下一個影格之前完成回呼中的工作。
![Chrome 開發人員工具的效能面板螢幕截圖,顯示 redBus 網站觸發捲動事件回呼 (未進行反彈跳)。導致主執行緒遭到封鎖。](https://web.developers.google.cn/static/case-studies/redbus-inp/image/a-screenshot-the-perform-59051431069ff.jpg?authuser=3&hl=zh-tw)
![Chrome 開發人員工具的效能面板螢幕截圖,顯示 redBus 網站觸發捲動事件回呼 (經過解碼)。結果導致主要執行緒的封鎖頻率較低,因為捲動事件處理常式觸發的頻率大幅降低。](https://web.developers.google.cn/static/case-studies/redbus-inp/image/a-screenshot-the-perform-3a78c8f47d6e1.jpg?authuser=3&hl=zh-tw)
此外,我們也對搜尋結果網頁做了下列進一步的最佳化:
- 系統在搜尋結果網頁的第二張到最後一張資訊卡中,系統擷取新的一批結果,以便提早觸發延遲載入作業,改善使用者體驗和視覺成效。
- 延遲載入期間,每次網路呼叫擷取的結果較少。將擷取數量從 30 個減少為 10 個結果後,觀察到 INP 範圍從 870 減少到 900,減少至 350 至 370。
雖然這些變更可大幅改善搜尋網頁的 INP,但搜尋網頁輸入欄位的 change
事件仍呼叫成本昂貴的縮減函式來更新使用者介面。這導致不必要的使用者介面重新轉譯,進而影響網頁的 INP。
為了最佳化這項互動,redBus 會在本機管理輸入元件的狀態,只有在輸入內容的 blur
事件觸發時,才會將其與 Redux 儲存庫同步處理。這項變更降低了重新算繪的數量,同時降低呼叫縮減器的頻率,避免不必要重新轉譯使用者介面。
經過這項變更,該網頁的 INP 改善了 72%,讓使用者享有更快速、更流暢的體驗,因此更有可能與使用者互動。
業務影響
眾所周知,商家健康狀態和網頁成效之間的關係。雖然 INP 是與其他網站體驗核心指標相比的新指標,但 redBus 發現這項以使用者為中心的重要成效指標,因此獲得更出色的業務成果。結果整體的銷售額提升了 7%。
簡單來說,INP 協助了 redBus 網站上的執行階段效能問題。憑藉著實際的改善經驗,redBus 能夠觀察並重現問題,並利用這些重要資訊做出改進,造福 redBus 及其業務。