免費參與·100+跨境活動 
免費下載·4000+跨境資料 
免費學習·2000+直播課程 
免費加入·15萬+賣家交流群 
2024-03-11 17:54
Interaction to Next Paint (INP) 是一個Core Web Vital核心網頁關鍵指標，通俗講是用戶點擊一個頁面交互效果需要的時間。通過觀察用戶在頁面生命周期內與頁面互動的延遲，評估頁面對用戶交互的整體響應性。INP值是觀察到的交互時間。比如常用的faqs一般是折疊的，點擊標題會展開顯示更多內容，從點擊標題到完全顯示內容這個時間即INP值。
圖片來源：Bootstrap
為了提供良好的用戶體驗，網站的 Interaction to Next Paint 應盡可能不超過 200 毫秒。
· INP 等于或小于 200 毫秒表示您的網頁具有良好的響應速度。
· 如果 INP 介于 200 毫秒到 500 毫秒之間，則意味著您網頁的響應能力需要改進。
· INP 大于 500 毫秒表示網頁響應速度慢。
根據網站的不同，互動可能很少，或者沒有互動，例如以文字和圖片為主的網頁，互動元素少，or完全沒有?；蛘?，對于文本編輯器或游戲等網站，可能會發生數百次or數千次互動。無論是哪種情況，如果 INP 較高，用戶體驗就會面臨風險。
INP為何取代 First Input Delay (FID)
FID 衡量的是從用戶首·次與網頁互動（即，點擊鏈接、點按按鈕或使用由 JavaScript 提供支持的自定義控件）到瀏覽器實際能夠開始處理事件處理腳本以響應相應互動的時間。
當 INP 考慮所有頁面互動時，FID 僅考慮首·次互動。此外，它還會僅測量首·次互動的輸入延遲，而不會測量運行事件處理腳本所花費的時間或呈現下一幀的延遲。由于 FID 也是一個加載響應能力指標，因此我們可以使用它，根據輸入延遲來確定網頁對用戶的第·一印象。INP 會衡量整個頁面生命周期內所有互動的所有部分，使其成為比 FID 更可靠的整體響應能力指標。
如何優化INP？
1、減少不必要的交互。
有些朋友喜歡為網站添加高大上的交互，殊不知這些交互會延長了網頁加載速度，有的可能好幾秒才顯示完，這種用戶體驗就不友好了。建站初期先溝通需求，權衡了功能利弊，再決定是否要做，怎么做更好。2、代碼精簡
有些交互可能是調用jQuery插件，還需要寫一部分代碼來實現，如果這些代碼冗余了，會減低性能?，F在有些前端框架不調用jQuery了，比如Bootstrap 5，很多效果添加一個class就能實現，省去了寫JavaScript代碼的步驟。這些開源框架使用的人多，他們也會根據PR來改進issues，不斷完善產品。3、監測加載進程
提升INP是一個長期的過程，需要對不同的進程進行監測改進，用瀏覽器開發模式或第三方工具可以查看慢的進程，哪里慢了改哪里
4、使用CDN
CDN（內容分發網絡）通過在不同地理位置部署緩存服務器，將內容提前存儲在這些服務器上，當用戶請求訪問網站時，可以更快地從最近的服務器獲取所需內容，從而減少網絡傳輸時間，提高訪問速度和響應時間。通過優化內容的加載速度和減少延遲，CDN能夠提供更流暢、更快速的用戶體驗。
（來源：ytkah）
以上內容屬作者個人觀點，不代表雨果跨境立場！本文經原作者授權轉載，轉載需經原作者授權同意。?
