如何看待速度工具

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) 包含「Performance」面板,可讓您使用自訂設定剖析網站,深入瞭解網站的效能問題,進而找出效能瓶頸。您可以在正式版或開發中版本的網站上使用 CDT。

WebPageTest 包含一組進階指標和追蹤檢視器。這項工具可讓您深入瞭解網站在實際行動硬體上的效能,以及網路狀況。