手動診斷研究室中的緩慢互動

瞭解如何將實地資料帶入實驗室，透過手動測試重現並找出互動速度緩慢的原因。

Jeremy Wagner

發布日期：2023 年 5 月 9 日

在進行 Interaction to Next Paint (INP) 最佳化時，最困難的部分就是找出導致 INP 不佳的原因。這類問題的潛在原因很多，例如在主執行緒上排程許多工作任務的第三方指令碼、大型 DOM 大小、耗用大量資源的事件回呼，以及其他原因。

改善 INP 並不容易。首先，您必須瞭解哪些互動通常會影響網頁的 INP。如果您不清楚從實際使用者的角度來看，網站上哪些互動往往最慢，請參閱「在實地找出互動速度緩慢的部分」。取得實地資料後，您就可以在實驗室工具中手動測試這些特定互動，找出這些互動速度緩慢的原因。

如果沒有欄位資料，該怎麼辦？

擁有實地資料非常重要，因為這樣您就不必花費大量時間，試圖找出需要最佳化的互動。不過，您可能沒有欄位資料。如果是這種情況，您還是可以找到可改善的互動，但需要多花一點功夫，並採用不同的方法。

總封鎖時間 (TBT) 是實驗室指標，用於評估網頁在載入期間的回應速度，與 INP 有良好的相關性。如果網頁的 TBT 過高，可能表示網頁在載入時，對使用者互動反應不夠靈敏。

如要瞭解網頁的 TBT，您可以使用 Lighthouse。如果網頁的 TBT 過高，則在網頁載入期間，主要執行緒可能會過於繁忙，進而影響網頁在網頁生命週期中這個關鍵時刻的回應速度。

如要找出網頁載入後的互動速度緩慢情形，您可能需要其他類型的資料，例如您可能已在網站分析中找出的常見使用者流程。舉例來說，如果您是電子商務網站的作業人員，常見的使用者流程就是使用者將商品加入線上購物車並結帳時採取的動作。

無論是否有實地資料，下一個步驟都是手動測試並重現緩慢的互動，因為只有重現緩慢的互動，才能修正問題。

在實驗室中重現互動速度緩慢的問題

您可以透過手動測試，在實驗室中重現互動速度緩慢的問題，方法有很多種，以下是可嘗試的架構。

開發人員工具「效能」面板即時指標

如要診斷已知的互動速度緩慢問題，建議使用 DevTools 效能分析器，但如果您不知道哪些互動有問題，可能需要花點時間才能找出速度緩慢的互動。

不過，首次開啟「成效」面板時，您會看到即時指標檢視畫面。您可以使用這項功能快速嘗試多項互動，找出有問題的互動，然後再使用更詳細的效能分析工具。當您進行互動時，診斷資料會顯示在互動記錄中 (並醒目顯示 INP 互動)。您可以展開這些互動，查看各個階段的細節：

互動記錄在「成效」面板的即時指標畫面中的顯示方式。
「成效」面板的即時指標畫面。

雖然 Web Vitals 擴充功能可協助您找出互動速度緩慢的問題，並提供一些詳細資料來協助您對 INP 進行偵錯，但您可能還是需要使用效能分析器來診斷互動速度緩慢的問題，因為這項工具會提供您需要的詳細資料，讓您能瀏覽網站的正式版程式碼，找出互動速度緩慢的原因。

錄製追蹤記錄

如要診斷及排解互動速度緩慢的問題，建議使用 Chrome 效能分析工具。如要在 Chrome 的效能分析器中剖析互動行為，請按照下列步驟操作：

  1. 開啟您要測試的網頁。
  2. 開啟 Chrome 開發人員工具，然後前往「Performance」面板。
  3. 按一下面板左上方的「記錄」按鈕，即可開始追蹤。
  4. 執行要排解的互動。
  5. 再次按一下「記錄」按鈕，即可停止追蹤。

當分析器填入資料時，您應該先查看分析器頂端的活動摘要。活動摘要會在記錄頂端顯示長時間工作的紅色長條。這樣一來，您就能快速放大問題區域。

活動摘要會顯示在 Chrome 開發人員工具效能面板頂端附近。顯示的活動大多來自 JavaScript 造成長時間的工作，火焰圖上方會以紅色醒目顯示。
Chrome 效能分析器頂端的活動摘要。長時間的作業會在活動火焰圖上方以紅色醒目顯示。在這種情況下，大部分的長時間工作都是由重要的指令碼工作負責。

您可以在活動摘要中拖曳選取區域，快速聚焦於問題區域。您可以選擇在分析器中使用麵包屑功能，協助您縮小時間軸範圍並忽略不相關的活動。

將焦點放在互動發生的位置後，「互動」追蹤可協助您將互動情形，以及其下方主執行緒追蹤中發生的活動排入：

在 Chrome 開發人員工具的效能面板中，以視覺化方式呈現的互動。主執行緒軌跡上方的互動軌跡會顯示互動時間長度，可與下方的主執行緒活動對齊。
在 Chrome 開發人員工具的效能分析器中，剖析互動資料。「互動」追蹤記錄會顯示與點擊互動相關的一系列事件。「互動」追蹤項目涵蓋負責促成互動的各項工作。

將滑鼠游標懸停在互動追蹤記錄中的互動上，即可進一步瞭解互動過程中哪個部分最長：

Chrome 開發人員工具效能面板中顯示互動的懸停工具提示。工具提示會顯示互動過程中花費的時間，以及花費時間的部分，包括互動的輸入延遲、處理時間和呈現延遲。
當滑鼠游標懸停在成效面板互動追蹤中的互動項目時，就會顯示這個工具提示。工具提示會顯示互動過程中各個部分所花費的時間。

互動中的條紋部分代表互動時間超過 200 毫秒，這是網頁 INP 的「良好」門檻上限。列出的互動部分如下：

  1. 輸入延遲：由左側扇形圖表示。
  2. 處理時間：由左右外接線之間的實心方塊呈現。
  3. 簡報延遲：以所需手法呈現的資料。

接著，您需要進一步瞭解造成互動速度緩慢的問題，本指南稍後會說明這項問題。

如何找出哪些部分的互動速度緩慢

互動情形由三個部分組成：輸入延遲、處理時間長度和呈現延遲。取決於哪個部分最耗時，決定如何針對互動進行最佳化，從而降低網頁的 INP。

如何辨別輸入延遲時間過長

輸入延遲可能會導致互動延遲。輸入延遲時間是互動的第一部分。從作業系統首次接收使用者動作到瀏覽器開始處理該互動的第一個事件處理常式回呼所需的時間。

您可以在 Chrome 效能分析器的互動追蹤中找出互動，藉此找出輸入延遲情形。左邊的虛線長度代表互動輸入延遲的部分，將滑鼠游標懸停在效能分析器中的互動上，即可在工具提示中查看確切值。

輸入延遲時間不可能為零，但您可以控制輸入延遲時間的長度。重點是要找出是否有在主執行緒上執行的工作，導致回呼無法在應有的時間內執行。

Chrome 效能面板中顯示的輸入延遲時間。由於第三方指令碼觸發的計時器導致輸入延遲時間增加，因此互動開始時間會明顯早於事件回呼。
第三方指令碼的計時器觸發的任務導致輸入延遲。互動追蹤畫面中顯示的互動細長線左側，可視覺化呈現輸入延遲情形。

在上圖中，當使用者嘗試與網頁互動時，第三方指令碼的任務正在執行，因此延長了輸入延遲時間。延長的輸入延遲時間會影響互動延遲時間，進而影響網頁的 INP。

如何找出處理時間過長的情況

事件回呼會在輸入延遲後立即執行，而事件回呼完成所需的時間稱為「處理時間長度」。如果事件回呼執行的時間過長，可能會導致瀏覽器延遲顯示下一個影格，進而大幅增加互動作業的總延遲時間。處理時間過長可能是因為運算成本高昂的第一方或第三方 JavaScript，在某些情況下，兩者都會造成這項問題。在效能分析器中，這會以互動追蹤記錄中的互動實心部分表示。

這張圖片顯示 Chrome 效能面板中的事件回呼工作。將滑鼠游標懸停在時間軸上的互動上，工具提示會顯示處理時間過長。
事件回呼，會在回應點擊互動時執行，如 Chrome 開發人員工具的效能分析器所示。請注意處理時間長度。

如要找出耗用大量資源的事件回呼，請在特定互動追蹤記錄中觀察下列項目：

  1. 判斷與事件回呼相關聯的工作是否為長時間工作。如要更可靠地在實驗室設定中顯示長時間工作，您可能需要在效能面板中啟用 CPU 節流，或是連接中低階 Android 裝置並使用遠端偵錯。
  2. 如果執行事件回呼的工作是長時間的工作，請在呼叫堆疊中尋找事件處理常式項目，例如名稱為「Event: click」的項目，這些項目的右上角會顯示紅色三角形。

您可以嘗試下列其中一種策略來縮短互動的處理時間：

  1. 盡可能減少工作。在耗用大量資源的事件回呼中發生的所有事件是否都絕對必要？如果不是，請考慮是否可以完全移除該程式碼，如果無法移除，請將執行時間延後。您也可以善用架構功能來協助處理。舉例來說，React 的傳訊功能可在元件的道具沒有變更時，略過不必要的轉譯工作。
  2. 將事件回呼中的非轉譯工作延後至較晚的時間點。長時間工作可綁定至主執行緒，藉此細分。每當您產生主執行緒時，就是結束目前工作的執行作業，並將其餘的工作分解成獨立任務。這樣一來，轉譯器就能處理先前在事件回呼中執行的使用者介面更新作業。如果你剛好使用 React，可以使用其轉換功能完成這項操作。

這些策略應該可以協助您最佳化事件回呼，進而縮短執行時間。

如何找出呈現延遲

除了輸入延遲時間和處理時間過長，有時，即使只回應少量事件回呼程式碼，算繪更新作業的成本也可能很高。瀏覽器將視覺更新算繪至使用者介面，以反映互動結果所需的時間，稱為呈現延遲。

在 Chrome 開發人員工具的效能面板中，以視覺化方式呈現算繪工作。算繪工作會在事件回呼之後執行，以便繪製下一個影格。
轉譯工作如 Chrome 效能分析器所示。右側的虛線可視化呈現呈現延遲的長度。

算繪工作通常包含樣式重新計算、版面配置、繪製和合成等工作，並在剖析器的火焰圖中以紫色和綠色區塊表示。互動軌跡中的互動右邊whisker會代表總呈現延遲時間。

在所有可能導致高互動延遲時間的原因中，呈現延遲是最難排解和修正的問題。造成過度轉譯工作的可能原因包括：

  • DOM 大小過大。更新網頁呈現方式所需的算繪工作量，通常會隨著網頁 DOM 的大小而增加。詳情請參閱「DOM 大小對互動性造成的影響，以及您可以採取的行動」。
  • 強制自動重排。當您在 JavaScript 中對元素套用樣式變更，然後立即查詢該工作的結果時，就會發生這種情況。結果是瀏覽器必須先執行版面配置工作，才能執行其他作業，這樣瀏覽器才能傳回更新的樣式。如要進一步瞭解如何避免強制重新流動的相關資訊和訣竅，請參閱「避免大型複雜版面配置和版面配置耗盡資源」。
  • 在 requestAnimationFrame 回呼中執行過多或不必要的工作。requestAnimationFrame() 回呼會在事件迴圈的轉譯階段執行，且必須先完成才能顯示下一個影格。如果您使用 requestAnimationFrame() 執行不涉及使用者介面變更的工作，請注意，下一個影格可能會延遲。
  • ResizeObserver 回呼。這類回呼會在算繪前執行，如果其中的工作耗用大量資源，可能會延遲下一個影格的呈現。與事件回呼一樣，請將下一個影格不需要的邏輯延後。

如果無法重現互動速度緩慢的問題，該怎麼辦？

如果實地資料顯示特定互動速度緩慢，但您無法手動在實驗室重現問題，該怎麼辦？這可能有幾個原因，其中一個重要原因是，測試互動時的環境會受到硬體和網路連線的影響。您可能使用速度快的裝置連上快速的網路，但這不代表使用者也是如此。如果符合上述情況，請嘗試下列任一做法：

  1. 如果您使用實體 Android 裝置，請使用遠端偵錯功能，在主體電腦上開啟 Chrome 開發人員工具執行個體，並嘗試重現緩慢的互動。行動裝置的速度通常不如筆電或電腦，因此在這些裝置上，可能更容易觀察到互動速度緩慢的情況。
  2. 如果沒有實體裝置，請在 Chrome DevTools 中啟用 CPU 節流功能。
  3. 可能是您在「等待」網頁載入後才與其互動，但使用者並未這麼做。如果您使用的是速度較快的網路，請啟用網路節流功能來模擬網路速度較慢的情況，然後在網頁完成繪製後立即與其互動。這是因為主要執行緒在啟動期間通常最繁忙，在該期間進行測試，可能會顯示使用者體驗。

解決 INP 問題是一項重複的過程

找出導致 INP 不良導致互動延遲時間過長的原因，並耗費大量工夫，但如果能排除原因，就剩下一半了。按照方法排解 INP 不良問題，您就能穩定找出造成問題的原因，更快找到適當的修正方法。如要查看評論，請按照下列步驟操作：

  • 仰賴實際現場資料來找出緩慢的互動。
  • 在實驗室中手動測試有問題的欄位互動，看看是否能重現問題。
  • 找出原因，判斷是因為輸入延遲時間過長、事件回呼耗用大量資源，還是轉譯作業耗用大量資源。
  • 樂趣無限循環

其中最後一個是最重要的。與其他改善網頁效能的做法一樣，解決疑難並改善 INP 也是一個循環過程。修正一個互動速度緩慢的問題後，請移至下一個問題，並重複這個步驟，直到開始看到成效為止。