什么是inp 如何提升，怎么改進inp的交互
本文主要內(nèi)容：了解什么是inp，INP延遲由三個部分組成,INP衡量的用戶操作行為,INP的評分標(biāo)準(zhǔn),如何提升，怎么改進inp的交互，2024 年 3 月即將把inp做為排名算法加進去，下面我們一起來了解一下
本文主要內(nèi)容：了解什么是inp，INP延遲由三個部分組成,INP衡量的用戶操作行為,INP的評分標(biāo)準(zhǔn),如何提升，怎么改進inp的交互，2024 年 3 月即將把inp做為排名算法加進去，下面我們一起來了解一下
本文主要內(nèi)容：了解什么是inp，INP延遲由三個部分組成,INP衡量的用戶操作行為,INP的評分標(biāo)準(zhǔn),如何提升，怎么改進inp的交互，2024 年 3 月即將把inp做為排名算法加進去，下面我們一起來了解一下
Interaction to Next Paint（INP）是一個新的Core Web Vitals指標(biāo)。通過優(yōu)化INP指標(biāo)中的問題，努力為用戶提供更流暢的體驗。這對于嚴(yán)重依賴用戶交互的網(wǎng)站（例如：電子商務(wù)網(wǎng)站、社交媒體平臺和游戲網(wǎng)站）尤其重要。優(yōu)秀的INP網(wǎng)站評分，可帶來更好的用戶體驗、更高的用戶參與度和更高的轉(zhuǎn)化率。
INP (Interaction to Next Paint)：
該指標(biāo)通過觀測網(wǎng)頁為響應(yīng)在用戶訪問網(wǎng)頁期間發(fā)生的所有點擊、點按和鍵盤互動而花費的時間，評估網(wǎng)頁對用戶互動的總體響應(yīng)情況。最終 INP 值是觀測到的最長互動時間，離群值會被忽略。
輸入延遲：后臺正在進行的任何阻止事件處理程序運行的任務(wù)
處理時間：執(zhí)行相關(guān)事件處理程序代碼所需的時間
呈現(xiàn)延遲：進程完成和瀏覽器渲染下一幀之間的時間
點擊鼠標(biāo)。
點擊帶有觸摸屏的設(shè)備。
按物理鍵盤或屏幕鍵盤上的鍵。
良好：低于200毫秒
需要改進：200 - 500毫秒
較差：500毫秒以上
谷歌官方公告
2024 年 3 月即將把inp做為排名算法加進去
瀏覽器的主線程是瀏覽器進程中的一個關(guān)鍵部分。主線程負責(zé)下載資源、繪制頁面和處理用戶輸入。
如果主線程正忙于執(zhí)行大型任務(wù)，則它無法執(zhí)行其他任何操作，包括對訪問者的輸入做出反應(yīng)。這樣會對INP產(chǎn)生影響，可以在以下方面進行優(yōu)化：
① 分割大型任務(wù)：
當(dāng)超過50毫秒才能完成的任務(wù)應(yīng)該使用Webpack、 ESBuild、 Rollup或Parcel等工具進行分割 。這樣，主線程的可用性就會有更多的中斷，可以處理用戶輸入。
② 避免抖動：
通常指的是頁面加載和交互過程中出現(xiàn)的不流暢、抖動或閃爍等問題，這可能會影響用戶的體驗。優(yōu)化頁面布局和樣式和JavaScript腳本。
③ 延遲加載非關(guān)鍵任務(wù)：
延遲加載指定的文件，直到主線程空閑。為了獲得最佳結(jié)果，僅延遲加載非關(guān)鍵且位于首屏以下的文件，這樣對于訪問者來說不會有明顯的差異。
④ 減少JavaScript和第三方腳本：
INP的最大障礙之一是瀏覽器需要加載的內(nèi)容太多。主線程要做的事情越多，保持快速交互就越困難。通過刪除或優(yōu)化JavaScript和第三方腳本來提高你的INP。
5.2 減少用戶輸入延遲
最大限度地減少主線程上可能延遲瀏覽器響應(yīng)用戶輸入的長任務(wù)。
刪除未使用的代碼，或推遲非必要的代碼。
最大限度地減少網(wǎng)站上插件的使用，以減少頁面加載期間不必要的加載。
5.3 優(yōu)化處理時間
最小化 CSS 動畫。
避免使用第三方字體。
向用戶顯示正在加載或正在進行的元素，讓用戶知道處理正在進行。
5.4 最小化呈現(xiàn)延遲
優(yōu)化您的網(wǎng)頁，并減小DOM大小。DOM或文檔對象模型是一種樹狀結(jié)構(gòu)，是網(wǎng)頁上所有元素的層次結(jié)構(gòu)。
更大的DOM意味著更多的渲染工作和更長的處理時間。DOM越精簡，瀏覽器處理和渲染它們的速度就越快。
?
版權(quán)所有：重慶安菲科技有限公司
友情鏈接:
