瞭解如何將現場資料導入研究室，透過手動測試找出互動速度緩慢的原因，並找出導致互動速度緩慢的原因。
想要找出導致 INP 不佳的原因，最佳化與下一個顯示的內容互動 (INP) 的困難部分是一大挑戰。可能的原因很多，例如第三方指令碼會在主執行緒上排定大量工作、大型 DOM 大小、成本高昂的事件回呼，以及其他問題。
改善 INP 並不容易。首先，您必須知道哪些互動通常會負責網頁的 INP。如果不確定使用者在網站上有哪些互動行為最慢，請參閱「找出實際發生互動速度緩慢的互動」一文。取得實際操作數據後，您就可以在研究室工具中手動測試這些特定互動，找出互動速度緩慢的原因。
如果沒有欄位資料，該怎麼辦？
有現場資料是十分重要的關鍵，因為這能為您省下大量時間，協助他們找出需要最佳化的互動。然而，您可能沒有欄位資料可用。如果符合您的情況，您還是有可能找出互動方式有所改善，但需要多一點心力並採取不同做法。
總封鎖時間 (TBT) 是一項研究室指標，可評估網頁在載入期間的回應速度，這項工具與 INP 具有良好的關聯性。如果您的網頁有很高的差距，這可能表示網頁在載入時，對使用者互動並沒有那麼高的反應。
如要判斷網頁的 TBT，您可以使用 Lighthouse。如果網頁的 TBT 偏高，可能導致主執行緒在網頁載入期間過於忙碌，而可能影響網頁在網頁生命週期中這段非常時期的回應速度。
如要找出網頁載入後緩慢的互動，您可能需要其他類型的資料，例如您可能已在網站分析中找出的常見使用者流程。舉例來說，如果您經營電子商務網站，常見的使用者流程是指使用者在將商品加入線上購物車並結帳後所採取的動作。
無論您是否有現場資料，下一步都是手動測試並重現緩慢的互動，因為只有在您能重現緩慢的互動情形時，才能加以修正。
在研究室中重現緩慢互動
許多方式都可以透過手動測試在研究室中重現緩慢的互動，但您可以嘗試以下架構。
錄製追蹤記錄
建議您使用 Chrome 的效能分析器來診斷及排解互動速度緩慢的問題。如要在 Chrome 的效能分析器中剖析互動行為，請按照下列步驟操作：
- 開啟您要測試的網頁。
- 開啟 Chrome 開發人員工具，前往「Performance」面板。
- 按一下面板左上方的「Record」按鈕，即可開始追蹤。
- 執行您要疑難排解的互動。
- 再次按一下「Record」按鈕，即可停止追蹤。
分析器填入資料後，第一個要查看的地點應為分析器頂端的活動摘要。活動摘要會在記錄頂端顯示長時間工作的紅色長條。可讓您快速放大有問題的區域。
您可以在活動摘要中拖曳並選取範圍，快速找出有問題的區域。您可以選擇使用分析器中的導覽標記功能，協助縮小時間軸範圍並忽略不相關的活動。
將焦點放在互動發生的位置後，「互動」追蹤可協助您將互動情形與下方主執行緒追蹤中發生的活動排入：
將遊標懸停在互動追蹤的疊代上，即可進一步瞭解互動時間最長的部分：
互動的條紋部分代表互動時間超過 200 毫秒，達到「良好」的上限計算網頁 INP 的門檻上述互動的部分包括：
下一步就是深入瞭解導致互動速度緩慢的問題，本指南稍後會說明。
Web Vitals Chrome 擴充功能
建議您使用效能分析器來診斷已知緩慢的互動，但如果您不知道哪些互動是問題所在，可能需要一段時間才能找出緩慢的互動。你可以考慮使用網站體驗指標 Chrome 擴充功能。此額外資訊可用來在移至效能分析器之前，先快速嘗試各種互動，以找出有問題的互動。
安裝完成後，Web Vitals 擴充功能就會在開發人員工具控制台中顯示互動資料，請按照下列步驟操作：
- 在 Chrome 中，按一下網址列右側的擴充功能圖示。
- 在下拉式選單中選擇「Web Vitals」擴充功能。
- 按一下右側的圖示，開啟擴充功能的設定。
- 按一下「選項」。
- 在顯示畫面中啟用「Console Logging」核取方塊，然後按一下「Save」。
執行下列步驟後，請在 Chrome 開發人員工具中開啟控制台，並開始測試網頁上可疑的互動行為。當你進行互動時，診斷資料會顯示在控制台中：
雖然 Web Vitals 擴充功能可協助辨識緩慢的互動，並提供詳細資料來協助你對 INP 進行偵錯，但你可能仍須使用效能分析器來診斷緩慢互動，因為這項功能會提供詳細資料，方便你瀏覽網站正式版程式碼，找出互動速度緩慢的原因。
如何找出哪些部分的互動速度緩慢
互動情形由三個部分組成：輸入延遲、處理時間長度和呈現延遲。取決於哪個部分最耗時，決定如何針對互動進行最佳化，從而降低網頁的 INP。
如何找出輸入過長的延遲時間
輸入延遲可能會導致互動延遲。輸入延遲是互動的第一部分。從作業系統首次收到使用者動作到瀏覽器可開始處理互動的第一個事件處理常式回呼的期間。
您可以從互動軌中尋找互動，找出 Chrome 效能分析器中的輸入延遲。左側搖動器的長度代表互動的輸入延遲時間部分，只要將遊標懸停在效能分析器中的互動上，即可在工具提示中查看精確值。
輸入延遲時間一律不能為 0，但你可以控制輸入延遲時間的「時間長度」。關鍵在於確認主執行緒上是否有執行中的工作，導致您的回呼無法立即執行。
在上圖中，第三方指令碼的工作會在使用者嘗試與網頁互動時執行，因此會延長輸入延遲時間。延長的輸入延遲時間會影響互動的延遲時間，進而影響網頁的 INP。
如何找出處理時間過長
事件回呼會在輸入延遲後立即執行，完成所需時間稱為「處理時間」。如果事件回呼執行時間過長，會延遲瀏覽器顯示下一個影格，導致互動的總延遲時間大幅增加。處理時間較長，可能是因為第一方或第三方 JavaScript 的運算成本高昂，而且在某些情況下，兩者都會產生相當高昂的費用。在成效分析器中，這會以互動追蹤中互動的純部分表示。
可在追蹤記錄中觀察特定互動的下列項目，以找出耗用大量資源的事件回呼：
- 判斷與事件回呼相關聯的工作是否為長時間工作。如要更穩定地顯示研究室設定中較長的工作，您可能需要在效能面板中啟用 CPU 節流功能，或使用低至中階的 Android 裝置，並使用遠端偵錯功能。
- 如果執行事件回呼的工作是相當長時間的工作，請在呼叫堆疊中尋找事件處理常式項目，例如具有「Event: click」等名稱的項目，項目右上角有紅色三角形。
您可以嘗試下列其中一種策略來縮短互動的處理時間：
- 盡可能減少工作。在昂貴的事件回呼中發生的所有事情是否有必要？如果不適合，請考慮完全移除該程式碼，或將執行作業延後至較晚的時間點 (如果無法執行的話)。您也可以利用架構功能來取得協助。舉例來說，React 的傳訊功能可在元件的道具沒有變更時，略過不必要的轉譯工作。
- 將事件回呼中的非轉譯工作延後至較晚的時間點。長時間工作可綁定至主執行緒，藉此細分。每當您產生主執行緒時，就是結束目前工作的執行作業，並將其餘的工作分解成獨立任務。這可讓轉譯器處理先前在事件回呼中執行的使用者介面更新。如果你剛好使用 React，可以使用其轉換功能完成這項操作。
這些策略應該可以協助您最佳化事件回呼，進而縮短執行時間。
如何找出簡報延遲
輸入延遲和處理時間過長並非 INP 不佳的唯一原因。有時候，即使只收到少量的事件回呼程式碼，所發生的轉譯更新也可能會非常高昂。瀏覽器將視覺化更新內容轉譯至使用者介面，反映互動結果所需的時間，稱為「顯示延遲」。
轉譯工作最常包含樣式重新計算、版面配置、繪製和複合等工作，在分析器火焰圖中以紫色和綠色區塊表示。總呈現延遲則以互動追蹤中互動的合適表情表示。
在互動延遲偏高的可能原因中，顯示延遲最容易進行疑難排解及修正。造成轉譯工作量過多的可能原因如下：
- 大型 DOM 大小：更新網頁呈現方式所需的轉譯工作，通常會隨著網頁的 DOM 大小而增加。詳情請參閱大型 DOM 大小對互動性的影響和因應方式。
- 強制自動重排。當您在 JavaScript 中將樣式變更套用至元素，然後立即查詢該工作的結果時，就會發生這種情況。結果是瀏覽器必須先執行版面配置才行事，瀏覽器才能傳回更新後的樣式。如需詳細資訊和提示，瞭解如何避免強制自動重排，請參閱「避免複雜的大型版面配置和版面配置輾轉現象」。
requestAnimationFrame回呼出現過多或不必要的工作。requestAnimationFrame()回呼會在事件迴圈的轉譯階段執行，且必須先完成才能顯示下一個影格。如果您使用requestAnimationFrame()執行不涉及使用者介面變更的工作，請注意，下一個影格可能會延遲。ResizeObserver回呼。這類回呼會在算繪之前執行，如果其中的工作費用高昂，可能會延遲顯示下一個影格。與事件回呼一樣，請將下一個影格不需要的邏輯延後。
如果您無法重現緩慢的互動，該怎麼辦？
如果欄位資料顯示特定互動速度緩慢，但無法手動重現問題，該怎麼辦？可能的原因有幾個。
舉例來說，測試互動情形時，取決於您的硬體和網路連線。即使您的網路連線速度很快，但這並不意味您的使用者，如果您遇到這種情況，請嘗試以下其中一種做法：
- 如果您使用實體 Android 裝置，請使用遠端偵錯功能，在主體電腦上開啟 Chrome 開發人員工具執行個體，並嘗試重現緩慢的互動。行動裝置的速度通常不如筆電或桌機，因此這類裝置可以較容易發現緩慢互動情形。
- 如果沒有實體裝置，請在 Chrome 開發人員工具中啟用 CPU 節流功能。
另一個原因是，您正在等待頁面在與網頁互動「之前」載入，但使用者未進行互動。如果網路速度較快，請啟用網路節流功能來模擬較慢的網路狀況，並在網頁顯示後立即互動。建議您這麼做，因為主要執行緒在啟動期間通常最忙碌，而在這段期間的測試或許能顯示使用者遇到的問題。
INP 疑難排解是一項疊代程序
找出導致 INP 不良導致互動延遲時間過長的原因，並耗費大量工夫，但如果能排除原因，就剩下一半了。按照方法排解 INP 不良問題，您就能穩定找出造成問題的原因，更快找到適當的修正方法。審查方法如下：
- 仰賴實際現場資料來找出緩慢的互動。
- 在研究室中手動測試有問題的欄位互動，確認這些互動是否可重現。
- 判斷原因是由於輸入延遲較長、事件回呼耗用較多資源，還是造成轉譯工作費用高昂。
- 樂趣無限循環
最後才是最重要的。正如您為提升網頁效能所做的多數工作，疑難排解及改善 INP 是週期性程序。修正單一互動速度緩慢的問題後，再進行下一個動作，並且重複相同步驟，直到呈現結果為止。