什么是inp 如何提升，怎么改進(jìn)inp的交互

新聞 2024-01-14編輯：深圳網(wǎng)站建設(shè)閱讀（）標(biāo)簽： inp 谷歌優(yōu)化 google

• 什么是inp
• INP延遲由三個(gè)部分組成
• INP衡量的用戶(hù)操作行為
• INP的評(píng)分標(biāo)準(zhǔn)
• 如何提升，怎么改進(jìn)inp的交互

本文主要內(nèi)容：了解什么是inp，INP延遲由三個(gè)部分組成,INP衡量的用戶(hù)操作行為,INP的評(píng)分標(biāo)準(zhǔn),如何提升，怎么改進(jìn)inp的交互，2024 年 3 月即將把inp做為排名算法加進(jìn)去，下面我們一起來(lái)了解一下

Interaction to Next Paint（INP）是一個(gè)新的Core Web Vitals指標(biāo)。通過(guò)優(yōu)化INP指標(biāo)中的問(wèn)題，努力為用戶(hù)提供更流暢的體驗(yàn)。這對(duì)于嚴(yán)重依賴(lài)用戶(hù)交互的網(wǎng)站（例如：電子商務(wù)網(wǎng)站、社交媒體平臺(tái)和游戲網(wǎng)站）尤其重要。優(yōu)秀的INP網(wǎng)站評(píng)分，可帶來(lái)更好的用戶(hù)體驗(yàn)、更高的用戶(hù)參與度和更高的轉(zhuǎn)化率。

什么是inp

INP (Interaction to Next Paint)：
該指標(biāo)通過(guò)觀(guān)測(cè)網(wǎng)頁(yè)為響應(yīng)在用戶(hù)訪(fǎng)問(wèn)網(wǎng)頁(yè)期間發(fā)生的所有點(diǎn)擊、點(diǎn)按和鍵盤(pán)互動(dòng)而花費(fèi)的時(shí)間，評(píng)估網(wǎng)頁(yè)對(duì)用戶(hù)互動(dòng)的總體響應(yīng)情況。最終 INP 值是觀(guān)測(cè)到的最長(zhǎng)互動(dòng)時(shí)間，離群值會(huì)被忽略。

INP延遲由三個(gè)部分組成

輸入延遲：后臺(tái)正在進(jìn)行的任何阻止事件處理程序運(yùn)行的任務(wù)
處理時(shí)間：執(zhí)行相關(guān)事件處理程序代碼所需的時(shí)間
呈現(xiàn)延遲：進(jìn)程完成和瀏覽器渲染下一幀之間的時(shí)間

INP衡量的用戶(hù)操作行為

點(diǎn)擊鼠標(biāo)。
點(diǎn)擊帶有觸摸屏的設(shè)備。
按物理鍵盤(pán)或屏幕鍵盤(pán)上的鍵。

INP的評(píng)分標(biāo)準(zhǔn)

良好：低于200毫秒
需要改進(jìn)：200 - 500毫秒
較差：500毫秒以上

谷歌官方公告
2024 年 3 月即將把inp做為排名算法加進(jìn)去

如何提升，怎么改進(jìn)inp的交互

瀏覽器的主線(xiàn)程是瀏覽器進(jìn)程中的一個(gè)關(guān)鍵部分。主線(xiàn)程負(fù)責(zé)下載資源、繪制頁(yè)面和處理用戶(hù)輸入。

如果主線(xiàn)程正忙于執(zhí)行大型任務(wù)，則它無(wú)法執(zhí)行其他任何操作，包括對(duì)訪(fǎng)問(wèn)者的輸入做出反應(yīng)。這樣會(huì)對(duì)INP產(chǎn)生影響，可以在以下方面進(jìn)行優(yōu)化：

① 分割大型任務(wù)：

當(dāng)超過(guò)50毫秒才能完成的任務(wù)應(yīng)該使用Webpack、 ESBuild、 Rollup或Parcel等工具進(jìn)行分割 。這樣，主線(xiàn)程的可用性就會(huì)有更多的中斷，可以處理用戶(hù)輸入。

② 避免抖動(dòng)：

通常指的是頁(yè)面加載和交互過(guò)程中出現(xiàn)的不流暢、抖動(dòng)或閃爍等問(wèn)題，這可能會(huì)影響用戶(hù)的體驗(yàn)。優(yōu)化頁(yè)面布局和樣式和JavaScript腳本。

③ 延遲加載非關(guān)鍵任務(wù)：

延遲加載指定的文件，直到主線(xiàn)程空閑。為了獲得最佳結(jié)果，僅延遲加載非關(guān)鍵且位于首屏以下的文件，這樣對(duì)于訪(fǎng)問(wèn)者來(lái)說(shuō)不會(huì)有明顯的差異。

④ 減少JavaScript和第三方腳本：

INP的最大障礙之一是瀏覽器需要加載的內(nèi)容太多。主線(xiàn)程要做的事情越多，保持快速交互就越困難。通過(guò)刪除或優(yōu)化JavaScript和第三方腳本來(lái)提高你的INP。

5.2 減少用戶(hù)輸入延遲
最大限度地減少主線(xiàn)程上可能延遲瀏覽器響應(yīng)用戶(hù)輸入的長(zhǎng)任務(wù)。
刪除未使用的代碼，或推遲非必要的代碼。
最大限度地減少網(wǎng)站上插件的使用，以減少頁(yè)面加載期間不必要的加載。
5.3 優(yōu)化處理時(shí)間
最小化 CSS 動(dòng)畫(huà)。
避免使用第三方字體。
向用戶(hù)顯示正在加載或正在進(jìn)行的元素，讓用戶(hù)知道處理正在進(jìn)行。
5.4 最小化呈現(xiàn)延遲
優(yōu)化您的網(wǎng)頁(yè)，并減小DOM大小。DOM或文檔對(duì)象模型是一種樹(shù)狀結(jié)構(gòu)，是網(wǎng)頁(yè)上所有元素的層次結(jié)構(gòu)。
更大的DOM意味著更多的渲染工作和更長(zhǎng)的處理時(shí)間。DOM越精簡(jiǎn)，瀏覽器處理和渲染它們的速度就越快。

?

• 上一章：圖像標(biāo)簽img中屬性alt添加與不添加有什...
• 下一章：企業(yè)門(mén)戶(hù)網(wǎng)站建設(shè)：打造您的在線(xiàn)業(yè)務(wù)門(mén)...