INP 是什么？如何改進(jìn) INP 谷歌優(yōu)化
新聞 2023-12-05編輯：深圳網(wǎng)站建設(shè)閱讀（）標(biāo)簽：
INP
本文簡(jiǎn)紹INP 是什么？如何改進(jìn) INP 谷歌優(yōu)化INP 分?jǐn)?shù)是多少？INP 與 First Input Delay (FID) 有何不同？如果未報(bào)告 INP 值，該怎么辦？
INP 是什么？
INP 是一項(xiàng)指標(biāo)，通過觀察在用戶訪問網(wǎng)頁期間發(fā)生的所有點(diǎn)擊、點(diǎn)按和鍵盤互動(dòng)的延遲時(shí)間，評(píng)估網(wǎng)頁對(duì)用戶互動(dòng)的總體響應(yīng)情況。最終 INP 值是觀察到的最長互動(dòng)，忽略離群值。
關(guān)于 INP 計(jì)算方式的說明
互動(dòng)是指在同一邏輯用戶手勢(shì)期間觸發(fā)的一組事件處理腳本。例如，觸摸屏設(shè)備上的“點(diǎn)按”互動(dòng)包括多個(gè)事件，如 pointerup、pointerdown 和 click。交互可由 JavaScript、CSS、內(nèi)置瀏覽器控件（如表單元素）或以上三者的組合驅(qū)動(dòng)。
互動(dòng)的延遲時(shí)間包括一組促成互動(dòng)的事件處理腳本的最長時(shí)長，即從用戶開始互動(dòng)到下一幀顯示視覺反饋的那一刻。
INP 分?jǐn)?shù)是多少？
在響應(yīng)性指標(biāo)上固定標(biāo)簽（例如“良好”或“欠佳”）非常困難。一方面，您需要鼓勵(lì)優(yōu)先進(jìn)行開發(fā)實(shí)踐，優(yōu)先考慮良好的響應(yīng)能力。另一方面，您必須考慮到一個(gè)事實(shí)，即人們用來設(shè)定切實(shí)可行的開發(fā)期望的設(shè)備在功能上存在很大的差異。
為了確保您提供良好的響應(yīng)速度體驗(yàn)，不妨衡量一下實(shí)際中記錄的網(wǎng)頁加載第 75 個(gè)百分位數(shù)（按移動(dòng)設(shè)備和桌面設(shè)備細(xì)分）：
INP 低于或 200 毫秒表示您的網(wǎng)頁具有良好的響應(yīng)速度。
INP 高于 200 毫秒且低于或等于 500 毫秒表示您的網(wǎng)頁響應(yīng)能力需要改進(jìn)。
INP 高于 500 毫秒表示您的網(wǎng)頁響應(yīng)速度慢。
什么是互動(dòng)？
描繪主線程上的交互的圖表。用戶在阻止任務(wù)運(yùn)行時(shí)輸入內(nèi)容。輸入將一直延遲，直到這些任務(wù)完成，之后指針向上、mouseup 和點(diǎn)擊事件處理程序運(yùn)行，然后開始渲染和繪制工作，直到顯示下一幀。
互動(dòng)的生命周期。在事件處理腳本開始運(yùn)行之前會(huì)發(fā)生輸入延遲，這可能是由主線程上的任務(wù)過長等因素引起的。然后，互動(dòng)的事件處理腳本會(huì)運(yùn)行，并且延遲會(huì)在呈現(xiàn)下一幀之前發(fā)生。
互動(dòng)的主要驅(qū)動(dòng)因素通常是 JavaScript，不過瀏覽器確實(shí)通過并非由 JavaScript 提供支持的控件（例如復(fù)選框、單選按鈕以及由 CSS 提供支持的控件）提供互動(dòng)。
就 INP 而言，系統(tǒng)僅觀察以下互動(dòng)類型：
用鼠標(biāo)點(diǎn)擊。
點(diǎn)按帶有觸摸屏的設(shè)備。
按實(shí)體鍵盤或屏幕鍵盤上的鍵。
互動(dòng)發(fā)生在主文檔或文檔中嵌入的 iframe 中，例如，點(diǎn)擊嵌入的視頻上的播放。最終用戶并不知道 iframe 中包含哪些內(nèi)容。因此，需要在 iframe 中使用 INP 來衡量頂級(jí)網(wǎng)頁的用戶體驗(yàn)。請(qǐng)注意，JavaScript Web API 無權(quán)訪問 iframe 內(nèi)容，因此可能無法在 iframe 中衡量 INP，并且這會(huì)顯示為 CrUX 和 RUM 之間的差異。
互動(dòng)可能由兩部分組成，每部分包含多個(gè)事件。例如，按鍵包含 keydown、keypress 和 keyup 事件。點(diǎn)按互動(dòng)包含 pointerup 和 pointerdown 事件。系統(tǒng)會(huì)選擇互動(dòng)中時(shí)長最長的事件作為互動(dòng)的延遲時(shí)間。
描繪包含兩個(gè)互動(dòng)的更復(fù)雜的互動(dòng)。第一個(gè)是 mousedown 事件，該事件會(huì)在鼠標(biāo)松開按鈕之前生成一幀，這會(huì)啟動(dòng)更多工作，直到結(jié)果呈現(xiàn)另一幀。
描繪與多個(gè)事件處理腳本的互動(dòng)。互動(dòng)的第一部分會(huì)在用戶點(diǎn)擊鼠標(biāo)按鈕時(shí)接收輸入。不過，在用戶松開鼠標(biāo)按鈕之前，系統(tǒng)會(huì)呈現(xiàn)一幀畫面。當(dāng)用戶松開鼠標(biāo)按鈕時(shí)，必須在顯示下一幀之前運(yùn)行另一系列事件處理腳本。
INP 在用戶離開網(wǎng)頁時(shí)計(jì)算，其值將代表網(wǎng)頁在整個(gè)生命周期內(nèi)的總體響應(yīng)情況。INP 較低意味著網(wǎng)頁能夠可靠地響應(yīng)用戶輸入。
INP 與 First Input Delay (FID) 有何不同？
其中 INP 考慮所有頁面互動(dòng)，F(xiàn)irst Input Delay (FID) 僅考慮首次互動(dòng)。此外，它還會(huì)僅測(cè)量首次互動(dòng)的輸入延遲，而不會(huì)測(cè)量運(yùn)行事件處理腳本所需的時(shí)間或呈現(xiàn)下一幀時(shí)的延遲。
鑒于 FID 也是一個(gè)加載響應(yīng)能力指標(biāo)，計(jì)算依據(jù)是，如果在加載階段與網(wǎng)頁進(jìn)行的首次互動(dòng)幾乎沒有可察覺的輸入延遲，那么該網(wǎng)頁就能給用戶留下良好的第一印象。
INP 不僅僅代表第一印象。通過對(duì)所有互動(dòng)進(jìn)行采樣，可以全面評(píng)估響應(yīng)性，使 INP 成為比 FID 更可靠的整體響應(yīng)性指標(biāo)。
如果未報(bào)告 INP 值，該怎么辦？
網(wǎng)頁可能不會(huì)返回 INP 值。造成這種情況的原因有很多：
頁面已加載，但用戶從未點(diǎn)擊、點(diǎn)按或按下鍵盤上的鍵。
該網(wǎng)頁已加載，但用戶使用了與點(diǎn)擊、點(diǎn)按或使用鍵盤類似的手勢(shì)來與該網(wǎng)頁互動(dòng)。例如，滾動(dòng)或?qū)⑹髽?biāo)懸停在元素上不會(huì)影響 INP 的計(jì)算方式。
網(wǎng)頁由搜索抓取工具或無頭瀏覽器等漫游器訪問，但該網(wǎng)頁尚未編寫與網(wǎng)頁互動(dòng)的腳本。
如何衡量 INP
如果您的網(wǎng)站符合列入 Chrome 用戶體驗(yàn)報(bào)告 (CrUX) 的條件，您可以通過 PageSpeed Insights 中的 CrUX（和其他核心網(wǎng)頁指標(biāo)）快速獲取 INP 的字段數(shù)據(jù)。您至少可以獲得網(wǎng)站 INP 的源級(jí)信息，但在某些情況下，您也可以獲取網(wǎng)頁級(jí)數(shù)據(jù)。
然而，雖然 CrUX 可以幫助您大致了解存在某個(gè)問題，但通常無法提供足夠的詳細(xì)信息，無法充分了解問題所在。RUM 解決方案可幫助您深入了解互動(dòng)速度緩慢的網(wǎng)頁、用戶或用戶互動(dòng)的細(xì)節(jié)。將 INP 歸因于各個(gè)互動(dòng)可以避免猜測(cè)和浪費(fèi)精力。
如何改進(jìn) INP
當(dāng)您發(fā)現(xiàn)存在緩慢互動(dòng)的情況，并且可以在實(shí)驗(yàn)室中手動(dòng)重現(xiàn)這類問題后，接下來就要對(duì)其進(jìn)行優(yōu)化?；?dòng)可以分為三個(gè)階段：
輸入延遲，在用戶發(fā)起與網(wǎng)頁的互動(dòng)時(shí)開始，并在互動(dòng)的事件回調(diào)開始運(yùn)行時(shí)結(jié)束。
處理時(shí)間，由事件回調(diào)運(yùn)行完畢所需的時(shí)間組成。
展示延遲，即瀏覽器顯示下一幀（包含互動(dòng)的視覺效果）所需的時(shí)間。
