如何思考速度工具

如何思考速度工具

Google 提供了有關效能資料和效能工具的許多指引。這張資訊圖表旨在整合本指南,協助開發人員和行銷人瞭解如何提升效能及瀏覽所有 Google 效能工具產品。

下載 PDF 版本

有關效能的常見迷思

迷思 1

有一張紙,上面有折線圖。

單一指標可擷取使用者體驗。

無法以單一時間點反映良好的使用者體驗。包含使用者歷程中的一系列重要里程碑。瞭解不同的指標,並追蹤對使用者體驗至關重要的指標。

迷思 2

代表不同裝置和網路狀況的一組網路圖像。

單一「代表使用者」就能掌握使用者體驗。
由於使用者的裝置、網路連線和其他因素不同,實際效能會變得相當不同。請校正研究室和開發環境,以測試各種不同的條件。使用欄位資料即可選取裝置類型 (例如行動裝置和電腦)、網路連線 (例如3G 或 4G) 等主要變數。

迷思 3

呈現不同類型使用者的畫面

我的網站能快速載入,因此使用者應該能快速載入。
開發人員用於測試負載效能的裝置和網路通常比使用者實際體驗更快。使用欄位資料瞭解使用者使用的裝置和網路,並在測試效能時適當建立這些條件的鏡像。

瞭解研究室資料與實際數據的比較

實驗數據

一名男子站在許多抽象技術概念和圖示前

研究室資料是在受控管環境中透過預先定義裝置和網路設定收集的效能資料。這提供了可重現的結果和偵錯功能,有助於識別、隔離及修正效能問題。

正確做法

優勢

  • 有助於對效能問題進行偵錯
  • 以端對端的方式深入瞭解使用者體驗
  • 可重現的測試和偵錯環境
錯誤做法

限制

  • 可能無法捕捉真實世界中的瓶頸
  • 無法與實際網頁 KPI 建立關聯

欄位資料

一個人在公共場合使用行動裝置。

(也稱為「即時使用者監控」或「RUM」)

欄位資料是從實際載入網頁中收集的成效資料,使用者正在野外接觸。

正確做法

優勢

  • 可捕捉實際使用者體驗
  • 建立與業務主要成效指標的關聯性
錯誤做法

限制 {: .compare-worse }

  • 受限的指標組合
  • 偵錯功能有限

有哪些不同的效能工具?

燈塔

燈塔

提供個人化建議,協助您瞭解如何改善網站的效能、無障礙功能、PWA 和 SEO 及其他最佳做法。

WebPageTest

WebPageTest

您可以比較受控管的研究室環境中一或多個網頁的效能,深入瞭解效能統計資料,並在實體裝置上測試效能。您也可以在 WebPageTest 上執行 Lighthouse。

TestMySite

TestMySite

可讓您診斷各裝置上的網頁效能,並提供修正清單,以便改善 Webpagetest 和 PageSpeed Insights 的使用體驗。

PageSpeed Insights

PageSpeed Insights

顯示網站的速度欄位資料,以及有助於改善網站效能的常見最佳化建議。

速度評量表

速度評量表

可讓您與全球超過 10 個國家/地區的同業比較自家行動版網站速度。行動版網站速度是根據 Chrome 使用者體驗報告的實際資料計算得出。

影響計算機

影響計算機

讓您根據 Google Analytics (分析) 的基準資料,預估能改善行動版網站速度的潛在收益機會。

Chrome 開發人員工具

Chrome 開發人員工具

可讓您剖析網頁的執行階段,以及找出效能瓶頸並進行偵錯。

所以,你...

顯示圖表和圖表的書籍圖示

行銷人或開發人員試圖建立商業案例,改善網站的使用者體驗。您不僅言過美元和美分,還會尋找金額數字,藉此量化機會成本和預期升幅。

  • 使用速度評量表,查看您的行動版網站速度與您在 10 多個國家/地區與同業相比的結果。分數是根據 Chrome 使用者體驗報告的實際資料所計算。
  • 使用影響計算機,估算提升行動版網站速度的潛在收益機會。影響取決於 Google Analytics (分析) 的基準資料。
  • 使用 TestMySite 並對照業界基準測試網頁在行動裝置上的載入時間,即可瞭解簡單的修正方式如何加快網站速度並降低訪客流失率。TestMySite 目前採用 WebPageTest 和 PageSpeed Insights 技術。
圖示:筆記型電腦的背面及稍微上方有 Chrome 標誌。

開發人員試圖瞭解網站目前的效能 (也就是 Chrome 實際使用者的經驗),並尋找符合業界趨勢和指南的稽核建議。

PageSpeed Insights 可根據 Chrome 使用者經驗,協助您瞭解網站實際效能,並建議最佳化機會。

Lighthouse 稽核結果頁面的圖示。

開發人員嘗試瞭解及稽核網站是否符合現代網路效能最佳做法。

Lighthouse 包含一組完整的效能商機,可提供網頁所缺少的效能商機清單,以及執行各項最佳化可省下的時間,協助您瞭解應採取哪些行動。

錯誤旁的放大鏡圖示。

開發人員正在尋找技術指南,瞭解如何針對網站效能進行偵錯/深入分析。

Chrome 開發人員工具 (CDT) 提供效能面板,您可利用自訂設定剖析網站,藉此深入瞭解網站的效能問題,方便您追蹤效能瓶頸。您可以在網站的實際工作環境或開發版本中使用 CDT。

WebPageTest 包含進階的指標套件及追蹤瀏覽者。這項功能可讓您運用網路狀況,深入瞭解網站在真實行動硬體上的效能。