200 毫秒聽起來快嗎? 與 Next Paint 的交互有助於提高您網站的響應能力

已發表: 2022-07-17
200 Milliseconds Sound Fast? Interaction To Next Paint Can Help Boost the Responsiveness Of Your Website

梅大吼一聲出去了。 什麼月份。 Google 核心更新、兩個新的 Web Vitals 用戶指標WordPress 6.0!

5 月 25 日,谷歌宣布開始其基礎廣泛的核心更新。 2022 年 5 月的核心更新預計將持續兩週。 人們在搜索結果頁面上報告了變化。 您是否注意到您的 SERP 有任何變化?

WordPress 6.0 是 2022 年的第二個主要 WordPress 版本,也已推出。 WordPress 5.9 於 2022 年 1 月發布,為塊編輯器引入了全站點編輯 (FSE)。 使用 WordPress 6.0。 重點再次放在塊編輯器功能的擴展和改進上。 您客戶的所有網站都更新到 WordPress 6.0 了嗎?

到處更新! 發生了什麼對我的網站很重要?

谷歌在 5 月的重大舉措是在其 Web Vitals 指標中增加了首字節時間(TTFB) 和下一次繪畫交互(INP)。 添加新指標是 Google 的說法,“將注意力集中在重要的事情上”。

您現在可以衡量響應能力。 你可以看到那些沙粒在哪裡減慢了齒輪的速度。 這對您和您的客戶網站組合非常有用。  

這就是為什麼特斯拉比汽油動力汽車更快的原因。 在內燃機中,通過與其他部件連接的所有部件和摩擦,您會失去速度。 更少的運動部件意味著能量流向車輪。

Core Web Vitals 正在成長! pagespeed.web.dev 剛剛升級,RUM 比率現在包括與下一次繪製的交互 (INP) 和第一個字節的時間 (TTFB)。 如果你問我,這兩個都是很棒的選擇! 在我看來,INP 是一種比第一個輸入延遲更好的方法來衡量響應性,它可以很容易地被操縱。 第一個字節的時間應該總是更重要,因為它先於任何性能指標。 沒有回應=沒有油漆,沒有互動等!。

阿爾杰·卡雷爾

什麼是與 Next Paint (INP) 的交互,為什麼它很重要?

除了 Google Core Web Vitals,Google 還在測量越來越多的以用戶為中心的響應指標,包括與下一次繪製的交互 (INP) 和第一個字節的時間 (TTFB)。 然而,在你重組你的團隊之前,谷歌說:

這些字段指標目前是實驗性的,但現在可供用戶試用。 實驗指標可能會改變或消失。

谷歌網站

與下一次繪製的交互(INP) 是一項新指標,旨在通過在用戶訪問頁面時選擇最長的單個交互之一來表示頁面的整體交互延遲。 對於具有許多交互的頁面,INP 通常是交互延遲的第 98 個百分位。 對於少於 50 次交互的頁面,INP 是延遲最差的交互。

有許多 UI 元素。 KeyDown 在按下某個鍵時發生。 KeyUp 在釋放鍵時發生。 有 DragOver、Drop、OnFocus 等等。 每個交互都經過估算、處理,並將結果呈現給用戶。

每個動作之間的時間是可測量的,點擊和接收之間的時間間隔過長會增加糟糕的用戶體驗

與 Next Paint 的交互 (INP) 測量我們網站交互的延遲。 這些交互的一些示例包括:

  • 鼠標事件——例如單擊按鈕以更改服裝物品的顏色。
  • 用手指在觸摸屏上激活的交互元素——也許是在地圖上。
  • 在移動設備或桌面設備上按一個鍵——顯示問題的答案。

您的網站是否有很多互動? 您正在運行電子商務或電子學習平台嗎? 既然你知道用戶不想等待鼠標事件 INP 是非常令人興奮的。

您現在可以看到哪些交互讓您放慢了速度,或許還可以看到由於響應時間緩慢而導致您失去轉化的地方。

您的電子商務網站由於延遲、性能不佳以及坦率地說,其技術對於當今客戶的期望已經過時的託管 WordPress 主機而損失了多少錢?

火箭網

如何衡量 Google 與 Next Paint 指標的互動?

要衡量 Google 與 Next Paint 的互動,請前往 PageSpeed Insights 衡量頁面的 INP。 記住。 您正在衡量該頁面 - 而不是您的整個網站。

INP 類似於 Cumulative Layout Shift (CLS),因為測量值會隨著用戶停留在您的網頁上而改變。 一旦用戶離開頁面,就會進行測量,從而創建一個整體 INP 值。 有些頁面會比其他頁面有更多的交互。 如果未選擇操作,某些頁面的交互可能不會發生。

僅僅因為您現在通過了生命體徵並不意味著您將在下個月通過。 核心網絡生命力是實驗性的和變化的。 定期檢查並保持好奇!

響應式網站不僅僅意味著 CSS 中的靈活塊

測量與 Next Paint 的交互非常令人興奮,因為我們現在可以測量我們的網站在用戶手指下的響應程度。 還記得響應式網站意味著我們的菜單折疊成漢堡包嗎?

重要的不僅僅是移動設備。 桌面視圖同樣重要——尤其是當我們談論那些人們花時間瀏覽的網站時。

與 Next Paint 的交互意味著測量頁面上的元素響應交互所需的時間。 現在我們可以看到如果用戶選擇另一種顏色,產品圖像需要多長時間才能改變,或者答案需要多長時間才能出現在屏幕上。 這裡的速度對於許多用戶來說可能是一個淘汰賽。 記住——速度勝出。

縮短每個交互階段之間的延遲使網站真正響應。 解決了速度問題後,您可以專注於真正重要的地方——改善您的代理客戶的日常業務體驗。

速度在網站上非常重要,因為您想吸引和留住潛在客戶。 你想讓他們告訴他們的朋友。 使人們無法留在您的網站並進行轉換的原因是糟糕的網站體驗。

火箭網

微交互是一個好的網站和一個偉大的網站之間的區別

節省交互延遲。 擺脫互動,你說?

微交互是讓我們的用戶感覺能夠做某事的小東西。 這是一種不再是一個微不足道的、僵化的參與者的感覺,而是能夠毫不費力地移動、說話或改變某事。 用戶玩得很開心,事情沒有變得複雜。 遊戲化,對吧?

微交互對我們的在線體驗產生了重大影響,所以不要為了節省清洗浴缸的時間而把嬰兒和洗澡水一起扔掉。

越來越多的品牌正在尋求與客戶建立聯繫。 雖然溝通渠道受到了很多關注,但利用可以為客戶提供積極用戶體驗的微時刻同樣重要。

可用性Geek.com

談話很便宜。 讓 Rocket 向您展示最快的 WordPress 託管的真正含義!

節省網站性能、您的代理機構的時間和金錢? 是的。 Rocket 平台具有內置功能,可消除您對其他付費版本的安全性、圖像優化、CDN 和 JS 內容加載器插件的需求。 它們是您最喜歡的新平台(以前稱為託管 WordPress 託管的產品)中內置的功能。

讓我們談談我們如何將您的網站遷移到 Rocket.net,這是世界上最快的 WordPress 託管服務。 今天開始你的使命!