方格精選

如何令到網站更快更吸引?(二)

更新於 2024/09/29閱讀時間約 3 分鐘

Google 經常更新網站性能的指標和工具,務求在衡量網站方面的用戶體驗與時並進。那讓我們來看看今年Google 提出的網站性能基準其中之一:FID — First Input Delay 首次輸入延遲吧。

相信大家都知道,給予客人良好的第一印象是多麼重要,其可以使訪客成為忠實用戶,願意在網頁上多作停留。但問題是,是什麼因素能夠建立良好印象,以及如何衡量網站可能對用戶產生何種印象?除了載入時間、視覺穩定性之外,網頁互動性亦相當重要。
在網頁上,第一印象可以以不同形式來展現,對於網站的設計、視覺上吸引力,以及對其速度和響應程度。用戶可以使用 First Paint(FP) 和 First Contentful Paint(FCP) 等指標,來衡量用戶對網站加載速度的第一印象 。不過,您的網頁在屏幕上完成內容繪製的速度只是其中一部分,但是同樣重要的,是用戶何時能夠開始與頁面內容進行互動。
針對用戶對網頁互動性和響應能力的衡量,Google 引入了一個名為First Input Delay的全新指標。

什麼是 FID ?

首次輸入延遲 (First input delay, FID) 測量從使用者第一次與你的網站互動(例如點擊連結、按鈕等等),瀏覽器實際上能夠回應此次互動的時間點。它是個在首次使用者於網頁互動,以及瀏覽器回應此互動的時間長度。
這個時間介於內容已經在頁面繪製完成 (FCP) ,以及所有功能都能夠回應使用者的互動時間。這通常取決於網站程式碼需要進行下載、剖析以及執行,而且受裝置速度的影響 (例如考慮到一些較低階的行動裝置)。延遲時間越長,使用者體驗就會越差。以下就是一些常見的延遲問題:
  • 點選連結或按鈕載入內容延遲
  • 文字對話框無法立即輸入文字
  • 打開下拉式選單畫面延遲
  • 無法勾選對話方塊

為什麼只考慮第一個輸入?

雖然任何輸入的延遲都可能導致糟糕的用戶體驗,但Google主要建議測量第一次輸入延遲,原因有幾個:第一次輸入延遲將是用戶對你的網站響應速度的第一印象,而第一印象對於塑造在網站質量和可靠度的整體印象至為重要。
在網絡上看到的最大的互動性問題發生在頁面加載過程中。因此Google認為,最初專注於改善網站的首次用戶互動,將對提高網絡的整體互動性產生最大的影響。

如何改善FID?

為了改善用戶體驗,網頁管理者應努力讓其網頁的首次輸入延遲小於0.1秒。要注意的是FID僅在事件處理中測量「延遲」,不代表事件處理時間本身;所以若要具針對性的改善策,你的目標便是讓延遲時間縮短。而改善的方案可以是:
  • 減少JavaScript等網頁程式碼的運作時間
  • 減低網頁的請求數和檔案大小
  • 減少主執行緒的工作
  • 減低第三方程式碼的影響
Google為了鼓勵大家提升網頁速度 ,特別開發了能追蹤FID的Javascript程式庫,以便大家追蹤到的 FID 事件,也能透用追蹤碼傳送到Google Analytics作出檢視和分析。
Ref:
為什麼會看到廣告
通過 Offision 立即提高您的辦公績效!免費試用! 無需信用卡 即開即用
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
淺談 web.dev 2020 提出的網站性能基準(一):最大內容繪製LCP
近年科技的創新,大大改變了我們彼此互動的方式,而這些改變正在影響企業裏各人的角色。我們能夠看到,數碼設施與傳統工作環境已經漸漸融合,針對設施使用率、生產力和工作空間等等的管理工具日漸普及,企業能夠透過這類數碼平台,善用新的途徑得到往時無法輕易得到的工作數據。
tl;dr, 沒有測試談不上好軟件! 軟件編碼的質素和一間公司發展的關係,在之前的文章《Code 寫得好對公司有用嗎?》已有討論,那麼有什麼因素會左右編碼的質素?其中一樣就是軟件測試。
相比傳統軟件一次收費或定期訂閱收費,開源軟件走的是截然不同的方向,而明顯的是,不同商業巨頭亦開始樂意走進這條新路。
如果有接觸過網頁開發的讀者,或者會聽過很多不同的專有名詞,其中不少得Front-end (前端) 和 Back-end (後端)這兩個字詞。有一些網站可能只需要設計師和前端開發者,有些則需要後端開發者和測試人員等等,那究竟前端和後端如何分辨?首先,讓我們搞清楚前端開發是什麼一回事。
「究竟應該花多點時間去寫好編碼,還是應該快快寫好新的功能,往後才改善編碼的質素」,雖然大家心裏面都希望花時間寫好每一個功能的編碼,但面對開發時間永遠不足、上司的壓力,很多時就會無視編碼的質素,來成就新功能/新產品可以及早推出。我們怎麼說服你自己、你的上司一開始的編碼質素是何其重要?
淺談 web.dev 2020 提出的網站性能基準(一):最大內容繪製LCP
近年科技的創新,大大改變了我們彼此互動的方式,而這些改變正在影響企業裏各人的角色。我們能夠看到,數碼設施與傳統工作環境已經漸漸融合,針對設施使用率、生產力和工作空間等等的管理工具日漸普及,企業能夠透過這類數碼平台,善用新的途徑得到往時無法輕易得到的工作數據。
tl;dr, 沒有測試談不上好軟件! 軟件編碼的質素和一間公司發展的關係,在之前的文章《Code 寫得好對公司有用嗎?》已有討論,那麼有什麼因素會左右編碼的質素?其中一樣就是軟件測試。
相比傳統軟件一次收費或定期訂閱收費,開源軟件走的是截然不同的方向,而明顯的是,不同商業巨頭亦開始樂意走進這條新路。
如果有接觸過網頁開發的讀者,或者會聽過很多不同的專有名詞,其中不少得Front-end (前端) 和 Back-end (後端)這兩個字詞。有一些網站可能只需要設計師和前端開發者,有些則需要後端開發者和測試人員等等,那究竟前端和後端如何分辨?首先,讓我們搞清楚前端開發是什麼一回事。
「究竟應該花多點時間去寫好編碼,還是應該快快寫好新的功能,往後才改善編碼的質素」,雖然大家心裏面都希望花時間寫好每一個功能的編碼,但面對開發時間永遠不足、上司的壓力,很多時就會無視編碼的質素,來成就新功能/新產品可以及早推出。我們怎麼說服你自己、你的上司一開始的編碼質素是何其重要?
你可能也想看
Google News 追蹤
Thumbnail
徵的就是你 🫵 超ㄅㄧㄤˋ 獎品搭配超瞎趴的四大主題,等你踹共啦!還有機會獲得經典的「偉士牌樂高」喔!馬上來參加本次的活動吧!
Thumbnail
隨著理財資訊的普及,越來越多台灣人不再將資產侷限於台股,而是將視野拓展到國際市場。特別是美國市場,其豐富的理財選擇,讓不少人開始思考將資金配置於海外市場的可能性。 然而,要參與美國市場並不只是盲目跟隨標的這麼簡單,而是需要策略和方式,尤其對新手而言,除了選股以外還會遇到語言、開戶流程、Ap
Thumbnail
你知道在SEO的世界裡,網站速度不再只是技術問題,而是影響使用者體驗和搜尋引擎排名的關鍵因素之一。根據Google的最新研究,如果網頁載入時間超過3秒鐘,超過一半的使用者將會離開網站。這直接影響網站的跳出率和轉換率。而且可能重重影響到你的SEO自然排名表現。
Thumbnail
根據 Amazon 研究統計指出,網頁每延遲 100 毫秒就會導致銷售額減少 1%。也就是說,過慢的網頁速度會影響你在網路上的生意。因此,本篇文章將教你如何透過 instant.page 技術讓你的網站在一分鐘內變快!
在現代競爭激烈的市場中,網站設計優化已成為企業吸引客戶的關鍵。一個經過優化的網站不僅能提高搜尋引擎排名,還能提供更好的用戶體驗,從而吸引更多的目標客戶。
Thumbnail
在現代網絡世界中,網站速度是一個至關重要的因素。快速加載的網站不僅能提供更好的用戶體驗,還能改善搜索引擎排名和轉換率。為了優化網站速度,我們可以從以下10個面向進行改進,包括選擇靠近目標用戶的主機位置、減少HTTP請求次數、壓縮網頁程式碼、移除未使用的CSS和JavaScript等。
在網絡世界裡,Landing Page是您與潛在客戶之間的第一個接觸點。它不僅是展示您品牌價值的場所,更是轉化訪問者為客戶的重要關鍵。這篇文章我們將探討Landing Page的重要性以及它在線上業務中的作用。
Thumbnail
使用者體驗的三個核心指標 Core Web Vitals:LCP、INP、CLS,以及 RAIL Model 介紹。
Thumbnail
拜讀 莫力全大大的 Day02 X 為什麼要在前端做效能優化? 重點整理 & 重述 & 加一點點自己的補充
Thumbnail
網站速度優化至少可以從主機位置、減少HTTP Requests次數、壓縮網頁程式碼、移除未使用的CSS、JS、HTML、精簡圖片大小、減少HTML元素、延遲載入、善用CDN服務、伺服器端程式演算法和資料庫表單欄位結構等10個面向進行。
Thumbnail
當設計一頁式引流網頁時,需要考慮關鍵字研究和優化、內容優化、結構化數據標記、網頁速度優化、高品質的外部連結以及衡量和優化的策略。這些策略有助於提高網頁在搜索引擎中的排名和吸引目標用戶。
Thumbnail
徵的就是你 🫵 超ㄅㄧㄤˋ 獎品搭配超瞎趴的四大主題,等你踹共啦!還有機會獲得經典的「偉士牌樂高」喔!馬上來參加本次的活動吧!
Thumbnail
隨著理財資訊的普及,越來越多台灣人不再將資產侷限於台股,而是將視野拓展到國際市場。特別是美國市場,其豐富的理財選擇,讓不少人開始思考將資金配置於海外市場的可能性。 然而,要參與美國市場並不只是盲目跟隨標的這麼簡單,而是需要策略和方式,尤其對新手而言,除了選股以外還會遇到語言、開戶流程、Ap
Thumbnail
你知道在SEO的世界裡,網站速度不再只是技術問題,而是影響使用者體驗和搜尋引擎排名的關鍵因素之一。根據Google的最新研究,如果網頁載入時間超過3秒鐘,超過一半的使用者將會離開網站。這直接影響網站的跳出率和轉換率。而且可能重重影響到你的SEO自然排名表現。
Thumbnail
根據 Amazon 研究統計指出,網頁每延遲 100 毫秒就會導致銷售額減少 1%。也就是說,過慢的網頁速度會影響你在網路上的生意。因此,本篇文章將教你如何透過 instant.page 技術讓你的網站在一分鐘內變快!
在現代競爭激烈的市場中,網站設計優化已成為企業吸引客戶的關鍵。一個經過優化的網站不僅能提高搜尋引擎排名,還能提供更好的用戶體驗,從而吸引更多的目標客戶。
Thumbnail
在現代網絡世界中,網站速度是一個至關重要的因素。快速加載的網站不僅能提供更好的用戶體驗,還能改善搜索引擎排名和轉換率。為了優化網站速度,我們可以從以下10個面向進行改進,包括選擇靠近目標用戶的主機位置、減少HTTP請求次數、壓縮網頁程式碼、移除未使用的CSS和JavaScript等。
在網絡世界裡,Landing Page是您與潛在客戶之間的第一個接觸點。它不僅是展示您品牌價值的場所,更是轉化訪問者為客戶的重要關鍵。這篇文章我們將探討Landing Page的重要性以及它在線上業務中的作用。
Thumbnail
使用者體驗的三個核心指標 Core Web Vitals:LCP、INP、CLS,以及 RAIL Model 介紹。
Thumbnail
拜讀 莫力全大大的 Day02 X 為什麼要在前端做效能優化? 重點整理 & 重述 & 加一點點自己的補充
Thumbnail
網站速度優化至少可以從主機位置、減少HTTP Requests次數、壓縮網頁程式碼、移除未使用的CSS、JS、HTML、精簡圖片大小、減少HTML元素、延遲載入、善用CDN服務、伺服器端程式演算法和資料庫表單欄位結構等10個面向進行。
Thumbnail
當設計一頁式引流網頁時,需要考慮關鍵字研究和優化、內容優化、結構化數據標記、網頁速度優化、高品質的外部連結以及衡量和優化的策略。這些策略有助於提高網頁在搜索引擎中的排名和吸引目標用戶。