使用者體驗指標介紹 | 前端效能優化

阿榮
發佈於前端
閱讀時間約 5 分鐘
【shout out to 莫力全✨今晚,我想來點 Web 前端效能優化大補帖! 】
阿榮重點整理 & 重述 & 一點點自己的補充

Core Web Vitals

這篇介紹 Google Lighthouse (同 PageSpeed) 使用者體驗的三個核心指標 Core Web Vitals:LCP、INP、CLS。原本的 FID 已被 INP 取代,FID 只支援到 2024 年 9 月。

  • LCP (Largest Contentful Paint) 最大內容繪製
  • INP (Interaction to Next Paint) 與下一個顯示的內容互動
  • CLS (Cumulative Layout Shift) 累計版面配置轉移
Google 指出若 75% 以上的使用者在網站中的瀏覽體驗都能夠通過以上 3 種指標,就能夠大幅的提升使用者的搜尋體驗,甚至能夠讓原本因等待而離開的使用者減少 24%!


LCP (Largest Contentful Paint) 最大內容繪製

LCP 會計算網頁可視區 (viewport) 中最大元素的繪製所需時間,也就是頁面的最大元素被使用者看到所花費的時間,是速度的指標。最大元素會隨著頁面載入跟著變化,可能本來是標題,後來又變成圖片。

如何優化 LCP

因為她是計算最大元素的繪製所需時間,那解決方法當然就是盡可能加快最大化元素 candidates 的載入速度囉,有以下這 4 點做為改善大方向 (細部建議可參考原文)。

  1. 減少伺服器回應時間
  2. 盡量避免 Blocking Time
  3. 加快資源載入的時間
  4. 避免使用客戶端渲染 (CSR)


INP (Interaction to Next Paint) 與下一個顯示的內容互動

INP 用來觀察網頁載入後,使用者與網頁的互動時間。所有的點擊與按鍵行為都會觸發網頁的互動,效能工具會將所有行為中「最長的互動時間」計算為 INP,而前核心指標 FID 只計算使用者在頁面「首次」的互動時間,因此 INP 更能客觀的評估網站是否過度延遲。

優化方式跟 FID 雷同,有以下 4 個方向可以實行:

  1. 拆解執行過久的 JavaScript
  2. 優化頁面的 JavaScript 載入流程
  3. 使用 Web Worker 技術
  4. 減少 JavaScript 的執行時間

另外官方也建議,某些互動所需時間會比其他互動更久,但對於互動特別複雜的互動而言,建議您快速呈現一些初始視覺回饋,用來告訴使用者正在發生某些事情。想到之前使用某些網站,他們會顯示灰色粗略的頁面 Layout,加上一點動畫,讓你知道內容正在跑,我想就是應用這樣的概念。


CLS (Cumulative Layout Shift) 累計版面配置位移

這個指標是評估視覺化穩定性的重要指標,因為它可以量化使用者遇到版面配置不如預期變更的頻率。

非預期的版面配置變化可能的情況有:當文字突然移動時,就造成使用者點選錯誤的連結或按鈕,或是會動態調整大小的第三方廣告等等。


RAIL Model

Google 提出的效能指標,是一個「以使用者為中心」的模式。

RAIL 分別代表 Web App Life Cycle 裡的四個指標:

  • R : Response
  • A : Animation
  • I : Idle
  • L : Load


Response 回應 : 在 50 毫秒內處理事件

研究指出人類從操作行為到感知反應有 100 毫秒的間隔,但瀏覽器還有其他工作要做,又佔用一半時間,所以回應 (Response) 建議在 50 毫秒內。


Animation 動畫:在 10 毫秒內產生影格

就技術層面而言,每個影格的最大預算為 16 毫秒 (每秒 1000 毫秒 / 每秒 60 個影格),但瀏覽器需要約 6 毫秒才能轉譯每個影格,因此每影格約 10 毫秒。


Idle 閒置:最大化閒置時間

目標是將閒置時間最大化,「使用者的輸入事件在 50ms 以內就獲得回應」的可能性就會提升。

  • 使用閒置時間完成延後工作。舉例來說,在初始頁面載入時,請盡量減少資料載入,然後使用閒置時間載入其餘網頁。
  • 在 50 毫秒以內的閒置時間執行工作。如果時間超過,可能會干擾應用程式在 50 毫秒內回應使用者輸入內容的能力。
  • 如果使用者在閒置時間的工作期間與頁面互動,使用者互動一律最優先,並中斷閒置時間工作。


Load 載入:提供內容並在 5 秒內成為互動體驗

網頁載入不能慢!!! 網頁載入緩慢時,使用者注意力會逐漸減少,使用者會將工作視為毀損。可快速載入的網站平均工作階段較長、跳出率較低,以及更高的廣告可視度

即使是在網速慢且中低規格裝置上使用網頁,首次載入的理想速度為 5 秒內進行互動,後續載入時,理想的目標是在 2 秒內載入網頁。

總之,網頁載入要快!!!


資料來源

主要放程式學習筆記,分享 Creative Coding 相關內容、作品
留言0
查看全部
發表第一個留言支持創作者!
你可能也想看
【使用者體驗方法學┃UX工具與分析】如何將自陳式量化問卷調查應用於大樣本的UX使用性測試分析?一場千人的AR智慧眼鏡技術體驗活動,糊里糊塗地設計並回收了民眾體驗完的回饋資料,結果事後面臨不知道該如何分析的窘境。筆者受託協助給予專業分析建議,恰好趁此機會,把過程中分析思考脈絡與可能用到的統計分析方法整理記錄下來,可供有需要的人參考,也避免重蹈覆轍。
Thumbnail
avatar
UX.Debugger 體驗設計除錯計畫
2023-11-04
使用者體驗(UX)衡量框架 - HEARTHEART 是一種用於衡量產品用戶體驗的框架,源自於由 Google 。這個名稱是取自五個衡量標準的首字母所構成。
Thumbnail
avatar
收收UIUX
2023-05-18
速成 LINE 聊天機器人:優化使用者體驗 讓冷冰冰的系統扮演防疫重責大任2022 年 5 月,陽明交大防疫志工團使用 LINE 官方帳號製作出防疫資訊聊天機器人,希望透過本篇文章帶大家一步一步理解整個系統的建置與思考模式,也歡迎提供多元的想法!
Thumbnail
avatar
何家慈 Chia Tzu Ho
2022-06-22
打造觸動人心的使用者體驗。在看完《「體驗設計」創意思考術》之後體驗設計創意思考術,玉樹真一郎。 玉樹真一郎,曾任職於任天堂株式會社,負責遊戲主機企劃,為了回應「想觸動人心、想獲得理解、想促使對方採取行動」的願望,寫了這本書。 「人為什麼玩遊戲?」「遊戲為什麼有趣?」玩遊戲和不玩遊戲的人都有這樣的疑問,前者是好奇,後者是質疑。
Thumbnail
avatar
壹肆說
2021-07-21
賣家系列:UBER and FoodPanda如何透過支付來優化使用者體驗 兩大品牌為何不選台灣二合一服務或是本地處理商。
Thumbnail
avatar
tcwhite
2021-05-31
打磨哲學,就靠使用者體驗對高中生而言,哲學之用在於引發、整理與表達想法。
Thumbnail
avatar
哲學開箱文
2020-11-27
回不去的使用者體驗!從投資視角看 Spotify|美股實境秀 # 5買進大趨勢裡的領頭羊,是一個絕佳好方法。有多好呢?如果你手上籌碼是各個趨勢的領頭羊,那麼 2020 別人的災難年;其實是你的豐收年。想知道 Spotify 是否具備投資價值?就得先回答「串流音樂是大趨勢嗎?」鬼宿認為:能寵壞使用者,讓人從心裡覺得「我們回不去了!」它就是「大趨勢。」
Thumbnail
avatar
鬼宿
2020-07-29
企業使用者體驗的未來 The Future of Enterprise UXUXpin 在2016時發布了一本免費電子書 The Future of Enterprise UX ,由 Amanda Linden 撰寫,裡面記載了 Amanda 在 Intuit 改版Quickbooks 和 Asana 重新設計的重點和經驗分享。
Thumbnail
avatar
Kyle Hsia
2020-02-16
好書推介|《UX從新手開始:使用者體驗的100堂必修課》- Joel Marsh 在這本書中,我們將向你介紹UX的核心概念和方法,從使用者研究到界面設計,再到使用者測試。你將學到如何站在使用者的角度思考,創建令人難忘的數位體驗。無論你是想入門還是深入研究UX,這本書都將為你提供寶貴的知識和靈感。準備好開啟UX之旅了嗎?讓我們一起出發吧!
Thumbnail
avatar
投行大叔
2019-11-11
軟體開發見聞錄#6:使用者體驗設計的原則/葉光釗「體驗設計」這門學問,現在已經成了軟體設計的顯學,其中包含了不同的面向:流程設計、技術架構設計、使用者介面設計等等。在大家還沒有開始重視使用體驗的時代,許多事情只能從嘗試和錯誤中去學習,包括開發團隊也一樣。
Thumbnail
avatar
吐納商業評論
2019-03-01